引用视频网站资源的正确姿势

1.前言

目前大部分网站如果需要嵌入视频的话，应该都是先把视频上传到视频网站平台上（如腾讯视频、爱奇艺、优酷等），然后再引用视频网站平台的资源，而引用的方式则是插入视频网站提供的分享代码。

腾讯视频、爱奇艺、优酷等视频网站都提供了多种引用方式，分别有 flash 地址、html、通用代码等。

2.Flash 与 Html 代码引用

众所周知，目前 Flash 已经逐渐衰落，各大视频网站也正在逐渐向 HTML5 技术转移。所以 Flash 的引用方式兼容性很差，PC 端目前还能正常使用，而移动端基本上已经惨不忍睹了。如果你用的是 Chrome 浏览器，那么你应该看过下面的提示：

所以就不要用 flash 这种方式了。

现在看看各家视频网站提供的 Html 代码：

<embed type="application/x-shockwave-flash" src="url" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" ></embed>

看到 application/x-shockwave-flash 没有？这种引用方式实际上也是依赖的 flash，在手机上也是完全不显示，因此这个方式也不推荐。

3.通用代码

之所以叫通用代码是因为它的特点是通用，以腾讯视频为例，看看代码：

<iframe frameborder="0" width="1280" height="720" src="https://v.qq.com/iframe/player.html?vid=t00253jl9mv&tiny=0&auto=0" allowfullscreen></iframe>

它是直接用 iframe 嵌入视频地址，然后网页在加载的时候 iframe 包含的视频部分就会由视频网站负责渲染，并以最佳的方式呈现，所以不管是 PC 端还是移动端都能正常显示播放。

因此通用代码是最佳的引用方式。当然，如果你的网站是纯粹面向 PC 端的，那么用 html 代码 embed 暂时也是没问题的。

4.可能会出现的问题

通用代码虽然是相对最优的选择，但是也有可能出现问题，比如引用了上面的代码，PC 端访问正常，移动端虽然也能正常访问，但是视频上下两端都出现了一大截黑块，高度无法自适应。

解决思路

让 iframe 宽度为 100%，与父容器宽度一致，高度动态计算赋值。把视频比例当成 16：9 来处理，则 iframe 高度为： height = 父容器宽度 * 9 /16。

转成代码

<iframe id="video_iframe" frameborder="0" width="100%" height="" src="https://v.qq.com/iframe/player.html?vid=t00253jl9mv&tiny=0&auto=0" allowfullscreen></iframe>

把 js 代码放在 /body 之前

<script type="text/javascript">
    iframe = document.getElementById('video_iframe');
    //parent-id 为 iframe 的父容器 id
    iheight = document.getElementsById("parent-id").offsetWidth *9/16;
    iframe.style.height = iheight + "px";
</script>