<template>
<video id="singleVideo" preload="none" class="video-js vjs-default-skin" ></video>
</template>
<script>
import 'video.js/dist/video-js.css'
import videojs from 'video.js';
import 'videojs-contrib-hls'
export default {
data() {
return {
player: null,
}
},
mounted() {
this.init()
},
methods: {
init() {
//使用
let singlePlayer = videojs("singleVideo", {
autoplay: true,//自动播放
controls: true,//控件显示
width: "440",//视频框宽度
height: "264",//视频框高度
});
let res ="http://61.175.121.73:83/pag/10.13.7.2/7302/33052182001320012936/0/MAIN/TCP/live.m3u8";
if (res) {
singlePlayer.src({ src: res, type: "application/x-mpegURL" });
singlePlayer.play();
}
}
},
// 离开页面销毁视频播放器
beforeDestroy() {
if (this.player != null) {
this.player.dispose() // dispose()会直接删除Dom元素
}
}
}
</script>
<style scoped>
.video{
width: 450px;
height: 257px;
background: black;
margin-left: 14px;
margin-top: 11px;
}
</style>
vue播放器播放名.m3u8视频
最新推荐文章于 2024-08-04 21:39:31 发布