


WeChat develops online on-demand movie network and movie network basic function implementation code
Mar 24, 2017 pm 03:04 PMWe introduced the ckplayer player, the core part of the movie network, in the previous lesson, so we will complete this movie network based on the previous lesson.
Let’s first create an index.html. The code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>奪命雷公狗之電影在線(xiàn)點(diǎn)播網(wǎng)</title> <!--寬高禁縮放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--類(lèi)webapp--> <meta name="apple-mobile-web-app-capable" content="yes"> <!--狀態(tài)條 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--電話(huà)號(hào)碼不是鏈接 --> <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="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page1"> <div> <img src="banner.png" width="100%" /> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">第二頁(yè)</a></li> <li><a href="#page3">第三頁(yè)</a></li> <li><a href="#page4">第四頁(yè)</a></li> <li><a href="#page5">第五頁(yè)</a></li> </ul> </div> <div data-role="footer"> <h1>頁(yè)面腳注</h1> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>header2</h1> </div> <div data-role="content"> <img width="200px" src="http://i.cnblogs.com/images/adminlogo.gif" /> </div> <div data-role="footer"> <h1>頁(yè)面腳注</h1> </div> </div> <div data-role="page" id="page3"> <div data-role="header"> <h1>header3</h1> </div> <div data-role="content"> 內(nèi)容3 </div> <div data-role="footer"> <h1>footer3</h1> </div> </div> <div data-role="page" id="page4"> <div data-role="header"> <h1>header4</h1> </div> <div data-role="content"> <b>內(nèi)容4</b> </div> <div data-role="footer"> <h1>footer4 </h1> </div> </div> <div data-role="page" id="page5"> <div data-role="header"> <h1>header5</h1> </div> <div data-role="content"> <h1>內(nèi)容5</h1> </div> <div data-role="footer"> <h1>footer5</h1> </div> </div> </body> <html>
After the home page is written, the next step is to go to his movie details page. The movie.html code is as follows As shown:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>電影詳情頁(yè)</title> <!--寬高禁縮放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--類(lèi)webapp--> <meta name="apple-mobile-web-app-capable" content="yes"> <!--狀態(tài)條 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--電話(huà)號(hào)碼不是鏈接 --> <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="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <img src="mv1.png" 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ā)魔女傳之明月天國(guó)</b></font><br /><br /> 明朝萬(wàn)歷年間,剛剛被推舉為武當(dāng)派新任掌門(mén)的卓一航(黃曉明飾)奉命帶紅丸入京進(jìn)貢,沿途偶遇魔教妖女練霓裳(范冰冰飾),二人從不打不相識(shí)到情難自禁墜入愛(ài)河,并在練霓裳所駐扎的明月寨中互許終身。不久,錦衣衛(wèi)攻入明月寨,指出練霓裳就是殺死川陜總督卓仲廉的兇手,卓一航為查明真相只身前往京城。不久后卻傳來(lái)他歸順朝廷并另娶嬌妻的消息,練霓裳悲憤交集,一夜間黑發(fā)盡數(shù)變白。<br /><br /> <font style="font-size:24px;color:red;"><b>點(diǎn)擊播放</b></font><br /><br /> <!--如果我們是在實(shí)際的開(kāi)發(fā)的時(shí)候這里面一定是動(dòng)態(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"> <h3>奪命雷公狗出品2015-2016</h3> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>header2</h1> </div> <div data-role="content"> <img width="200px" src="http://i.cnblogs.com/images/adminlogo.gif" /> </div> <div data-role="footer"> <h1>頁(yè)面腳注</h1> </div> </div> <div data-role="page" id="page3"> <div data-role="header"> <h1>header3</h1> </div> <div data-role="content"> 內(nèi)容3 </div> <div data-role="footer"> <h1>footer3</h1> </div> </div> <div data-role="page" id="page4"> <div data-role="header"> <h1>header4</h1> </div> <div data-role="content"> <b>內(nèi)容4</b> </div> <div data-role="footer"> <h1>footer4 </h1> </div> </div> <div data-role="page" id="page5"> <div data-role="header"> <h1>header5</h1> </div> <div data-role="content"> <h1>內(nèi)容5</h1> </div> <div data-role="footer"> <h1>footer5</h1> </div> </div> </body> <html>
Then the last step is the movie playback page. We can directly link the details address to /ckplayer/index.htm. The code is as follows:
<!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> <!-- 上面一行是播放器所在的容器名稱(chēng),如果只調(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è)值后面不能有逗號(hào) // function loadedHandler(){ // if(CKobject.getObjectById('ckplayer_a1').getType()){//說(shuō)明使用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:'http://weixin.showtp.com/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來(lái)完成對(duì)地址的組裝) c:'0',//是否讀取文本配置,0不是,1是 x:'',//調(diào)用配置文件路徑,只有在c=1時(shí)使用。默認(rèn)為空調(diào)用的是ckplayer.xml i:'http://www.ckplayer.com/images/loadimg3.jpg',//初始圖片地址 d:'http://www.ckplayer.com/down/pause6.1_1.swf|http://www.ckplayer.com/down/pause6.1_2.swf',//暫停時(shí)播放的廣告,swf/圖片,多個(gè)用豎線(xiàn)隔開(kāi),圖片要加鏈接地址,沒(méi)有的時(shí)候留空就行 u:'',//暫停時(shí)如果是圖片的話(huà),加個(gè)鏈接地址 l:'http://www.ckplayer.com/down/adv6.1_1.swf|http://www.ckplayer.com/down/adv6.1_2.swf',//前置廣告,swf/圖片/視頻,多個(gè)用豎線(xiàn)隔開(kāi),圖片和視頻要加鏈接地址 r:'',//前置廣告的鏈接地址,多個(gè)用豎線(xiàn)隔開(kāi),沒(méi)有的留空 t:'10|10',//視頻開(kāi)始前播放swf/圖片時(shí)的時(shí)間,多個(gè)用豎線(xiàn)隔開(kāi) y:'',//這里是使用網(wǎng)址形式調(diào)用廣告地址時(shí)使用,前提是要設(shè)置l的值為空 z:'http://www.ckplayer.com/down/buffer.swf',//緩沖廣告,只能放一個(gè),swf格式 e:'3',//視頻結(jié)束后的動(dòng)作,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í)采用何種拖動(dòng)方法,=0不使用任意拖動(dòng),=1是使用按關(guān)鍵幀,=2是按時(shí)間點(diǎn),=3是自動(dòng)判斷按什么(如果視頻格式是.mp4就按關(guān)鍵幀,.flv就按關(guān)鍵時(shí)間),=4也是自動(dòng)判斷(只要包含字符mp4就按mp4來(lái),只要包含字符flv就按flv來(lái)) q:'',//視頻流拖動(dòng)時(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秒開(kāi)始播放 j:'',//跳過(guò)片尾功能,j>0則從播放多少時(shí)間后跳到結(jié)束,<0則總總時(shí)間-該值的絕對(duì)值時(shí)跳到結(jié)束 k:'30|60',//提示點(diǎn)時(shí)間,如 30|60鼠標(biāo)經(jīng)過(guò)進(jìn)度欄30秒,60秒會(huì)提示n指定的相應(yīng)的文字 n:'這是提示點(diǎn)的功能,如果不需要?jiǎng)h除k和n的值|提示點(diǎn)測(cè)試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ù)用來(lái)在插件里引用的 my_url:encodeURIComponent(window.location.href)//本頁(yè)面地址 //調(diào)用自定義播放器參數(shù)結(jié)束 }; var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};//這里定義播放器的其它參數(shù)如背景色(跟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環(huán)境的。如果只調(diào)用flash播放器或只調(diào)用html5請(qǐng)看其它示例 */ function videoLoadJs(s){ alert("執(zhí)行了播放"); } function playerstop(){ //只有當(dāng)調(diào)用視頻播放器時(shí)設(shè)置e=0或4時(shí)會(huì)有效果 alert('播放完成'); } var _nn=0;//用來(lái)計(jì)算實(shí)時(shí)監(jiān)聽(tīng)的條數(shù)的,超過(guò)100條記錄就要?jiǎng)h除,不然會(huì)消耗內(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)擊跳過(guò)廣告按鈕后的執(zhí)行的動(dòng)作,如果注冊(cè)會(huì)員可以做成直接跳過(guò)的效果。'); } //開(kāi)關(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(){//開(kāi)燈 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); } else{ alert('該環(huán)境中沒(méi)有安裝flash插件,無(wú)法切換'); } } function addhtml5(){ if(CKobject.isHTML5()){ support=['all']; CKobject._K_('a1').innerHTML=''; CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support); } else{ alert('該環(huán)境不支持html5,無(wú)法切換'); } } function addListener(){ if(CKobject.getObjectById('ckplayer_a1').getType()){//說(shuō)明使用html5播放器 CKobject.getObjectById('ckplayer_a1').addListener('play',playHandler); } else{ CKobject.getObjectById('ckplayer_a1').addListener('play','playHandler'); } } function playHandler(){ alert('因?yàn)樽?cè)了監(jiān)聽(tīng)播放,所以彈出此內(nèi)容,刪除監(jiān)聽(tīng)將不再?gòu)棾?amp;#39;); } function removeListener(){//刪除監(jiān)聽(tīng)事件 if(CKobject.getObjectById('ckplayer_a1').getType()){//說(shuō)明使用html5播放器 CKobject.getObjectById('ckplayer_a1').removeListener('play',playHandler); } else{ CKobject.getObjectById('ckplayer_a1').removeListener('play','playHandler'); } } </script> </body> </html>
The above is the detailed content of WeChat develops online on-demand movie network and movie network basic function implementation code. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

PHP is an open source scripting language that is widely used in web development and server-side programming, especially in WeChat development. Today, more and more companies and developers are starting to use PHP for WeChat development because it has become a truly easy-to-learn and easy-to-use development language. In WeChat development, message encryption and decryption are a very important issue because they involve data security. For messages without encryption and decryption methods, hackers can easily obtain the data, posing a threat to users.

In the development of WeChat public accounts, the voting function is often used. The voting function is a great way for users to quickly participate in interactions, and it is also an important tool for holding events and surveying opinions. This article will introduce you how to use PHP to implement WeChat voting function. Obtain the authorization of the WeChat official account. First, you need to obtain the authorization of the WeChat official account. On the WeChat public platform, you need to configure the API address of the WeChat public account, the official account, and the token corresponding to the public account. In the process of our development using PHP language, we need to use the PH officially provided by WeChat

With the popularity of WeChat, more and more companies are beginning to use it as a marketing tool. The WeChat group messaging function is one of the important means for enterprises to conduct WeChat marketing. However, if you only rely on manual sending, it is an extremely time-consuming and laborious task for marketers. Therefore, it is particularly important to develop a WeChat mass messaging tool. This article will introduce how to use PHP to develop WeChat mass messaging tools. 1. Preparation work To develop WeChat mass messaging tools, we need to master the following technical points: Basic knowledge of PHP WeChat public platform development Development tools: Sub

WeChat is currently one of the social platforms with the largest user base in the world. With the popularity of mobile Internet, more and more companies are beginning to realize the importance of WeChat marketing. When conducting WeChat marketing, customer service is a crucial part. In order to better manage the customer service chat window, we can use PHP language for WeChat development. 1. Introduction to PHP WeChat development PHP is an open source server-side scripting language that is widely used in the field of Web development. Combined with the development interface provided by WeChat public platform, we can use PHP language to conduct WeChat

In the development of WeChat public accounts, user tag management is a very important function, which allows developers to better understand and manage their users. This article will introduce how to use PHP to implement the WeChat user tag management function. 1. Obtain the openid of the WeChat user. Before using the WeChat user tag management function, we first need to obtain the user's openid. In the development of WeChat public accounts, it is a common practice to obtain openid through user authorization. After the user authorization is completed, we can obtain the user through the following code

As WeChat becomes an increasingly important communication tool in people's lives, its agile messaging function is quickly favored by a large number of enterprises and individuals. For enterprises, developing WeChat into a marketing platform has become a trend, and the importance of WeChat development has gradually become more prominent. Among them, the group sending function is even more widely used. So, as a PHP programmer, how to implement group message sending records? The following will give you a brief introduction. 1. Understand the development knowledge related to WeChat public accounts. Before understanding how to implement group message sending records, I

How to use PHP to develop WeChat public accounts WeChat public accounts have become an important channel for promotion and interaction for many companies, and PHP, as a commonly used Web language, can also be used to develop WeChat public accounts. This article will introduce the specific steps to use PHP to develop WeChat public accounts. Step 1: Obtain the developer account of the WeChat official account. Before starting the development of the WeChat official account, you need to apply for a developer account of the WeChat official account. For the specific registration process, please refer to the official website of WeChat public platform

With the development of the Internet and mobile smart devices, WeChat has become an indispensable part of the social and marketing fields. In this increasingly digital era, how to use PHP for WeChat development has become the focus of many developers. This article mainly introduces the relevant knowledge points on how to use PHP for WeChat development, as well as some of the tips and precautions. 1. Development environment preparation Before developing WeChat, you first need to prepare the corresponding development environment. Specifically, you need to install the PHP operating environment and the WeChat public platform
