在《关于网站页面中插入视频的完整解决方案》中，余斗提到调用优酷、腾讯视频的视频网站的视频的方法，这里用到的是iframe和embed的，但是在使用iframe标签调用腾讯视频的时候，会出现控制条，如下图：
而使用embed标签则不会出现这个控制条：
但是有一个问题是，使用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>
这样就可以完美解决问题。
资源均来自第三方，谨慎下载，前往第三方网站下载
