| 使用videojs播放 .m3u8格式文件 | 您所在的位置：网站首页 › 什么软件能打开m3u8格式的视频文件呢 › 使用videojs播放 .m3u8格式文件 |
|
本文已参与「新人创作礼」活动， 一起开启掘金创作之路。 最近项目中有做视频播放，但是由于视频量大，所以后端处理用的是把视频切片放在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代码： // 这个video加班不加都行，但是不加的话在m3u8播放之前，这里是空的，所以我加了个video占位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 = ``; 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执行这个方法，是点击列表才播放的，所以这里用的是变量，这里可以自己根据实际需要修改 }) };希望本文对您有所帮助！ |
| CopyRight 2018-2019 实验室设备网 版权所有 |