版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
【移動應(yīng)用開發(fā)技術(shù)】微信開發(fā)之如何實(shí)現(xiàn)電影網(wǎng)基本功能
這篇文章給大家分享的是有關(guān)微信開發(fā)之如何實(shí)現(xiàn)電影網(wǎng)基本功能的內(nèi)容。在下覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過來看看吧。我們先來穿件一個(gè)index.html，代碼如下所示：<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<title>奪命雷公狗之電影在線點(diǎn)播網(wǎng)</title>
<!--寬高禁縮放
-->
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<!--類webapp-->
<meta
name="apple-mobile-web-app-capable"
content="yes">
<!--狀態(tài)條
-->
<meta
name="apple-mobile-web-app-status-bar-style"
content="black">
<!--電話號碼不是鏈接
-->
<meta
name="format-detection"
content="telephone=no">
<link
href="/mobile/1.0/jquery.mobile-1.0.min.css"
rel="stylesheet"
type="text/css"/>
<script
src="/jquery-1.6.4.min.js"
type="text/javascript"></script>
<script
src="/upload/information/20201208/260/10859.jpg"
width="100%"
/>
</div>
<div
data-role="content">
<ul
data-role="listview">
<li><a
href="#page2">第二頁</a></li>
<li><a
href="#page3">第三頁</a></li>
<li><a
href="#page4">第四頁</a></li>
<li><a
href="#page5">第五頁</a></li>
</ul>
</div>
<div
data-role="footer">
<h2>頁面腳注</h2>
</div>
</div>
<div
data-role="page"
id="page2">
<div
data-role="header">
<h2>header2</h2>
</div>
<div
data-role="content">
<img
width="200px"
src="/upload/information/20201208/260/10861.jpg"
/>
</div>
<div
data-role="footer">
<h2>頁面腳注</h2>
</div>
</div>
<div
data-role="page"
id="page3">
<div
data-role="header">
<h2>header3</h2>
</div>
<div
data-role="content">
內(nèi)容3
</div>
<div
data-role="footer">
<h2>footer3</h2>
</div>
</div>
<div
data-role="page"
id="page4">
<div
data-role="header">
<h2>header4</h2>
</div>
<div
data-role="content">
<b>內(nèi)容4</b>
</div>
<div
data-role="footer">
<h2>footer4
</h2>
</div>
</div>
<div
data-role="page"
id="page5">
<div
data-role="header">
<h2>header5</h2>
</div>
<div
data-role="content">
<h2>內(nèi)容5</h2>
</div>
<div
data-role="footer">
<h2>footer5</h2>
</div>
</div>
</body>
<html>首頁寫好了，那么下一步就到他的電影詳情頁了，movie.html代碼如下所示：<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<title>電影詳情頁</title>
<!--寬高禁縮放
-->
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<!--類webapp-->
<meta
name="apple-mobile-web-app-capable"
content="yes">
<!--狀態(tài)條
-->
<meta
name="apple-mobile-web-app-status-bar-style"
content="black">
<!--電話號碼不是鏈接
-->
<meta
name="format-detection"
content="telephone=no">
<link
href="/mobile/1.0/jquery.mobile-1.0.min.css"
rel="stylesheet"
type="text/css"/>
<script
src="/jquery-1.6.4.min.js"
type="text/javascript"></script>
<script
src="/upload/information/20201208/260/10881.jpg"
width="100%"
/>
</div>
<div
data-role="content">
<font
style="font-size:24px;color:red;"><b>劇情介紹</b></font><br
/><br
/>
<font
style="font-size:20px;color:red;"><b>白發(fā)魔女傳之明月天國</b></font><br
/><br
/>
明朝萬歷年間，剛剛被推舉為武當(dāng)派新任掌門的卓一航（黃曉明飾）奉命帶紅丸入京進(jìn)貢，沿途偶遇魔教妖女練霓裳（范冰冰飾），二人從不打不相識到情難自禁墜入愛河，并在練霓裳所駐扎的明月寨中互許終身。不久，錦衣衛(wèi)攻入明月寨，指出練霓裳就是殺死川陜總督卓仲廉的兇手，卓一航為查明真相只身前往京城。不久后卻傳來他歸順朝廷并另娶嬌妻的消息，練霓裳悲憤交集，一夜間黑發(fā)盡數(shù)變白。<br
/><br
/>
<font
style="font-size:24px;color:red;"><b>點(diǎn)擊播放</b></font><br
/><br
/>
<!--如果我們是在實(shí)際的開發(fā)的時(shí)候這里面一定是動態(tài)的，如href=“/ckplayer/index.php?id=100”-->
<a
target="_self"
href="/ckplayer/index.htm">
<img
src="movie1.png">
</a>
</div>
<div
data-role="footer">
<h4>奪命雷公狗出品2015-2016</h4>
</div>
</div>
<div
data-role="page"
id="page2">
<div
data-role="header">
<h2>header2</h2>
</div>
<div
data-role="content">
<img
width="200px"
src="/upload/information/20201208/260/10861.jpg"
/>
</div>
<div
data-role="footer">
<h2>頁面腳注</h2>
</div>
</div>
<div
data-role="page"
id="page3">
<div
data-role="header">
<h2>header3</h2>
</div>
<div
data-role="content">
內(nèi)容3
</div>
<div
data-role="footer">
<h2>footer3</h2>
</div>
</div>
<div
data-role="page"
id="page4">
<div
data-role="header">
<h2>header4</h2>
</div>
<div
data-role="content">
<b>內(nèi)容4</b>
</div>
<div
data-role="footer">
<h2>footer4
</h2>
</div>
</div>
<div
data-role="page"
id="page5">
<div
data-role="header">
<h2>header5</h2>
</div>
<div
data-role="content">
<h2>內(nèi)容5</h2>
</div>
<div
data-role="footer">
<h2>footer5</h2>
</div>
</div>
</body>
<html>那么最后一步就是電影播放頁了，我們直接將詳情也的地址鏈接到/ckplayer/index.htm即可，代碼如下所示：<!DOCTYPE
html>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>奪命雷公狗電影點(diǎn)播系統(tǒng)</title>
<style
type="text/css">
body,td,th
{
font-size:
14px;
line-height:
26px;
}
body
{
margin-left:
0px;
margin-top:
0px;
margin-right:
0px;
margin-bottom:
0px;
}
p
{
margin-top:
5px;
margin-right:
0px;
margin-bottom:
0px;
margin-left:
0px;
padding-left:
10px;
}
#a1{
/*播放器大小的設(shè)置*/
position:relative;
z-index:
100;
width:900px;
height:600px;
float:
left;
}
</style>
<script
type="text/javascript"
src="js/offlights.js"></script>
</head>
<body>
<div
id="a1"></div>
<!--
上面一行是播放器所在的容器名稱，如果只調(diào)用flash播放器，可以只用<div
id="a1"></div>
-->
<script
type="text/javascript"
src="ckplayer/ckplayer.js"
charset="utf-8"></script>
<script
type="text/javascript">
//如果你不需要某項(xiàng)設(shè)置，可以直接刪除，注意var
flashvars的最后一個(gè)值后面不能有逗號
//
function
loadedHandler(){
//
if(CKobject.getObjectById('ckplayer_a1').getType()){//說明使用html5播放器
//
alert('播放器已加載，調(diào)用的是HTML5播放模塊');
//
}
//
else{
//
alert('播放器已加載，調(diào)用的是Flash播放模塊');
//
}
//
}
var
_nn=0;
function
ckplayer_status(str){
_nn+=1;
if(_nn>100){
_nn=0;
document.getElementById('statusvalue').value='';
}
document.getElementById('statusvalue').value=str+'\n'+document.getElementById('statusvalue').value;
}
var
flashvars={
f:'/ckplayer/test.flv',//視頻地址
a:'',//調(diào)用時(shí)的參數(shù)，只有當(dāng)s>0的時(shí)候有效
s:'0',//調(diào)用方式，0=普通方法（f=視頻地址），1=網(wǎng)址形式,2=xml形式，3=swf形式(s>0時(shí)f=網(wǎng)址，配合a來完成對地址的組裝)
c:'0',//是否讀取文本配置,0不是，1是
x:'',//調(diào)用配置文件路徑，只有在c=1時(shí)使用。默認(rèn)為空調(diào)用的是ckplayer.xml
i:'/upload/information/20201208/260/10891.jpg',//初始圖片地址
d:'/down/pause6.1_1.swf|/down/pause6.1_2.swf',//暫停時(shí)播放的廣告，swf/圖片,多個(gè)用豎線隔開，圖片要加鏈接地址，沒有的時(shí)候留空就行
u:'',//暫停時(shí)如果是圖片的話，加個(gè)鏈接地址
l:'/down/adv6.1_1.swf|/down/adv6.1_2.swf',//前置廣告，swf/圖片/視頻，多個(gè)用豎線隔開，圖片和視頻要加鏈接地址
r:'',//前置廣告的鏈接地址，多個(gè)用豎線隔開，沒有的留空
t:'10|10',//視頻開始前播放swf/圖片時(shí)的時(shí)間，多個(gè)用豎線隔開
y:'',//這里是使用網(wǎng)址形式調(diào)用廣告地址時(shí)使用，前提是要設(shè)置l的值為空
z:'/down/buffer.swf',//緩沖廣告，只能放一個(gè)，swf格式
e:'3',//視頻結(jié)束后的動作，0是調(diào)用js函數(shù)，1是循環(huán)播放，2是暫停播放并且不調(diào)用廣告，3是調(diào)用視頻推薦列表的插件，4是清除視頻流并調(diào)用js功能和1差不多，5是暫停播放并且調(diào)用暫停廣告
v:'80',//默認(rèn)音量，0-100之間
p:'1',//視頻默認(rèn)0是暫停，1是播放，2是不加載視頻
h:'0',//播放http視頻流時(shí)采用何種拖動方法，=0不使用任意拖動，=1是使用按關(guān)鍵幀，=2是按時(shí)間點(diǎn)，=3是自動判斷按什么(如果視頻格式是.mp4就按關(guān)鍵幀，.flv就按關(guān)鍵時(shí)間)，=4也是自動判斷(只要包含字符mp4就按mp4來，只要包含字符flv就按flv來)
q:'',//視頻流拖動時(shí)參考函數(shù)，默認(rèn)是start
m:'',//讓該參數(shù)為一個(gè)鏈接地址時(shí)，單擊播放器將跳轉(zhuǎn)到該地址
o:'',//當(dāng)p=2時(shí)，可以設(shè)置視頻的時(shí)間，單位，秒
w:'',//當(dāng)p=2時(shí)，可以設(shè)置視頻的總字節(jié)數(shù)
g:'',//視頻直接g秒開始播放
j:'',//跳過片尾功能，j>0則從播放多少時(shí)間后跳到結(jié)束，<0則總總時(shí)間-該值的絕對值時(shí)跳到結(jié)束
k:'30|60',//提示點(diǎn)時(shí)間，如
30|60鼠標(biāo)經(jīng)過進(jìn)度欄30秒，60秒會提示n指定的相應(yīng)的文字
n:'這是提示點(diǎn)的功能，如果不需要?jiǎng)h除k和n的值|提示點(diǎn)測試60秒',//提示點(diǎn)文字，跟k配合使用，如
提示點(diǎn)1|提示點(diǎn)2
wh:'',//寬高比，可以自己定義視頻的寬高或?qū)捀弑热纾簑h:'4:3',或wh:'1080:720'
lv:'0',//是否是直播流，=1則鎖定進(jìn)度欄
loaded:'loadedHandler',//當(dāng)播放器加載完成后發(fā)送該js函數(shù)loaded
//調(diào)用播放器的所有參數(shù)列表結(jié)束
//以下為自定義的播放器參數(shù)用來在插件里引用的
my_url:encodeURIComponent(window.location.href)//本頁面地址
//調(diào)用自定義播放器參數(shù)結(jié)束
};
var
params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};//這里定義播放器的其它參數(shù)如背景色（跟flashvars中的b不同），是否支持全屏，是否支持交互
var
video=['/ckplayer/test.flv'];
CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video,params);
/*
以上代碼演示的兼容flash和html5環(huán)境的。如果只調(diào)用flash播放器或只調(diào)用html5請看其它示例
*/
function
videoLoadJs(s){
alert("執(zhí)行了播放");
}
function
playerstop(){
//只有當(dāng)調(diào)用視頻播放器時(shí)設(shè)置e=0或4時(shí)會有效果
alert('播放完成');
}
var
_nn=0;//用來計(jì)算實(shí)時(shí)監(jiān)聽的條數(shù)的，超過100條記錄就要?jiǎng)h除，不然會消耗內(nèi)存
function
getstart(){
var
a=CKobject.getObjectById('ckplayer_a1').getStatus();
var
ss='';
for
(var
k
in
a){
ss+=k+":"+a[k]+'\n';
}
alert(ss);
}
function
ckadjump(){
alert('這里演示了點(diǎn)擊跳過廣告按鈕后的執(zhí)行的動作，如果注冊會員可以做成直接跳過的效果。');
}
//開關(guān)燈
var
box
=
new
LightBox();
function
closelights(){//關(guān)燈
box.Show();
CKobject._K_('a1').style.width='940px';
CKobject._K_('a1').style.height='550px';
CKobject.getObjectById('ckplayer_a1').width=940;
CKobject.getObjectById('ckplayer_a1').height=550;
}
function
openlights(){//開燈
box.Close();
CKobject._K_('a1').style.width='600px';
CKobject._K_('a1').style.height='400px';
CKobject.getObjectById('ckplayer_a1').width=600;
CKobject.getObjectById('ckplayer_a1').height=400;
}
function
changePrompt(){
CKobject.getObjectById('ckplayer_a1').promptUnload();//卸載掉目前的
CKobject.getObjectById('ckplayer_a1').changeFlashvars('{k->10|20|30}{n->重設(shè)提示點(diǎn)一|重設(shè)提示點(diǎn)二|重設(shè)提示點(diǎn)三}');
CKobject.getObjectById('ckplayer_a1').promptLoad();//重新加載
}
function
addflash(){
if(CKobject.Flash()['f']){
CKobject._K_('a1').innerHTML='';
CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
}
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 部編初中歷史八下第12課民族大團(tuán)結(jié)教案
- 年產(chǎn)50萬套中醫(yī)醫(yī)療器械生產(chǎn)線技術(shù)改造項(xiàng)目可行性研究報(bào)告模板-立項(xiàng)拿地
- 中藥烏藥課件
- 2025-2030全球數(shù)字道路行業(yè)調(diào)研及趨勢分析報(bào)告
- 2025-2030全球SCR 尿素系統(tǒng)行業(yè)調(diào)研及趨勢分析報(bào)告
- 2025年全球及中國鉺鐿共摻光纖行業(yè)頭部企業(yè)市場占有率及排名調(diào)研報(bào)告
- 2025年全球及中國魚塘凈水器行業(yè)頭部企業(yè)市場占有率及排名調(diào)研報(bào)告
- 2025-2030全球汽車出風(fēng)口空氣清新劑行業(yè)調(diào)研及趨勢分析報(bào)告
- 2025年全球及中國IG100氣體滅火系統(tǒng)行業(yè)頭部企業(yè)市場占有率及排名調(diào)研報(bào)告
- 2025年全球及中國電子學(xué)習(xí)開發(fā)服務(wù)行業(yè)頭部企業(yè)市場占有率及排名調(diào)研報(bào)告
- 2024年云南省中考英語題庫【歷年真題＋章節(jié)題庫＋模擬試題】
- 麻醉藥品、精神藥品月檢查記錄表
- 演示文稿國庫集中支付總流程圖
- 浙江省寧波市海曙區(qū)2022學(xué)年第一學(xué)期九年級期末測試科學(xué)試題卷(含答案和答題卡)
- 為了自由呼吸的教育
- 高考英語詞匯3500電子版
- 建院新聞社成立策劃書
- GB/T 19675.2-2005管法蘭用金屬沖齒板柔性石墨復(fù)合墊片技術(shù)條件
- 運(yùn)動技能學(xué)習(xí)與控制課件第十三章動作技能的保持和遷移
- 2023年春節(jié)后建筑施工復(fù)工復(fù)產(chǎn)專項(xiàng)方案
- 電梯設(shè)備維護(hù)保養(yǎng)合同模板范本
評論
0/150
提交評論