您的位置：首页 > 其它

网页中插入视频的方案

2017-07-05 16:33 190 查看
今天讨论网页中插入视频的方案，咱不讨论video标签的使用方法，video标签比较兼容的写法为：

<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>


但是一般不会同一个视频生成MP4、ogg、webm和swf（flash）四种格式的视频，原因是太占用时间了。

讨论的第一种方案是：将视频上传到爱奇艺、优酷和腾讯等第三方视频网站上，在使用第三方网站提供的代码（在视频下方的“分享”按钮中即可找到），具体测试代码为：

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>网页中插入视频的方法</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
text-align: center;
}

div {
font-size: 18px;
color: #2E8DED;
margin-top: 20px;
}
</style>
</head>

<body>
<!--爱奇艺视频（无通用代码） 只支持PC端 IE8以上都可以-->
<div>
爱奇艺视频（无通用代码） 只支持PC端 IE8以上都可以
</div>
<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>
<div>
腾讯视频 全部支持 IE8以上都可以
</div>
<!--腾讯视频 全部支持 IE8以上都可以-->
<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=p0521h3uu1a&tiny=0&auto=0" allowfullscreen></iframe>
<div>
优酷视频 全部支持 IE8以上都可以
</div>
<!--优酷视频 全部支持 IE8以上都可以-->
<iframe height=498 width=510 src='http://player.youku.com/embed/XMjg2OTA1NDc5Mg==' frameborder=0 'allowfullscreen'></iframe>
</body>

</html>


网页显示效果为：



需要说明的是：在第三方视频网站上分享代码中选择通用的代码，这样可以使得PC端和移动端均能良好的展现视频。

讨论的第二种方案是：使用ckplayer插件。

ckplayer插件的官网为：http://www.ckplayer.com/

官网上有在线配置功能，根据自己的需要进行配置，其中一个比较好测试代码为ckplayer调用html5播放器，

<!DOCTYPE html>
<html lang="zh">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ckplayer调用html5播放器</title>
</head>

<body>
<div id="a1"></div>
<!--引入ckplayer.js-->
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars = {
//p参数为是否自动播放，可以为 1 或 0，默认为 1，参数不为 1 时播放器加载完成后均为暂停状态。
p: 0,
//e为视频结束后的动作，0 停止播放并发送js，1 是不发送 js 且重新循环播放，2 停止播放，默认为2。
e: 1,
//i为视频播放器初始图片地址，即封面图片，默认为空。
i: 'http://www.ckplayer.com/static/images/cqdw.jpg'
};
//http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4 为视频地址
var video = ['http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4->video/mp4'];
var support = ['all'];
//第一个100% 为宽度同样可以设置为像素，第二个100% 为高度同样可以设置为像素
CKobject.embedHTML5('a1', 'ckplayer_a1', '100%', '100%', video, flashvars, support);
</script>
</body>

</html>


PC效果为：



移动端效果为：



说明：视频只需要使用目前浏览器支持最多的MP4格式即可，需要处理的视频格式少。其次是使用ckplayer插件可以比较完美的兼容PC和移动端浏览器（经测试IE8 视频播放不了）。

2017-08-08更新：

ckplayer插件的api地址为：http://www.ckplayer.com/manual/13/54.htm

使用方法：

CKobject.getObjectById('ckplayer_a1').videoPlay();//播放视频


总结：

优先建议将视频上传到第三方视频网站，兼容性好，同时视频加载快，不会占用网站服务器的带宽资源。

其次使用[b]ckplayer插件在网页中插入本地视频。[/b]

[b]更新（2017-07-10）：[/b]

[b]方案一的实例代码：[/b]

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>网页中插入视频的方法</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
text-align: center;
}
</style>
</head>

<body>
<iframe frameborder="0" width="600" height="498" src="https://v.qq.com/iframe/player.html?vid=t0523oagtrj&tiny=0&auto=0" allowfullscreen></iframe>
<!--<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>-->

</body>

</html>


效果如下图所示：



或者使用embed标签，见实例代码：

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>网页中插入视频的方法</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
text-align: center;
}
</style>
</head>

<body>
<!--<iframe frameborder="0" width="600" height="498" src="https://v.qq.com/iframe/player.html?vid=t0523oagtrj&tiny=0&auto=0" allowfullscreen></iframe>-->
<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>

</body>

</html>


效果：



但是使用embed标签在移动端无法显示视频。

综合以上2个代码，我们可以对浏览器进行判断，在PC点使用embed标签，移动端使用iframe。具体见以下代码：

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>网页中插入视频的方法</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
text-align: center;
}
</style>
</head>

<body>
<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>
<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>
<script type="text/javascript">
var iframe = document.getElementById('iframe'),
embed = document.getElementById('embed');
iframe.style.display = 'none';
embed.style.display = 'none';
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = false;
var v = 0
for(v = 0; v < Agents.length; v++) {
if(userAgentInfo.indexOf(Agents[v]) > 0) {
flag = true;
break;
}
}
//检测浏览器为移动端浏览器
if(flag) {

iframe.style.display = '';
embed.style.display = 'none';
} else {
iframe.style.display = 'none';
embed.style.display = '';
}
</script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航