likes
comments
collection
share

H5移动端视频播放方案-JSMpeg

作者站长头像
站长
· 阅读数 40

随着工作中移动端页面比较多，遇到了移动端播放视频的需求是相对较多的，一想到视频，基本上都是第一时间想到使用 video 标签。

随着使用 video 标签，遇到的问题也随之而来，浏览器兼容性一直是一个令人忧虑的问题, 现在移动端堪比在web端上兼容IE，尤其是视频的兼容更是让人头疼。

痛点

举几个🌰：

  • 不同厂家的手机，浏览器对 video UI 实现的不一致，就导致原生 video 标签的样式在各大浏览器中都各不一样。
  • 国产浏览器对播放器劫持，浏览器自己实现了一套播放器而非调用内核提供的播放器，劫持了内核提供的播放器样式和逻辑。
  • 内联播放且视频层级无法覆盖。

相信这几个问题就够让开发人员头疼了。

解决方案

在经历过多次项目的折磨后，突然发现了有个很好的解决方案，基本上能解决大多数兼容问题。

什么是 JSMpeg

JSMpeg 是一个用于解码 MPEG1 视频流的 JavaScript 库。它可以在浏览器中解码视频流，并将其呈现为 Canvas 元素。JSMpeg 可以在支持 Canvas 和 WebSocket 的现代浏览器上运行。

说白了，就是使用 Canvas 标签去逐帧渲染出来。

基本工作原理如下：

  1. 将 MPEG1 视频流传输到浏览器：JSMpeg 支持通过 WebSocket 或 HTTP 协议将视频流传输到浏览器。通常情况下，使用 WebSocket 传输可以获得更好的性能和更低的延迟。
  2. 将视频流解码为帧：一旦视频流传输到浏览器，JSMpeg 就会将其解码为视频帧。MPEG1 视频是由一系列 I 帧、P 帧和 B 帧组成的，JSMpeg 需要解码这些帧才能正确显示视频。
  3. 将帧渲染到 Canvas 元素上：一旦视频帧被解码，JSMpeg 就会将它们渲染到 Canvas 元素上。Canvas 元素是 HTML5 提供的一个可以通过 JavaScript 动态绘制图形的元素，JSMpeg 使用它来显示视频。
  4. 处理视频的音频部分：除了视频帧外，MPEG1 视频还包括音频部分。JSMpeg 可以通过解码视频流来提取音频数据，并使用 Web Audio API 将音频数据播放出来。

如何使用 JSMpeg

  1. 可以从 JSMpeg 的 Github 存储库中下载最新的 JSMpeg.js 文件，并在 HTML 页面中使用 script 标签引入它。
<script src="jsmpeg.js"></script>
  1. 然后，需要创建一个用于呈现视频的 Canvas 元素。
<canvas id="canvas"></canvas>
  1. 之后创建 JSMpeg 对象
var player = new JSMpeg.Player('你的.ts视频地址', {
    canvas: document.getElementById('canvas'), // 容器id
    throttled: false, // 这里设置为false，不然不触发onSourceCompleted事件
    chunkSize: 4 * 1024 * 1024, // 使用分块加载数据时，一次加载的块大小。默认1024*1024(1mb)
    progressive: false, // 是否分块加载数据
    autoplay: false, // 是否自动播放
    loop: false, // 是否循环播放视频。默认true
    onSourceCompleted: () => {
        console.log('资源加载完成')
    },
    onPlay: () => {
        console.log('开始')
    },
    onPause: () => {
        console.log('暂停')
    },
    onEnded: () => {
        console.log('播放结束')
    },
    onStalled: () => {
        console.log('没有足够的数据用于播放')
    },
    onSourceEstablished: () => {
        console.log('第一次收到数据')
    }
})

如果没有设置 autoplay 为 true，需要在 onSourceEstablished 的回调中来执行视频播放的逻辑

player.play()

到这里，视频就可以正常播放了，并且在移动端上保持很好的兼容性。告别各种各样的 video 的坑。

注意事项

一般我们的视频格式都是 mp4 的格式，需要转为 .ts 的格式，这时候就需要用到 FFmpeg

什么是 FFmpeg

FFmpeg 是一个开源的跨平台音视频处理工具，它能够对音视频进行编解码、转换、过滤、裁剪、合并等处理操作。FFmpeg 支持多种常见的音视频格式，包括 MPEG、H.264、AAC、MP3 等，同时还支持流媒体协议和容器格式，如 RTSP、RTMP、HLS、MP4、AVI 等。

如何使用 FFmpeg

在 Mac 上安装 FFmpeg

在终端中执行以下命令安装 FFmpeg

brew install ffmpeg

在 window 上安装 FFmpeg

在 Windows 上安装 FFmpeg 可以通过下载预编译的二进制文件进行安装。

  1. 下载 FFmpeg：前往 FFmpeg 官网 下载最新版的 FFmpeg。
  2. 解压缩：将下载的压缩包解压到您想要安装 FFmpeg 的目录中。
  3. 配置环境变量：在 Windows 中打开“控制面板”，点击“系统和安全” -> “系统” -> “高级系统设置”，在弹出的窗口中点击“环境变量”，在“系统变量”中找到“Path”，双击它，在弹出的窗口中点击“新建”，输入 FFmpeg 的安装目录，并点击“确定”保存设置。
  4. 完成安装：打开命令提示符（Windows+R，输入 cmd 回车），执行 ffmpeg -version 命令，如果输出 FFmpeg 的版本信息，说明安装成功。

视频转换

如何不太了解 FFmpeg 命令，可以尝试使用以下命令进行转换

ffmpeg \
-i xxxx.mp4 \
-f mpegts -codec:v mpeg1video -b:v 3500k -vf scale=750:-1 -codec:a out.ts \
out.ts

-b:v 3500k 值越大，体积也就越大，可以根据实际情况来（抄于百度）

  • 1080*720的分度辨率，用5000K左右
  • 720*576的分辨率，用3500K左右
  • 640*480的分辨率，用1500K左右

这样我们就得到了 JSMpeg 所需要的视频格式了。

总结

到这里 就可以应对移动端 video 大部分的兼容性问题了。

除了 ffmpeg 的上手门槛有一定的难度，基本上就没有什么难点了。

有兴趣的可以去尝试下，会发现真的香~

Demo

具体效果可以查看以下地址

在线预览

转载自:https://juejin.cn/post/7225534193995923512
评论
请登录