html视频相关

一、引入方法

1、​iframe引入，这种方式比较通用，通常用第三方视频都是用这方法；比如：iframe class="shipin shipinJS" style="width:100%;display:block;" src='http://player.youku.com/embed/XMzEyODg5NjA0MA==' frameborder=0 'allowfullscreen' frameborder=0 'allowfullscreen' frameborder=0 'allowfullscreen' frameborder=0 'allowfullscreen'>iframe

2、利用html5video​标签引入，此方法引入效果最佳，但是支持的格式有限；比如：video style="max-width:100%;" poster="images/yousetp4.png" preload="auto" controls="controls">

                    source src="http://14.152.72.74/6573106C8E94582A27603B3699/03000A09005A0A902A1239330CE33BDAC399E9-B496-54E9-C131-7187276310E7.mp4?ccode=0512&duration=392&expire=18000&psid=68947f7bdbfac15f8cfbf4279dd451fb&ups_client_netip=b70e8516&ups_ts=1513329210&ups_userid=340903056&utid=ef5XD5CDXyQCAdoSqjBemcTf&vid=XMzEyODg5NjA0MA==&vkey=A0d69f37e1a32e7259f21a60d833675be" type="video/mp4" />

                video

如何得到第三方视频的video标签支持的格式了，比如说mp4格式？获取方法：先用第三方视频网站（比如优酷，腾讯视频）的通用代码iframe，在页面上打开，然后审查元素找到video上面的链接就是mp4，或者其他格式，这里需要注意如果页面打开，视频显示是flash的，将浏览器切换到手机模式访问即可看到

二、iframe引入的视频，自适应高度

iframe视频插入到网页中会遇到高度适应的问题，手机端浏览器显示的iframe视频窗口比例失调，这是由于height="100%"并不奏效，width的值可以用百分比数值实现自适应，但是高度只能设置具体数字，js应该可以实现自动获取iframe高度并动态写入，但本文介绍一下用css实现iframe高度自适应的办法。

@media查询实现自适应

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

当插入iframe视频代码时。在其上面嵌套一个div标签，其中iframe代码需要去掉其可能存在的宽高度的像素值并设置其width=“100%”、height=“100%”如下面所示：

1. <</span>div class="iframevideo"><</span>iframe></</span>iframe></</span>div>

在主题的样式文件中加入下面如下代码即可实现不同分辨率下高度的自适应

.iframevideo{width:100%;height:500px}@media only screen and (max-width:959px){.iframevideo{height:450px}}@media only screen and (max-width:767px){.iframevideo{height:400px}}@media only screen and (max-width:639px){.iframevideo{height:350px}}@media only screen and (max-width:479px){.iframevideo{height:250px}}​

如果不是width="100%"，可以设置添加以下代码让iframe视频居中显示，width="100%"时居中可有可无

1. .iframevideo .iframe {margin:0 auto;}  

缺点：

由于css设定的高度值在某个范围都是固定的，iframe视频窗口自适应并不是那么完美，并且视频窗口并不能完美切合视频，总是留有上下或左右的黑边，但这是个小问题，视频基本上实现的自适应效果还是不错的。

巧用padding实现自适应

现在的视频有一个常用的16：9的比例，要是我们能把iframe视频的宽高比固定下来，即不管width如何变化height都与之保持比例，这样在不同分辨率下也就实现了自适应。这种方法能够实现自适应是利用了padding属性的一个有趣的百分比值特征。
实现方法​

我们在给插入的iframe视频嵌套父级div标签，如下面代码所示
div class="selfadapting-video">iframe src="" frameborder=0> ​​​在主题样式文件中加入下面的代码：​

.selfadapting-video{position:relative;width:100%;height:0;padding-bottom:56%}.selfadapting-video iframe{position:absolute;width:100%;height:100%;left:0;top:0}​​​​

视频的宽高比可以设置成你想要的比例，设置后在任何分辨率下都能保持比例。缺点：由于设定比例，以后插入的视频都是固定的这种比例，但是视频本身比例可能多种多样。虽然可以在插入视频时直接写入样式根据不同视频设定不同的宽高比，但这样有点麻烦，每次插入都要完整设置一遍css样式。