设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 数据 手机
当前位置: 首页 > 综合聚焦 > 编程要点 > 正文

前端H5 Video常见使用场景简介

发布时间:2021-01-21 17:21 所属栏目:13 来源:脚本之家
导读:这篇文章主要介绍了前端H5 Video常见的使用场景,帮助大家更好的进行前端开发,感兴趣的朋友可以了解下 1.原生H5 video标签 video id="mse" autoplay=true playsinline controls="controls" source src="实机视频地址" type="video/mp4" 你的浏览器不支持Vid

这篇文章主要介绍了前端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事件回调的方式来触发

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 对象。

<!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)" />
    <video
      id="previewContainer"
      controls
      width="480"
      height="270"
      style="display: none;"
    ></video>

    <script>
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = function () {
          const output = document.querySelector("#previewContainer");
          output.style.display = "block";
          output.src = URL.createObjectURL(new Blob([reader.result]));
        };
        reader.readAsArrayBuffer(event.target.files[0]);
      };
    </script>
  </body>
</html>

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

(编辑:ASP站长网)

网友评论
推荐文章
    热点阅读