这篇文章主要介绍了前端H5视频常见的使用场景，帮助大家更好的进行前端开发，感兴趣的朋友可以了解下
1.原生H5 video标签
视频id=' MSE ' autoplay=true playsinline控件=' controls '
源src='实机视频地址type='video/mp4 '
你的浏览器不支持录像标签
/视频
2.第三方插件video.js
_this.player=videojs(
_this.videoNode，
{
autoplay: true，
大播放按钮：为假，
控制：为真，
预加载： '自动，
poster:海报，
' notSupportedMessage: '视频加载失败，请刷新再试试，
来源：[
{
src:视频Url，
:型'视频/mp4 '，
},
],
},
函数onPlayerReady() {
这个。play()；
}
)
录像
ref={(node)=(this。视频节点=node)}
class name=' video-js vjs-big-play-centered '
预载='自动'
自动播放='自动播放'
playsinline='true '
webkit-playsinline='true '
X5-视频播放器-类型='h5 '
X5-视频播放器-全屏='false '
X5-视频方向='portraint '
/视频
2.1 支持原生H5 video标签的所有配置参数，并且更加丰富的配置。
2.2 多环境兼容性
3.业务开发中的场景
目前基本表现良好
3.1 自动播放实现
3.1.1 非微信端
目前主要方法是在videojs的onPlayerReady回调中调用玩方法，以及特殊环境下需要用户手动触发
3.1.2 微信端
微信端（特别是ios)为了能够实现自动播放功能，目前主要通过增加微信WeixinJSBridgeReady事件回调的方式来触发
文件。add event listener(' weixinsbridgeready '，function () {
这个。玩家。play()；
}，false)；
4.播放过程
一次播放三次请求
请求头信息
响应信息
范围：字节=0-首部信息，该信息用于检测服务端是否支持范围请求
接受-范围首部（并且它的值不为"无"),那么表示该服务器支持范围请求
内容-长度也是有效信息，因为它提供了要下载的视频的完整大小
内容-范围响应首部则表示这一部分内容在整个资源中所处的位置
范围-可以分片段请求，此时的内容-范围则返回的对应请求区间的大小
