平武建站

前端H5中Video的使用场景有哪些-创新互联

这篇文章主要介绍前端H5中Video的使用场景有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

为白碱滩等地区用户提供了全套网页设计制作服务，及白碱滩网站建设行业解决方案。主营业务为成都网站设计、成都做网站、白碱滩网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

1.原生H5 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();
    }
)

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);

4.播放过程

前端H5中Video的使用场景有哪些

一次播放三次请求

请求头信息

前端H5中Video的使用场景有哪些

响应信息

前端H5中Video的使用场景有哪些

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 播放视频
  
  
    
      
      
    
    
    

      播放
      暂停
    

    
  

以上是“前端H5中Video的使用场景有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


网页名称：前端H5中Video的使用场景有哪些-创新互联
网站地址：http://pwwzsj.com/article/pigod.html

其他资讯