mp4转m3u8 格式视频
写在前面的话
为什么要播放 m3u8 格式的视频
1.对于一个小视频来说，理论上直接播放 mp4 的本地文件即可
2.但如果将网站部署到云上，其他用户通过网址访问时，想要看到这个视频，就需要先完整的下载格式为 mp4 的视频文件
3.当视频文件下载完成后，网站才可以播放该视频，这就对于用户体验是极大的下降
正规项目一般如何处理
1.对于一个大型项目来说，一般会视频会使用流媒体播放器来播放视频
2.例如阿里云的流媒体播放器，则是将所有视频存储到阿里云的流媒体服务器
3.网页端通过阿里云为每个视频提供的 VID 来访问视频
4.这首先需要在网页端继承一个流媒体播放器，同时还需要后端对接阿里云服务端，来获取视频的鉴权地址
5.带来的好处是可以保证视频资源相对安全，降低被人直接盗取的可能性
6.缺点则是对接起来过于繁琐，在小项目上显得得不偿失
7.具体对接步骤可参考Java + jQuery 实现阿里云点播
小项目可以如何快速操作
1.可以使用 FFmpeg 将普通的 mp4 格式的视频文件转换为 m3u8 格式
2.再使用 Video.js: 播放转码后的视频
参考网址
实现步骤
下载视频转码工具 FFmpeg
前往FFmpeg Download下载对应版本的工具
该工具不需要安装，是通过命令行运行的
win10 - 64位
链接：https://pan.baidu.com/s/1c9-YSm7e0kgeUl4u0vYYeg
提取码：cryn
需要注意的一点：如果是 Mac 用户，可能会尝试使用 Homebrew 安装，这里需要说的是 “可以，但是没必要”
因为如果通过 Homebrew 安装，会自动安装一堆依赖文件，而且最后工具可能还安装失败
关键是该工具的使用不需要做任何系统配置，直接前往执行文件目录执行对应命令即可
所以完全没必要通过 Homebrew 安装到系统中
使用 FFmpeg 对视频进行转码
1.下载成功并解压后的目录入下图
2.打开终端，进入到上图文件中的目录
3. 为了操作简单，将待转码的视频放在D:\video（D盘里新建一个video文件夹）
4. 在终端执行如下命令( 二选一 )
第一种转换命令
#转mp4为ts
ffmpeg -y -i D:\video\video.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb D:\videos\a.ts
第二种转换命令
#一次性完成转换和切片，切片时长为60秒
ffmpeg -i D:\video\video.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls D:\videos\zxcu.m3u8
5.这个时候视频转换就完成了
需要注意的是上述生成的两类文件（m3u8和ts）需要保存在一起
将转码后的视频文件放置到服务器中
1.需要注意的是，m3u8 格式的文件无法像 mp4 一样通过相对/绝对路径进行访问
2.必须将其放置在某个服务器中，然后通过链接进行访问
3.而且需要再次强调的是，video.m3u8和video0.ts两个文件必须放置在同一个目录中
4.具体是放置在 Nginx ，还是 Tomcat 这个随意，毕竟我们的静态网站要部署，实际上也需要依托服务器
5.可以将视频文件放置于网站相同的服务器中，只需要指定网址 + 目录即可
6. 如果使用vue来播放m3u8视频，会产生跨域（请用Nginx 代理跨域）
前端video标签播放m3u8格式视频
以下是全部代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频</title>
<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" type="text/javascript"></script>
<!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>
<body>
<style>
.video-js .vjs-tech {position: relative !important;}
</style>
<div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
<source id="source" src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"></source>
</video>
</div>
<div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
</body>
<script>
// videojs 简单使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
myVideo.play()
var changeVideo = function (vdoSrc) {
if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
})
} else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
var src = 'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8';
document.querySelector('.qiehuan').addEventListener('click', function () {
changeVideo(src);
})
</script>
前端Vue插件播放m3u8格式视频
参考文档： https://github.com/langyuxiansheng/vue-aliplayer-v2
参考文献
https://www.cnblogs.com/li1992/p/11316008.html
https://www.jianshu.com/p/eb5cd63647c3
https://blog.csdn.net/qq_30282133/article/details/81566273
前端video标签播放m3u8格式视频
