这篇文章主要介绍了前端H5 Video常见的使用场景，帮助大家更好的进行前端开发，感兴趣的朋友可以了解下
1.原生H5 video标签
<video id=”mse” autoplay=true playsinline controls=”controls”>
<source src=”实机视频地址” type=”video/mp4″>
你的浏览器不支持Video标签
</video>
2.第三方插件video.js
_this.player = videojs(
_this.videoNode,
{
autoplay: true,
bigPlayButton : false,
controls: true,
preload: auto,
poster: poster,
notSupportedMessage: 视频加载失败，请刷新再试试,
sources: [
{
src: videoUrl,
type: video/mp4,
},
],
},
function onPlayerReady() {
this.play();
}
)
<video
ref={(node) => (this.videoNode = node)}
className=”video-js vjs-big-play-centered”
preload=”auto”
autoplay=”autoplay”
playsinline=true
webkit-playsinline=true
x5-video-player-type=h5
x5-video-player-fullscreen=false
x5-video-orientation=portraint
></video>
2.1 支持原生H5 video标签的所有配置参数，并且更加丰富的配置。
2.2 多环境兼容性
3.业务开发中的场景
目前基本表现良好
3.1 自动播放实现
3.1.1 非微信端
目前主要方法是在videojs 的onPlayerReady回调中调用play方法，以及特殊环境下需要用户手动触发
3.1.2 微信端
微信端（特别是ios）为了能够实现自动播放功能，目前主要通过增加微信WeixinJSBridgeReady事件回调的方式来触发
4.播放过程
一次播放三次请求
请求头信息
响应信息
range: bytes=0- 首部信息，该信息用于检测服务端是否支持 Range 请求
Accept-Ranges 首部（并且它的值不为 “none”），那么表示该服务器支持范围请求
Content-Length 也是有效信息，因为它提供了要下载的视频的完整大小
Content-Range 响应首部则表示这一部分内容在整个资源中所处的位置
range – 可以分片段请求，此时的Content-Range则返回的对应请求区间的大小
5.其他场景
5.1 如何实现视频本地预览
视频本地预览的功能主要利用 URL.createObjectURL() 方法来实现。URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>视频本地预览示例</title>
</head>
<body>
<input type=”file” accept=”video/*” onchange=”loadFile(event)” />
 
