在vue3中使用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代码:

<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的idvideojs(`videoPlayer-${n.value}`, options, function onPlayerReady() {});n.value += 1;onMounted(() => {getVideo(url);  // 这里的参数url为一个变量或者固定值，因为我项目中不是在onMounted执行这个方法，是点击列表才播放的，所以这里用的是变量，这里可以自己根据实际需要修改})};

希望本文对您有所帮助！

在vue3中使用videojs播放 .m3u8格式文件相关推荐

vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
html5查看swf视频格式,如何使用Videojs播放.swf格式文件？
Video.js videojs.options.flash.swf = './video-js.swf'; // flash路径 https://imgcache.qq.com/tence...0& ...
使用videojs播放m3u8视频
vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库,可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频.流媒体传输协议(hls) ...
html中 videojs 播放m3u8文件【方式一】
1. 播放效果 2. 实现代码如果你直接打开html播放不了,请更换src,因为http://live3.jogyhg.com/live/jr7owi3l160igq0_03c0e113e94d32 ...
androidTV在html中集成饺子播放器并播放m3u8格式视频
饺子播放器的默认引擎是MediaPlayer,只能播放一些常见格式的视频.想要播放m3u8格式,需要切换引擎 jzvdStd.setUp("http://youku.cdn-iqiyi.co ...
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
videoJS 播放 u3m8 格式视频Demo
videoJS 播放 u3m8 格式视频Demo VideoJs 官网地址 <!DOCTYPE html> <html lang="zh-CN"><h ...
h5播放m3u8格式视频流
h5播m3u8格式视频流在微信公众号的某个页面接入监控视频(.m3u8格式的),需求相对简单,能够播放就可以,之前没有处理过mp4格式外的视频文件,记录一下: ###1.使用video.js来播放 ...
video插件播放m3u8格式视频(存原生)
video插件播放m3u8格式视频(存原生) 这里使用原生的javascript实现m3u8格式视频播放. 使用了包括video.min.js库和HLS插件. 1-基础使用 <!DOCTYPE ...

在vue3中使用videojs播放 .m3u8格式文件

在vue3中使用videojs播放 .m3u8格式文件相关推荐

最新文章

热门文章