www4166com网页中插入视频的方案

2019-10-01 14:35 来源:未知

今日批评网页中插入录像的方案,咱不探讨video标签的利用格局,video标签相比较合营的写法为:

网页中插入摄像的方案,网页插入摄像方案

明日研究网页中插入录制的方案,咱不探究video标签的施用方法,video标签比较合作的写法为:

 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>

然而日常不比其二个录制生成DVD、ogg、webm和swf(flash)四种格式的录制,原因是太占用时间了。

 

研商的率先种方案是:将摄像上传出爱奇艺、优酷和Tencent品级三方录制网址上,在应用第三方网址提供的代码(在录像下方的“分享”按键中就能够找到),具体育项目检验试代码为:

 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="http://www.kai-wang.com/uploads/allimg/191001/1435345626-1.jpg" 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>

网页突显效果为:

www4166com 1

 

亟需证实的是:在第三方摄像网址上享受代码中甄选通用的代码,这样可以使得PC端和平运动动端均能依心像意的变现录制。

座谈的第二种方案是:使用ckplayer插件。

ckplayer插件的官方网址为:

官方网址络有在线配置功能,根据自个儿的内需展开安插,在那之中三个相比较好测量检验代码为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效果为:

www4166com 2

 

挪动端效果为:

www4166com 3

 

 

评释:录制只供给利用近期浏览器协理最多的VCD格式就能够,必要管理的摄像格式少。其次是利用ckplayer插件可以比较完美的相配PC和移动端浏览器(经测验IE8 摄像播放不了)。

 

总结:

事先提出将摄像上传到第三方录制网址,包容性好,相同的时间录像加载快,不会据有网址服务器的带宽能源。

其次使用ckplayer插件在网页中插入本地摄像。**

 

明日争持网页中插入录像的方案,咱不研究video标签的选择办法,video标签相比合作的写法为:...

 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>

但是平常不比其多个录像生成VCD、ogg、webm和swf(flash)两种格式的摄像,原因是太占用时间了。

 

座谈的首先种方案是:将录像上传播爱奇艺、优酷和Tencent品级三方录制网址上,在采纳第三方网站提供的代码(在摄像下方的“分享”按键中就能够找到),具体育项目检查实验试代码为:

 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="http://www.kai-wang.com/uploads/allimg/191001/1435345626-1.jpg" 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>

网页展现效果为:

www4166com 4

 

内需表达的是:在第三方录像网址上享用代码中挑选通用的代码,那样能够使得PC端和活动端均能完美的表现录制。

座谈的第二种方案是:使用ckplayer插件。

ckplayer插件的官方网址为:

官网络有在线配置效应,依照本身的内需实行配置,当中多个相比好测验代码为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/staticqdw.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效果为:

www4166com 5

 

移动端效果为:

www4166com 6

 

 

证实:摄像只需求动用近些日子浏览器协理最多的VCD格式就能够,须要管理的录制格式少。其次是运用ckplayer插件能够相比较周密的匹配PC和平运动动端浏览器(经测验IE8 视频播放不了)。

2017-08-08更新:

TAG标签:
版权声明:本文由金沙澳门官网4166发布于世界史,转载请注明出处:www4166com网页中插入视频的方案