H5中添加video视频

video的属性

<video
  id="video" 
  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
  controls = "true"
         
 poster="https://img1.baidu.com/it/u=3561051001,3911111764&fm=26&fmt=auto&gp=0.jpg"  // 视频封面
  preload="auto" 
  webkit-playsinline="true" /* 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  // IOS微信浏览器支持小窗内播放
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  // 启用H5播放器,是wechat安卓版特性
  x5-video-player-fullscreen="true" // 全屏设置，设置为 true 是防止横屏
  x5-video-orientation="portraint" // 播放器的方向， landscape横屏，portraint竖屏，默认值为竖屏
  style="object-fit:fill">
</video>

 

• src：视频的地址
• controls：加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
• poster：属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。
• preload：属性规定在页面加载后载入视频。
• webkit-playsinline和playsinline：视频播放时局域播放，不脱离文档流 。但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而ISO的WeChat却支持。这里就要补充下，如果是想做全屏直播或者全屏H5体验的用户，IOS需要设置删除 webkit-playsinline 标签，因为你设置 false 是不支持的 ，安卓则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。 做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放
• x-webkit-airplay="allow"：这个属性应该是使此视频支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐还有照片文件，也就是说通过AirPlay功能可以实现影音文件的无线播放，当然前提是播放的终端设备也要支持相应的功能
• x5-video-player-type：启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。至于为什么同层播放只对安卓开放，是因为安卓不能像ISO一样局域播放，默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题。不过在测试的过程中发现，不同版本的IOS和安卓效果略有不同
• x5-video-orientation：声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式
• x5­-video­-player­-fullscreen：全屏设置。它又两个属性值，ture和false，true支持全屏播放，false不支持全屏播放。其实，IOS 微信浏览器是Chrome的内核，相关的属性都支持，也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核，一些属性标签比如playsinline就不支持，所以始终全屏。

 

1、通过width和height设置视频窗口大小

<video src="hangge.mp4" controls width="400" height="300"></video>

2、预加载媒体文件

设置preload不同的属性值，可以告诉浏览器应该怎样加载一个媒体文件：
（1）值为auto：让浏览器自动下载整个文件
（2）值为none：让浏览器不必预先下载文件
（3）值为metadata：让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）

<!-- 用户点击播放才开始下载 -->
<video src="hangge.mp4" controls preload="none"></video>

3、自动播放

（1）使用autoplay属性可以让浏览器加载完视频文件后立即播放。

<video src="hangge.mp4" controls autoplay></video>

（2）如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。

<video src="hangge.mp4" controls autoplay muted></video>

4、循环播放
使用loop属性让视频播放结束时，再从头开始播放。

<video src="hangge.mp4" controls loop></video>

5、设置替换视频的图片（封面图片）
    通过poster属性可以设置，浏览器在下面三种情况下会使用这个图片：
  （1）视频第一帧未加载完毕
  （2）把preload属性设置为none 
  （3）没有找到指定的视频文件

<video src="hangge.mp4" controls poster="hangge.png"></video>

6、浏览器兼容，如何让每一个浏览器都能顺利播放视频
     现在大部分浏览器都能支持H.264格式的视频，但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案：
（1）使用多种视频格式
     <video>和<audio>元素有个内置的格式后备系统。我们不使用src属性，而是在其内部嵌套一组<source>元素，浏览器会选择播放第一个它所支持的文件。
    我们可以添加WebM格式的视频提供对Opera的支持。

<video controls>

<source src="hangge.mp4" type="video/mp4">

<source src="hangge.webm" type="video/webm">

</video>

（2）添加Flash后备措施（推荐）
       上面那个方法不推荐，应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种连<video>元素都不支持的老浏览器。

这里使用Flowplayer Flash作为备用播放器（本地下载 ：flowplayer-3.2.18.zip）

<video controls>

<source src="hangge.mp4" type="video/mp4">

<source src="hangge.webm" type="video/webm">

<object id="flowplayer" width="400" height="300"

data="flowplayer-3.2.18.swf"

type="application/x-shockwave-flash">

<param name="movie" value="flowplayer-3.2.18.swf">

<param name="flashvars" value='config={"clip":"hangge.mp4"}'>

</object>

</video>

（3）也有人优先使用Flash，而HTML5作为后备措施。
这么做是因为Flash普及率比较高，而HTML5作为后备可以扩展iPad和iPhone用户

<object id="flowplayer" width="400" height="300"

    data="flowplayer-3.2.18.swf"

     type="application/x-shockwave-flash">

    <param name="movie" value="flowplayer-3.2.18.swf">

    <param name="flashvars" value='config={"clip":"hangge.mp4"}'>

    <video controls>

        <source src="hangge.mp4" type="video/mp4">

        <source src="hangge.webm" type="video/webm">

    </video>

</object>