前端vue播放m3u8、flv、mp4视频的方法
前端VUE播放m3u8、FLV、mp4视频的解决方案
·
1、播放m3u8格式视频
- 安装依赖
npm install video.js --save // 视频播放器插件
npm install videojs-contrib-hls --save // 播放hls流插件 - 页面引入插件
import videojs from "video.js";
import "video.js/dist/video-js.css";
- 页面中的使用
<template>
<div class="myVideo">
<video id="videoPlayer" class="video-js vjs-default-skin" controls playsinline autoplay="autoplay" width="500px">
<source :src="attachmentLink" type="application/x-mpegURL" />
</video>
</div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
data() {
return {
dp: null,
options: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
aspectRatio:'16:9',
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
autoplay: false, // 设置自动播放
muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
preload: "auto", // 预加载
controls: true, // 显示播放的控件
},
attachmentLink: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8",
};
},
mounted() {
// 使用 $nextTick 解决vedio报错 The element or ID supplied is not valid. (videojs)
this.$nextTick(() => {
this.loadVideo();
});
},
methods: {
loadVideo() {
this.dp = videojs("videoPlayer", this.options);
// 也可以使用以下方式给vedio设置 src
// this.db.src([
// {
// src: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 地址
// type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
// },
// ]);
},
// 销毁
beforeDestroy() {
if (this.dp) {
this.dp.dispose(); // dispose()会直接删除Dom元素
}
},
},
};
</script>
<style lang="less" scoped>
.video-box {
width: 100%;
max-width: 500px;
max-height: 500px;
}
// 暂停播放按钮居中
::v-deep .video-js .vjs-big-play-button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
2、flv格式的方案来播放视频
简介：flv.js是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。
开源地址: https://github.com/Bilibili/flv.js/
- 安装依赖
npm install --save flv.js - 页面引入插件
import flvjs from 'flv.js'
- 页面中的使用
<template>
<div class="preview">
<div class="videoArea">
<video id="videoElement" crossOrigin="anonymous" controls autoplay muted width="100%" height="800px"></video>
</div>
</div>
</template>
<script>
import flvjs from 'flv.js'
export default {
data() {
return {
isPlay: false,
player: null,
timerId:null
};
},
methods: {
// 设置视频配置(注意：createVideo应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)
createVideo() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
this.player= flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv' // 自己的flv视频流
enableWorker: false, //启用 Web Worker 进程来加速视频的解码和处理过程
stashInitialSize: 32 * 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
deferLoadAfterSourceOpen: false,
},{
cors: true, // 是否跨域
// enableWorker: true, // 是否多线程工作
enableStashBuffer: false, // 是否启用缓存
// stashInitialSize: 128, // 缓存大小(kb) 默认384kb
autoCleanupSourceBuffer: true, // 是否自动清理缓存
});
this.player.attachMediaElement(videoElement);//挂载元素
this.player.load();//加载流
this.player.play();//播放流
// 追帧
if (this.timerId !== null) {
clearInterval(this.timerId);
}
this.timerId = setInterval(() => {
if (videoElement.buffered.length > 0) {
const end = videoElement.buffered.end(0); // 视频结尾时间
const current = videoElement.currentTime; // 视频当前时间
const diff = end - current; // 相差时间
console.log(diff);
const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
let playbackRate = 1.0; // 播放速度
if (diff > diffCritical) {
console.log("相差超过4秒，进行跳转");
videoElement.currentTime = end - 1.5;
playbackRate = Math.max(1, Math.min(diffCritical, 16));
} else if (diff > diffSpeedUp) {
console.log("相差超过1秒，进行加速");
playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
}
videoElement.playbackRate = playbackRate;
if (videoElement.paused) {
this.videoForm.player.play();
}
}
}, 1000);
}
// 报错重连
this.player.on(flvjs.Events.ERROR, (err, errdet) => {
// 参数 err 是一级异常，errdet 是二级异常
if (err == flvjs.ErrorTypes.MEDIA_ERROR) {
console.log('媒体错误')
if(errdet == flvjs.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED) {
console.log('媒体格式不支持')
}
}
if (err == flvjs.ErrorTypes.NETWORK_ERROR) {
console.log('网络错误')
if(errdet == flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {
console.log('http状态码异常')
}
}
if(err == flvjs.ErrorTypes.OTHER_ERROR) {
console.log('其他异常：', errdet)
}
if (this.player) {
this.destoryVideo()
this.createVideo()
}
})
},
destoryVideo(){
if (this.player) {
this.player.pause();// 暂停播放数据流
this.player.unload();// 取消数据流加载
this.player.detachMediaElement();// 将播放实例从节点中取出
this.player.destroy(); // 销毁播放实例
this.player= null;
}
}
},
mounted() {
this.$nextTick(() => {
this.createVideo()
})
},
beforeDestroy() {
this.destoryVideo()
},
};
</script>
<style lang="scss" scoped>
</style>
3、mp4格式的方案来播放视频
<html>
<head>
<title>camera</title>
<script type="text/javascript">
function play() {
var video = document.getElementById("video");
video.play();
}
</script>
</head>
<body>
<video
id="video"
width="640"
height="360"
poster="/video/cover.png"// 视频封面
controls //显示标准的 HTML5 视频/音频播放器控制条、控制按钮。
autoplay //让文件自动播放。
loop //让文件循环播放。
preload="auto" //属性是用来缓存大体积文件的。它有三个可选值："none" 不缓存、"auto" 缓存、"metadata" 只缓存文件元信息
playsinline="true" // IOS微信浏览器支持小窗内播放
webkit-playsinline="true" // 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
x5-video-player-type="h5" // 启用H5播放器，是wechat安卓版特性
x5-video-player-fullscreen="true" // 全屏设置，设置为 true 是防止横屏
x5-video-orientation="portraint" // 播放器屏幕的方向，landscape横屏，portraint竖屏，默认值为竖屏。、、
οnclick="play()" >
<!-- 标签是为了能够兼容各种浏览器对不同媒体类型的支持，我们可以用多个<source></source>元素来提供多个不同的媒体类型。支持mp4格式视频流的浏览器可以播放mp4文件，如果不支持，可以播放Ogg文件。 -->
<!-- codecs=dirac, speex - 是用来指定播放使用的解码器(codecs); 这样就可以更精确的让浏览器如何播放提供的视频。 -->
<source src="/video/text.mp4" type="video/mp4">
<source src="/video/text.ogg" type="video/ogg; codecs=dirac, speex">
<div class="fallback"> <p>You must have an HTML5 capable browser.</p> </div>
</video>
</body>
</html>
前往低代码交流专区
更多推荐
10
0- 0
已为社区贡献3条内容
所有评论(0)