先引入vediojs插件
m3u8 类型 设置 type="application/x-mpegURL"
<template>
<div
class="box"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<video :id="videoPlayer" class="video-js vjs-default-skin" controls :ref="videoPlayer">
<source :src="videoUrl" type="application/x-mpegURL" />
</video>
</div>
</template>
<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
props: {
videoUrl: {},
videoPlayer: {}
},
data() {
return {
loading: false,
player: null
}
},
methods: {
videoLoad() {
this.loading = true
var video = document.getElementById(this.videoPlayer)
var that = this
video.addEventListener('canplay', function() {
that.loading = false
})
}
},
watch: {
videoUrl(val) {
if (val) {
this.videoLoad()
}
}
},
mounted() {
// 视频初始化
this.player = videojs(this.$refs[this.videoPlayer], {
autoplay: false,
bigPlayButton: false,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
controlBar: false
})
this.player.play()
}
}
</script>
<style lang="less" scoped>
.box {
width: 100%;
height: 100%;
.video-js {
width: 100%;
height: 100%;
// background-color: #fff;
}
}
</style>
mp4 正常引入
<template>
<div
class="wraps video-js"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<video
:src="url"
:id="id"
width="100%"
height="100%"
muted
autoplay
controlslist="nodownload"
disablePictureInPicture
></video>
</div>
</template>
<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
props: {
url: {},
id: {}
},
data() {
return {
tableData: [{}, {}],
loading: false
}
},
watch: {
url(val) {
if (val) {
this.videoLoad()
}
}
},
methods: {
videoLoad() {
this.loading = true
var video = document.getElementById(this.id)
var that = this
video.addEventListener('canplay', function() {
that.loading = false
})
}
}
}
</script>
<style lang="less" scoped>
.wraps {
width: 100%;
height: 100%;
}
// video::-webkit-media-controls {
// display: none !important;
// }
// //播放按钮
// video::-webkit-media-controls-play-button {
// display: none;
// }
//进度条
video::-webkit-media-controls-timeline {
display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display {
display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
display: none;
}
</style>