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


Posted in HTML / CSS onAugust 21, 2020

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);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>播放器截图示例</title>
  </head>
  <body>
    <video id="video" controls="controls" width="460" height="270" crossorigin="anonymous">
      <!-- 请替换为实际视频地址 -->
      <source src="请替换为实际视频地址" />
    </video>
    <button onclick="captureVideo()">截图</button>
    <script>
      let video = document.querySelector("#video");
      let canvas = document.createElement("canvas");
      let img = document.createElement("img");
      img.crossOrigin = "";
      let ctx = canvas.getContext("2d");

      function captureVideo() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        img.src = canvas.toDataURL();
        document.body.append(img);
      }
    </script>
  </body>
</html>

5.3 如何实现 Canvas 播放视频

使用 Canvas 播放视频主要是利用 ctx.drawImage(video, x, y, width, height) 来对视频当前帧的图像进行绘制,其中 video 参数就是页面中的 video 对象。所以如果我们按照特定的频率不断获取 video 当前画面,并渲染到 Canvas 画布上,就可以实现使用 Canvas 播放视频的功能。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用 Canvas 播放视频</title>
  </head>
  <body>
    <video id="video" controls="controls" style="display: none;">
      <!-- 请替换为实际视频地址 -->
      <source src="请替换为实际视频地址" />
    </video>
    <canvas
      id="myCanvas"
      width="460"
      height="270"
      style="border: 1px solid blue;"
    ></canvas>
    <div>
      <button id="playBtn">播放</button>
      <button id="pauseBtn">暂停</button>
    </div>
    <script>
      const video = document.querySelector("#video");
      const canvas = document.querySelector("#myCanvas");
      const playBtn = document.querySelector("#playBtn");
      const pauseBtn = document.querySelector("#pauseBtn");
      const context = canvas.getContext("2d");
      let timerId = null;

      function draw() {
        if (video.paused || video.ended) return;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        timerId = setTimeout(draw, 0);
      }

      playBtn.addEventListener("click", () => {
        if (!video.paused) return;
        video.play();
        draw();
      });

      pauseBtn.addEventListener("click", () => {
        if (video.paused) return;
        video.pause();
        clearTimeout(timerId);
      });
    </script>
  </body>
</html>

以上就是前端H5 Video常见使用场景简介的详细内容,更多关于前端H5 Video常见场景的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 #HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 #HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 #HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 #HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 #HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 #HTML / CSS
amaze ui 的使用详细教程
Aug 19 #HTML / CSS
You might like
ajax缓存问题解决途径
2006/12/06 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
js单词形式的运算符
2014/05/06 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
python放大图片和画方格实现算法
2018/03/30 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Django实现随机图形验证码的示例
2020/10/15 Python
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
村委会贫困证明范本
2014/09/17 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
护士自我推荐信范文
2015/03/24 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
python之django路由和视图案例教程
2021/07/26 Python