今天討論網頁中插入視頻的方案,咱不討論video標籤的使用方法,video標籤比較兼容的寫法爲:javascript
1 <video width="800" height=""> 2 <source src="myvideo.mp4" type="video/mp4"></source> 3 <source src="myvideo.ogv" type="video/ogg"></source> 4 <source src="myvideo.webm" type="video/webm"></source> 5 <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"> 6 <param name="movie" value="myvideo.swf" /> 7 <param name="flashvars" value="autostart=true&file=myvideo.swf" /> 8 </object> 9 當前瀏覽器不支持 video直接播放,點擊這裏下載視頻: <a href="myvideo.webm">下載視頻</a> 10 </video>
可是通常不會同一個視頻生成MP四、ogg、webm和swf(flash)四種格式的視頻,緣由是太佔用時間了。css
討論的第一種方案是:將視頻上傳到愛奇藝、優酷和騰訊等第三方視頻網站上,在使用第三方網站提供的代碼(在視頻下方的「分享」按鈕中便可找到),具體測試代碼爲:html
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>網頁中插入視頻的方法</title> 9 <style type="text/css"> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 body { 16 text-align: center; 17 } 18 19 div { 20 font-size: 18px; 21 color: #2E8DED; 22 margin-top: 20px; 23 } 24 </style> 25 </head> 26 27 <body> 28 <!--愛奇藝視頻(無通用代碼) 只支持PC端 IE8以上均可以--> 29 <div> 30 愛奇藝視頻(無通用代碼) 只支持PC端 IE8以上均可以 31 </div> 32 <embed src="http://player.video.qiyi.com/8b89d9c3ec3535c93ceaded663cc91c2/0/0/v_19rr7zq9xw.swf-albumId=715375800-tvId=715375800-isPurchase=0-cnId=25" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> 33 <div> 34 騰訊視頻 所有支持 IE8以上均可以 35 </div> 36 <!--騰訊視頻 所有支持 IE8以上均可以--> 37 <iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=p0521h3uu1a&tiny=0&auto=0" allowfullscreen></iframe> 38 <div> 39 優酷視頻 所有支持 IE8以上均可以 40 </div> 41 <!--優酷視頻 所有支持 IE8以上均可以--> 42 <iframe height=498 width=510 src='http://player.youku.com/embed/XMjg2OTA1NDc5Mg==' frameborder=0 'allowfullscreen'></iframe> 43 </body> 44 45 </html>
網頁顯示效果爲:html5
須要說明的是:在第三方視頻網站上分享代碼中選擇通用的代碼,這樣可使得PC端和移動端均能良好的展示視頻。
java
討論的第二種方案是:使用ckplayer插件。
web
ckplayer插件的官網爲:http://www.ckplayer.com/api
官網上有在線配置功能,根據本身的須要進行配置,其中一個比較好測試代碼爲ckplayer調用html5播放器,瀏覽器
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>ckplayer調用html5播放器</title> 7 </head> 8 9 <body> 10 <div id="a1"></div> 11 <!--引入ckplayer.js--> 12 <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> 13 <script type="text/javascript"> 14 var flashvars = { 15 //p參數爲是否自動播放,能夠爲 1 或 0,默認爲 1,參數不爲 1 時播放器加載完成後均爲暫停狀態。 16 p: 0, 17 //e爲視頻結束後的動做,0 中止播放併發送js,1 是不發送 js 且從新循環播放,2 中止播放,默認爲2。 18 e: 1, 19 //i爲視頻播放器初始圖片地址,即封面圖片,默認爲空。 20 i: 'http://www.ckplayer.com/static/images/cqdw.jpg' 21 }; 22 //http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4 爲視頻地址 23 var video = ['http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4->video/mp4']; 24 var support = ['all']; 25 //第一個100% 爲寬度一樣能夠設置爲像素,第二個100% 爲高度一樣能夠設置爲像素 26 CKobject.embedHTML5('a1', 'ckplayer_a1', '100%', '100%', video, flashvars, support); 27 </script> 28 </body> 29 30 </html>
PC效果爲:服務器
移動端效果爲:併發
說明:視頻只須要使用目前瀏覽器支持最多的MP4格式便可,須要處理的視頻格式少。其次是使用ckplayer插件能夠比較完美的兼容PC和移動端瀏覽器(經測試IE8 視頻播放不了)。
2017-08-08更新:
ckplayer插件的api地址爲:http://www.ckplayer.com/manual/13/54.htm
使用方法:
CKobject.getObjectById('ckplayer_a1').videoPlay();//播放視頻
總結:
優先建議將視頻上傳到第三方視頻網站,兼容性好,同時視頻加載快,不會佔用網站服務器的帶寬資源。
其次使用ckplayer插件在網頁中插入本地視頻。
更新(2017-07-10):
方案一的實例代碼:
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>網頁中插入視頻的方法</title> 9 <style type="text/css"> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 body { 16 text-align: center; 17 } 18 </style> 19 </head> 20 21 <body> 22 <iframe frameborder="0" width="600" height="498" src="https://v.qq.com/iframe/player.html?vid=t0523oagtrj&tiny=0&auto=0" allowfullscreen></iframe> 23 <!--<embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=r03996hk7rg&auto=0" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>--> 24 25 </body> 26 27 </html>
效果以下圖所示:
或者使用embed標籤,見實例代碼:
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>網頁中插入視頻的方法</title> 9 <style type="text/css"> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 body { 16 text-align: center; 17 } 18 </style> 19 </head> 20 21 <body> 22 <!--<iframe frameborder="0" width="600" height="498" src="https://v.qq.com/iframe/player.html?vid=t0523oagtrj&tiny=0&auto=0" allowfullscreen></iframe>--> 23 <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=r03996hk7rg&auto=0" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> 24 25 </body> 26 27 </html>
效果:
可是使用embed標籤在移動端沒法顯示視頻。
綜合以上2個代碼,咱們能夠對瀏覽器進行判斷,在PC點使用embed標籤,移動端使用iframe。具體見如下代碼:
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>網頁中插入視頻的方法</title> 9 <style type="text/css"> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 body { 16 text-align: center; 17 } 18 </style> 19 </head> 20 21 <body> 22 <iframe frameborder="0" width="600" height="498" src="https://v.qq.com/iframe/player.html?vid=t0523oagtrj&tiny=0&auto=0" allowfullscreen id="iframe"></iframe> 23 <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=r03996hk7rg&auto=0" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" id="embed"></embed> 24 <script type="text/javascript"> 25 var iframe = document.getElementById('iframe'), 26 embed = document.getElementById('embed'); 27 iframe.style.display = 'none'; 28 embed.style.display = 'none'; 29 var userAgentInfo = navigator.userAgent; 30 var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); 31 var flag = false; 32 var v = 0 33 for(v = 0; v < Agents.length; v++) { 34 if(userAgentInfo.indexOf(Agents[v]) > 0) { 35 flag = true; 36 break; 37 } 38 } 39 //檢測瀏覽器爲移動端瀏覽器 40 if(flag) { 41 42 iframe.style.display = ''; 43 embed.style.display = 'none'; 44 } else { 45 iframe.style.display = 'none'; 46 embed.style.display = ''; 47 } 48 </script> 49 </body> 50 51 </html>