腾讯优酷视频共享iframe，嵌入高度倍数控制

进行页面优化时，可以使用多种形式来增加用户体验，例如图片描述，文本描述，GIF，Flash，必要的锚文本，音频，视频等. 尽管搜索引擎无法识别图片，Flash，音频和视频，从用户的角度来看，用户会认为此页面的质量很高，并且停留时间会更长.

如果服务器不能很好地支持图片和视频等多媒体，导致页面打开缓慢并影响用户体验，则可以将附件放在7牛云，百度云和其他云平台上. 这些平台可以提高网站的加载速度和访问速度.

如果引用其他平台的视频内容优酷 视频分享，则比较麻烦. 例如，腾讯视频，优酷视频，新浪视频等，这些平台都有广告. 用指定的下载器下载的文件只能用指定的播放器打开. 有些不能使用格式工厂直接转码，这确实会影响用户. 经验.

如果是专用视频台，则可以学习CKplayer，也可以转到广告中. 如果仅使用视频要求较低的网站，则可以直接使用这些平台的共享功能. 通常有两种形式:

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
embed 标签定义嵌入的内容，比如插件
iframe 支持所有浏览器，embed是HTML5新标签支持IE9以上和主流浏览器

信贷已经测试过，不会在移动终端上报价. 如今优酷 视频分享，移动用户变得越来越强大，这是非常值得做的.

但是，这两个标签引用的内容视频是不自适应的，并且有很多方法可以在Internet上解决它们. 以下是最简单，最实用的组织方式，支持4: 3比例和16: 9比例. 当然，您可以根据需要进行调整.

使用JS方法，代码如下:

<iframe allowfullscreen="" frameborder="0" height="400" id="movie_16_9"  src="https://v.qq.com/iframe/player.html?vid=r0372rfy8y4&amp;tiny=0&amp;auto=0" width="100%"></iframe>
<iframe allowfullscreen="" frameborder="0" height="400" id="movie_4_3"  src="https://v.qq.com/iframe/player.html?vid=r0372rfy8y4&amp;tiny=0&amp;auto=0" width="100%"></iframe>
<script type="text/javascript">
 document.getElementById("movie_16_9").style.height=document.getElementById("movie_16_9").scrollWidth*0.5625+"px";//16:9
 document.getElementById("movie_4_3").style.height=document.getElementById("movie_4_3").scrollWidth*0.75+"px";//4:3 
</script> 

注意上面的红色部分. 值0.5625是9÷16的结果，而0.75是值3÷4的结果. 如果要设置其他内容，只需自己进行修改.

本文地址:

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-164446-1.html