WEB前端H5 Vide常见场景浅析

最新推荐文章于 2024-04-17 10:54:16 发布

WEB前端含光

最新推荐文章于 2024-04-17 10:54:16 发布

阅读量336

点赞数

分类专栏：前端基础前端面试前端项目

本文链接：https://blog.csdn.net/Arui_0/article/details/107863295

版权

本文探讨了H5 video标签的使用，包括原生标签和video.js插件的配置与兼容性。在业务开发中，重点讨论了自动播放在非微信端和微信端的实现策略。同时，分析了视频播放过程中的三次请求和Range请求的原理。此外，还介绍了视频本地预览、播放器截图及Canvas播放视频的技术实现。

摘要由CSDN通过智能技术生成

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事件回调的方