Video 标签播放 m3u8 格式视频

在不借助流媒体播放器的前提下，直接播放 m3u8 格式的视频文件

更多精彩

• 更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线

写在前面的话

为什么要播放 m3u8 格式的视频

1. 对于一个小视频来说，理论上直接播放 mp4 的本地文件即可
2. 但如果将网站部署到云上，其他用户通过网址访问时，想要看到这个视频，就需要先完整的下载格式为 mp4 的视频文件
3. 当视频文件下载完成后，网站才可以播放该视频，这就对于用户体验是极大的下降

正规项目一般如何处理

1. 对于一个大型项目来说，一般会视频会使用流媒体播放器来播放视频
2. 例如阿里云的流媒体播放器，则是将所有视频存储到阿里云的流媒体服务器
3. 网页端通过阿里云为每个视频提供的 VID 来访问视频
4. 这首先需要在网页端继承一个流媒体播放器，同时还需要后端对接阿里云服务端，来获取视频的鉴权地址
5. 带来的好处是可以保证视频资源相对安全，降低被人直接盗取的可能性
6. 缺点则是对接起来过于繁琐，在小项目上显得得不偿失
7. 具体对接步骤可参考 Java + jQuery 实现阿里云点播

小项目可以如何快速操作

1. 可以使用 FFmpeg 将普通的 mp4 格式的视频文件转换为 m3u8 格式
2. 再使用 Video.js: 播放转码后的视频

参考网址

1. 前端video标签播放m3u8格式视频 - CSDN
2. 网站播放视频较慢，利用mp4转m3u8解决 - 简书

实现步骤

下载视频转码工具 FFmpeg

1. 前往 FFmpeg Download 下载对应版本的工具
   • 该工具不需要安装，是通过命令行运行的
2. 需要注意的一点：如果是 Mac 用户，可能会尝试使用 Homebrew 安装，这里需要说的是 “可以，但是没必要”
   • 因为如果通过 Homebrew 安装，会自动安装一堆依赖文件，而且最后工具可能还安装失败
   • 关键是该工具的使用不需要做任何系统配置，直接前往执行文件目录执行对应命令即可
   • 所以完全没必要通过 Homebrew 安装到系统中

使用 FFmpeg 对视频进行转码

1. 下载成功并解压后的目录入下图
   • ffmpeg 就是执行命令
     
2. 打开终端，进入到上图文件中的目录
   
3. 为了操作简单，将待转码的视频直接复制到该目录下
   • 可以看到下图中多了一个 video.mp4 文件
     
4. 在终端执行如下命令

./ffmpeg -i ./video.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls ./video.m3u8

5. 执行完成之后会在当前目录多出 video.m3u8 和 video0.ts 文件，如下图
   
6. 这个时候视频转换就完成了
   • 需要注意的是上述生成的两个文件需要保存在一起

将转码后的视频文件放置到服务器中

1. 需要注意的是，m3u8 格式的文件无法像 mp4 一样通过 相对/绝对 路径进行访问
2. 必须将其放置在某个服务器中，然后通过链接进行访问
3. 而且需要再次强调的是，video.m3u8 和 video0.ts 两个文件必须放置在同一个目录中
4. 具体是放置在 Nginx ，还是 Tomcat 这个随意，毕竟我们的静态网站要部署，实际上也需要依托服务器
5. 可以将视频文件放置于网站相同的服务器中，只需要指定 网址 + 目录 即可

下载视频播放器 Video.js

1. 前往 Getting Started with Video.js 可获取视频插件的 CDN 地址，或下载地址
   • 推荐使用 CDN 地址，因为方便快捷

在项目中引入 Video.js 的 CSS/JS 文件

1. 以下代码引入的是在线文件

...
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
...
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
...

在项目中引入 Video 标签

1. 可以看到以下代码中的视频文件是一个网址为前缀的链接
   • 如果是本地调试的话，也可能是 http://127.0.0.1:8090/video/video.m3u8

<video id="welcomeVideo" class="video-js vjs-default-skin">
  <source id="source" src="http://www.asing1elife.com/video/video.m3u8" type="application/x-mpegURL" />
</video>

初始化 Video.js

1. 具体参数如何使用，可以参考 Tutorial: options | Video.js Documentation

<script>
  var myVideo = videojs('welcomeVideo', {
    loop: true,
    controls: false,
    preload: 'auto',
    autoplay: true
  })
</script>