video标签 在ios 9 、ios 10.1.1、Ie8 以及iphonex 中的兼容性

目前浏览器都是支持H5中video视频播放，代码如下：

<video src="https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4"
	 id="video"
	 preload="auto" 
	 autoPlay={false} 
	 controls={true}
	  loop
	  muted
	  playsinline
	 style={{width: '100%', height: '210px',borderRadius:'10px'}} status="play"
	 poster="https://ykyl.oss-cn-qingdao.aliyuncs.com/app_image/activitie/day1000_title_img.jpg">
	<source src='https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4'  type="video/mp4"/>
	</video>

最近写了一个H5的视频播放功能，webview内嵌手机页面，遇到了一些问题，借鉴了博友很多，做了归纳总结，，将video的相关属性，属性的使用，不同的浏览器中属性的兼容性的问题都归纳进本文，所以有这一篇文章，video的所有问题都了如指掌！不吹牛了，直接上干货。

video标签的使用

video标签含有src、postor、preload、autopla、loop、controls、width、height、style等几个属性，以及一个内部使用的标签标签外，还可以包含当指定的视频都不能播放时，返回的内容。

相关属性

1、src属性和poster属性

这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示，海报图，预览图，是在视频数据无效可能是视频正在加载，可能是视频地址错误等等

2、preload属性

这个属性也能通过名字了解用处，此属性用于定义视频是否预加载，属性有三个可选择值：none、metadata、auto。如果不使用此属性，默认为auto

None：不进行预加载，使用此属性，可能是页面制作者认为不期望此视频，或者减少HTTP请求。
Metadata：部分预加载，使用此属性值，代表页面制作认为用户不期望视频。
Auto：全部预加载

3、autoplay属性

又是一个看名字就是到用户的属性，Autoplay属性用于设置视频是否自动播放，是一个布尔值，当出现时，表示自动播放，去掉是表示不自动播放

注意⚠️：HTML中布尔值不是true和false。正确的用法是，在标签中使用此属性表示true，此时属性要么没有值，要么其值恒等于他的名字（ 或者)，不使用此属性表示false（）

4、loop属性

一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔值

5、controls属性

controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。

6、source属性

source 标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频），指定多个可选择的(浏览器最终选一个)文件地址，且只能在媒体标签没有使用src属性时使用。

浏览器按照source标签的顺序检测标签指定的视频是否能够播放，(可能是视频格式不支持，视频不存在等等)，如果不能播放，换以下个，此方法多用于兼容不同的浏览器。source标签本身不代表任何含义，不能单独出现。
1、src属性：用于指定媒体的地址，和video标签一样
2、type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取mei
3、Media属性：用于说明媒体在何种媒介中使用

HTML 4.01 与 HTML 5 之间的差异

preload 属性是HTML5中的新属性

---

语法

属性值： load：规定是否预加载视频 可能的值：

• auto - 当页面加载后载入整个视频
• meta - 当页面加载后只载入元数据
• none - 当页面加载后不载入视频

如何获取视频的加载速度，让视频加载完后才让用户进入？

不能，没有任何的办法来判断视频的加载进度，而且在iOS中，只有视频在播放的时候，才临时去加载视频。因此，即使在video标签中写了preload属性也是不管用的。使用canplaythrough事件也是没法检测的，虽然video标签在加载的时候会触发canplaythrough方法，但播放时依然会有卡顿的现象，而且某些android还不支持次属性。

播放视频时只有声音没有图像

有部分原因是视频的编码不正确，在mp4格式的视频中，只支持h.264 的视频，我的项目中遇到了这种情况，但不是视频编码的问题，有声音没图像的情况，那么应该就是视频有点大了，然后视频压缩了一下，

解决方案：在用户点击和视频正式播放之前添加一个loading效果，当视频正式播放的时候就取消loading。

function video_loading( $video ){
        $('.video_loading').show();
 
        var timer = setInterval(function(){
            var currentTime = $video[0].currentTime; // 检测当前的播放时间
 
            if( currentTime>0 ){
                $('.video_loading').hide();
                clearInterval( timer );
            }
        }, 100)
    }

播放视频时只有声音没有图像

IE7，8以及早起浏览器兼容性

我们可以在网页中使用video来播放视频，但是如果使用早起浏览器的访问者可能无法正常观看这个视频，此外，由于视频编码器的历史渊源导致各种各种浏览器支持的视频格式不同，应对这些问题，想在网页中使用HTML5 video功能，可以按照下面三个步骤操作，

第一步：提前准备好多个格式视频文件

目前没有一个视频格式兼容所有浏览器，唯一的解决方法就是把视频转换成多种格式。
1、mp4 格式的视频，可以在苹果设备中使用；
2、pgv格式的视频，用在火狐浏览器中，
3、webm 格式的视频，这个可以用在谷歌浏览器；
视频转换工具国内的功能比较少，转换格式可能没有上面后两个，而且质量良莠不齐，往往需要注册才能使用，推荐一个国外的工具(FQ), http:’'www.online-convert.com。 甚至不用安装软件，直接选择响应的目标格式，然后上传视频，配置一下参数就可以转换出来，没有合适工具的朋友，可以尝试一个

第二步：使用多个source上传不同格式的视频，

第三步：为老旧浏览器做兼容

1、我们可以把视频上传到优酷，土豆或者爱奇艺等国内著名视频服务商，直接调用视频代码
2、在老旧版本的浏览器使用flash视频文件
3、head部分引用<scriptsrc=“http://html5media.googlecode.com/svn/trunk/src/html5media.min.js”>

html5media是一个让video、audio标签在旧版本IE全面兼容的javascript类库，它不依赖与任何javascript框架，页面使用了html5media之后，当老版的浏览器不支持html5时，它将会自动切换成flash模式的flowplayer播放器尝试播放。

4、使用videoJS插件实现兼容性的问题 http://videojs.com

不同手机之间的兼容，ios10.1.1不支持video标签无视频，ios9不支持多次播放的问题

因为最近做了一个内嵌的webview的产品宣传落地页面，自己的手机是ios10.1.1系统，同事一只顽固鸟还保持使用ios9系统，iphonex完全没有问题，ios11也没有问题，安卓手机可以播放，也支持多次播放，但是播放按钮是偏上的，因为框架是react，就从git上面找到了一个react-html5video插件，但是我的iphonex手机上面的播放按钮一只是一个加载图片，不知道为什么，最终做了一个判断


代码奉上：给有问题的前端同僚

	import { DefaultPlayer as Video } from 'react-html5video';
	import 'react-html5video/dist/styles.css';
	{
        isIphoneX() ? <video src="https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4"
        id="video" preload="auto" autoPlay={false} controls={true} loop muted  playsinline
        style={{width: '100%', height: '210px',borderRadius:'10px'}} status="play"
        poster="https://ykyl.oss-cn-qingdao.aliyuncs.com/app_image/activitie/day1000_title_img.jpg"
		 className='marginTop30'>
		<source src='https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4'  type="video/mp4"/>
         </video>:
           <Video autoPlay loop muted
         controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
          poster="https://ykyl.oss-cn-qingdao.aliyuncs.com/app_image/activitie/day1000_title_img.jpg"
          style={{width:'100%',height:'192px',marginTop:'30px'}}
          onCanPlayThrough={() => {
            // Do stuff
          }}>
           <source src="https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4" type="video/mp4" />
           <track label="English" kind="subtitles" srcLang="en" src="" default />
         </Video>
       }