最近项目中有做视频播放,但是由于视频量大,所以后端处理用的是把视频切片放在m3u8里给前端,然后前端自己播放。
什么是M3U8文件呢?M3U8文件是指UTF-8编码格式的M3U文件。M3U8文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。
播放之前可以自己用ffmpeg处理视频为m3u8,也可以找后端要现成的。用ffmpeg处理视频为m3u8可以参考这篇文章:ffmpeg在windows的安装、合并、切片、.m4s、.m3u8处理
VLC media player这个播放器也可以直接播放M3U8文件。
但是普通的video标签是不支持.m3u8格式文件直接播放的,网上查了一下,就用了videojs: videojs官网
使用方法:(因为我是在vue3中用的,所以引入js文件那些就不说了)
npm install video.js --save // 视频播放器插件
网上也有好多说videojs-contrib-hls,但是我没用这个也正常播放了,所以就没加,需要的童鞋也可以自己加上:
npm install videojs-contrib-hls --save // 播放hls流插件
别忘了在main.ts中引入videojs样式文件:
import 'video.js/dist/video-js.css' //videojs样式
复制代码
在要使用videojs的组件中引入videojs:
import videojs from 'video.js'
// 如果安装了videojs-contrib-hls也记得引入
复制代码
如果确定安装成功之后引入videojs还是报错找不到模块,可以在 最外层(package.json同级)加一个shims-vue.d.ts文件,文件内容:
// declare声明宣告, 声明一个ambient module(即:没有内部实现的 module声明)
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
declare module 'video.js';
// xx即你包不能找到声明的包名
html代码:
<div id="videoDiv" class="video-container">
<video autoplay controls src=""></video> // 这个video加班不加都行,但是不加的话在m3u8播放之前,这里是空的,所以我加了个video占位
</div>
js代码:
const n = ref(0); // 因为我这里有很多url也切换,如果用固定的一个id后面会有报错,如果你只有一个视频,这里可以不用n,后面video的id里也不用n来拼
const getVideo = (url?: string) => {
const div: any = document.getElementById('videoDiv');
div.innerHTML = '';
div.innerHTML = `<video id="videoPlayer-${
n.value}" class="video-js" style="width: 50vw; height: 32vw;"></video>`;
const options = {
autoplay: true, // 设置自动播放
controls: true, // 显示播放的控件
// errorDisplay: false,
muted: true,
sources: [
// 如果需要切换视频源,src需要动态设置
{
src: url,
type: 'application/x-mpegURL', // 告诉videojs,这是一个m3u8流
},
],
};
// videojs的第一个参数表示的是,文档中video的id
videojs(`videoPlayer-${
n.value}`, options, function onPlayerReady() {
});
n.value += 1;
onMounted(() => {
getVideo(url); // 这里的参数url为一个变量或者固定值,因为我项目中不是在onMounted执行这个方法,是点击列表才播放的,所以这里用的是变量,这里可以自己根据实际需要修改
})
};
希望本文对您有所帮助!