網頁中插入視頻的方案

時間 2019-12-19

標籤網頁插入視頻方案欄目 HTML 简体版

原文原文鏈接

今天討論網頁中插入視頻的方案，咱不討論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&amp;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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。