在前端中Video常见使用场景有哪些
本文小编为大家详细介绍"在前端中Video常见使用场景有哪些"，内容详细，步骤清晰，细节处理妥当，希望这篇"在前端中Video常见使用场景有哪些"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
1.原生H5 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(); })2.1 支持原生H5 video标签的所有配置参数，并且更加丰富的配置。
2.2 多环境兼容性
3.业务开发中的场景
目前基本表现良好
3.1 自动播放实现
3.1.1 非微信端
目前主要方法是在videojs 的onPlayerReady回调中调用play方法，以及特殊环境下需要用户手动触发
3.1.2 微信端
微信端（特别是ios）为了能够实现自动播放功能，目前主要通过增加微信WeixinJSBridgeReady事件回调的方式来触发
document.addEventListener("WeixinJSBridgeReady", function () { this.player.play();}, false);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 对象。
视频本地预览示例 5.2 如何实现播放器截图
播放器截图功能主要利用 CanvasRenderingContext2D.drawImage() API 来实现。Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种方式在 Canvas 上绘制图像。
drawImage API 的语法如下：
void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 播放器截图示例 5.3 如何实现 Canvas 播放视频
使用 Canvas 播放视频主要是利用 ctx.drawImage(video, x, y, width, height) 来对视频当前帧的图像进行绘制，其中 video 参数就是页面中的 video 对象。所以如果我们按照特定的频率不断获取 video 当前画面，并渲染到 Canvas 画布上，就可以实现使用 Canvas 播放视频的功能。
使用 Canvas 播放视频 读到这里，这篇"在前端中Video常见使用场景有哪些"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。
