怪诶

腾讯优酷视频分享iframe,embed高度多种比例控制
在做页面优化的时候,可以采用多种表现形式增加用户体验,如图片描述、文字说明、GIF动图、Flash、必要的锚文本、...
扫描右侧二维码阅读全文
08
2018/12

腾讯优酷视频分享iframe,embed高度多种比例控制

在做页面优化的时候,可以采用多种表现形式增加用户体验,如图片描述、文字说明、GIF动图、Flash、必要的锚文本、音频、视频等。虽然搜索引擎对图片、Flash、音视频都无法识别,但从用户角度看,用户会认为这个页面质量非常高,停留时间也会长得多。

    如果你的服务器对图片、视频等多媒体支持不佳,造成页面打开速度慢,影响用户体验的话,可以把附件放在7牛云、百度云等云平台,这些平台能提高网站加载、访问速度。

    如果是引用其他平台的视频内容,就比较麻烦了。比如腾讯视频、优酷视频、新浪视频等,这些平台的时候都有广告,用指定的下载器下载下来文件只能用指定的播放器打开,有些还不能直接用格式工厂转码,确实比较影响用户体验。

1-1P206113114.png
如果是专门的视频站,可研究一下CKplayer,可以去广告。如果只是把视频要求并不高的网站,可以直接用这些平台的分享功能,一般有两种形式:

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)

embed 标签定义嵌入的内容,比如插件
iframe 支持所有浏览器,embed是HTML5新标签支持IE9以上和主流浏览器

过在移动端的引用的是没有广告的,在移动端用户日益强大的今天,是非常值得做的哦。

    但是这两个标签引用的内容视频高度都不能自适应,网上有多种方法解决,下面是整理的最简单最实用的方法,支持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> 
Last modification:December 8th, 2018 at 08:31 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment