溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關微信開發之如何實現電影網基本功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
我們先來穿件一個index.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"> <!--狀態條 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--電話號碼不是鏈接 --> <meta name="format-detection" content="telephone=no"> <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="https://cache.yisu.com/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="https://cache.yisu.com/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"> 內容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>內容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>內容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"> <!--狀態條 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--電話號碼不是鏈接 --> <meta name="format-detection" content="telephone=no"> <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="https://cache.yisu.com/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>白發魔女傳之明月天國</b></font><br /><br /> 明朝萬歷年間，剛剛被推舉為武當派新任掌門的卓一航（黃曉明飾）奉命帶紅丸入京進貢，沿途偶遇魔教妖女練霓裳（范冰冰飾），二人從不打不相識到情難自禁墜入愛河，并在練霓裳所駐扎的明月寨中互許終身。不久，錦衣衛攻入明月寨，指出練霓裳就是殺死川陜總督卓仲廉的兇手，卓一航為查明真相只身前往京城。不久后卻傳來他歸順朝廷并另娶嬌妻的消息，練霓裳悲憤交集，一夜間黑發盡數變白。<br /><br /> <font style="font-size:24px;color:red;"><b>點擊播放</b></font><br /><br /> <!--如果我們是在實際的開發的時候這里面一定是動態的，如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="https://cache.yisu.com/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"> 內容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>內容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>內容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>奪命雷公狗電影點播系統</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{
/*播放器大小的設置*/
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>
<!--
上面一行是播放器所在的容器名稱，如果只調用flash播放器，可以只用<div id="a1"></div>
-->
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
//如果你不需要某項設置，可以直接刪除，注意var flashvars的最后一個值后面不能有逗號
// function loadedHandler(){
// if(CKobject.getObjectById('ckplayer_a1').getType()){//說明使用html5播放器
// alert('播放器已加載，調用的是HTML5播放模塊');
// }
// else{
// alert('播放器已加載，調用的是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:'http://weixin.showtp.com/ckplayer/test.flv',//視頻地址
a:'',//調用時的參數，只有當s>0的時候有效
s:'0',//調用方式，0=普通方法（f=視頻地址），1=網址形式,2=xml形式，3=swf形式(s>0時f=網址，配合a來完成對地址的組裝)
c:'0',//是否讀取文本配置,0不是，1是
x:'',//調用配置文件路徑，只有在c=1時使用。默認為空調用的是ckplayer.xml
i:'https://cache.yisu.com/upload/information/20201208/260/10891.jpg',//初始圖片地址
d:'http://www.ckplayer.com/down/pause6.1_1.swf|http://www.ckplayer.com/down/pause6.1_2.swf',//暫停時播放的廣告，swf/圖片,多個用豎線隔開，圖片要加鏈接地址，沒有的時候留空就行
u:'',//暫停時如果是圖片的話，加個鏈接地址
l:'http://www.ckplayer.com/down/adv6.1_1.swf|http://www.ckplayer.com/down/adv6.1_2.swf',//前置廣告，swf/圖片/視頻，多個用豎線隔開，圖片和視頻要加鏈接地址
r:'',//前置廣告的鏈接地址，多個用豎線隔開，沒有的留空
t:'10|10',//視頻開始前播放swf/圖片時的時間，多個用豎線隔開
y:'',//這里是使用網址形式調用廣告地址時使用，前提是要設置l的值為空
z:'http://www.ckplayer.com/down/buffer.swf',//緩沖廣告，只能放一個，swf格式
e:'3',//視頻結束后的動作，0是調用js函數，1是循環播放，2是暫停播放并且不調用廣告，3是調用視頻推薦列表的插件，4是清除視頻流并調用js功能和1差不多，5是暫停播放并且調用暫停廣告
v:'80',//默認音量，0-100之間
p:'1',//視頻默認0是暫停，1是播放，2是不加載視頻
h:'0',//播放http視頻流時采用何種拖動方法，=0不使用任意拖動，=1是使用按關鍵幀，=2是按時間點，=3是自動判斷按什么(如果視頻格式是.mp4就按關鍵幀，.flv就按關鍵時間)，=4也是自動判斷(只要包含字符mp4就按mp4來，只要包含字符flv就按flv來)
q:'',//視頻流拖動時參考函數，默認是start
m:'',//讓該參數為一個鏈接地址時，單擊播放器將跳轉到該地址
o:'',//當p=2時，可以設置視頻的時間，單位，秒
w:'',//當p=2時，可以設置視頻的總字節數
g:'',//視頻直接g秒開始播放
j:'',//跳過片尾功能，j>0則從播放多少時間后跳到結束，<0則總總時間-該值的絕對值時跳到結束
k:'30|60',//提示點時間，如 30|60鼠標經過進度欄30秒，60秒會提示n指定的相應的文字
n:'這是提示點的功能，如果不需要刪除k和n的值|提示點測試60秒',//提示點文字，跟k配合使用，如 提示點1|提示點2
wh:'',//寬高比，可以自己定義視頻的寬高或寬高比如：wh:'4:3',或wh:'1080:720'
lv:'0',//是否是直播流，=1則鎖定進度欄
loaded:'loadedHandler',//當播放器加載完成后發送該js函數loaded
//調用播放器的所有參數列表結束
//以下為自定義的播放器參數用來在插件里引用的
my_url:encodeURIComponent(window.location.href)//本頁面地址
//調用自定義播放器參數結束
};
var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};//這里定義播放器的其它參數如背景色（跟flashvars中的b不同），是否支持全屏，是否支持交互
var video=['http://weixin.showtp.com/ckplayer/test.flv'];
CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video,params);
/*
以上代碼演示的兼容flash和html5環境的。如果只調用flash播放器或只調用html5請看其它示例
*/
function videoLoadJs(s){
alert("執行了播放");
}
function playerstop(){
//只有當調用視頻播放器時設置e=0或4時會有效果
alert('播放完成');
}
var _nn=0;//用來計算實時監聽的條數的，超過100條記錄就要刪除，不然會消耗內存
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('這里演示了點擊跳過廣告按鈕后的執行的動作，如果注冊會員可以做成直接跳過的效果。');
}
//開關燈
var box = new LightBox();
function closelights(){//關燈
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->重設提示點一|重設提示點二|重設提示點三}');
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);
}
else{
alert('該環境中沒有安裝flash插件，無法切換');
}
}
function addhtml5(){
if(CKobject.isHTML5()){
support=['all'];
CKobject._K_('a1').innerHTML='';
CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
}
else{
alert('該環境不支持html5，無法切換');
}
}
function addListener(){
if(CKobject.getObjectById('ckplayer_a1').getType()){//說明使用html5播放器
CKobject.getObjectById('ckplayer_a1').addListener('play',playHandler);
}
else{
CKobject.getObjectById('ckplayer_a1').addListener('play','playHandler');
}
}
function playHandler(){
alert('因為注冊了監聽播放，所以彈出此內容，刪除監聽將不再彈出');
}
function removeListener(){//刪除監聽事件
if(CKobject.getObjectById('ckplayer_a1').getType()){//說明使用html5播放器
CKobject.getObjectById('ckplayer_a1').removeListener('play',playHandler);
}
else{
CKobject.getObjectById('ckplayer_a1').removeListener('play','playHandler');
}
}
</script>
</body>
</html>感謝各位的閱讀！關于“微信開發之如何實現電影網基本功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
