在不借助流媒体播放器的前提下，直接播放 m3u8 格式的视频文件
更多精彩
- 更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线
写在前面的话
为什么要播放 m3u8 格式的视频
- 对于一个小视频来说，理论上直接播放 mp4 的本地文件即可
- 但如果将网站部署到云上，其他用户通过网址访问时，想要看到这个视频，就需要先完整的下载格式为 mp4 的视频文件
- 当视频文件下载完成后，网站才可以播放该视频，这就对于用户体验是极大的下降
正规项目一般如何处理
- 对于一个大型项目来说，一般会视频会使用流媒体播放器来播放视频
- 例如阿里云的流媒体播放器，则是将所有视频存储到阿里云的流媒体服务器
- 网页端通过阿里云为每个视频提供的 VID 来访问视频
- 这首先需要在网页端继承一个流媒体播放器，同时还需要后端对接阿里云服务端，来获取视频的鉴权地址
- 带来的好处是可以保证视频资源相对安全，降低被人直接盗取的可能性
- 缺点则是对接起来过于繁琐，在小项目上显得得不偿失
- 具体对接步骤可参考 Java + jQuery 实现阿里云点播
小项目可以如何快速操作
参考网址
实现步骤
下载视频转码工具 FFmpeg
- 前往 FFmpeg Download 下载对应版本的工具
- 该工具不需要安装，是通过命令行运行的
-
需要注意的一点：如果是 Mac 用户，可能会尝试使用 Homebrew 安装，这里需要说的是 “可以，但是没必要”
- 因为如果通过 Homebrew 安装，会自动安装一堆依赖文件，而且最后工具可能还安装失败
- 关键是该工具的使用不需要做任何系统配置，直接前往执行文件目录执行对应命令即可
- 所以完全没必要通过 Homebrew 安装到系统中
使用 FFmpeg 对视频进行转码
- 下载成功并解压后的目录入下图
-
ffmpeg 就是执行命令
image
-
-
打开终端，进入到上图文件中的目录
image - 为了操作简单，将待转码的视频直接复制到该目录下
- 可以看到下图中多了一个 video.mp4 文件
image
- 可以看到下图中多了一个 video.mp4 文件
- 在终端执行如下命令
./ffmpeg -i ./video.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls ./video.m3u8
- 执行完成之后会在当前目录多出 video.m3u8 和 video0.ts 文件，如下图
image - 这个时候视频转换就完成了
- 需要注意的是上述生成的两个文件需要保存在一起
将转码后的视频文件放置到服务器中
- 需要注意的是，m3u8 格式的文件无法像 mp4 一样通过 相对/绝对 路径进行访问
- 必须将其放置在某个服务器中，然后通过链接进行访问
- 而且需要再次强调的是，video.m3u8 和 video0.ts 两个文件必须放置在同一个目录中
- 具体是放置在 Nginx ，还是 Tomcat 这个随意，毕竟我们的静态网站要部署，实际上也需要依托服务器
- 可以将视频文件放置于网站相同的服务器中，只需要指定 网址 + 目录 即可
下载视频播放器 Video.js
- 前往 Getting Started with Video.js 可获取视频插件的 CDN 地址，或下载地址
- 推荐使用 CDN 地址，因为方便快捷
在项目中引入 Video.js 的 CSS/JS 文件
- 以下代码引入的是在线文件
...
<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 标签
- 可以看到以下代码中的视频文件是一个网址为前缀的链接
- 如果是本地调试的话，也可能是
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
- 具体参数如何使用，可以参考 Tutorial: options | Video.js Documentation
<script>
var myVideo = videojs('welcomeVideo', {
loop: true,
controls: false,
preload: 'auto',
autoplay: true
})
</script>
