You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<template>
|
|
<video-player
|
|
v-if="showVideo"
|
|
ref="video-player"
|
|
class="vjs-custom-skin"
|
|
:options="playerOptions"
|
|
@pause="onPlayerPause"
|
|
@playing="onPlayerPlaying"
|
|
@timeupdate="onPlayerTimeupdate"
|
|
@ended="onPlayerEnded"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import 'vue-video-player/src/custom-theme.css'
|
|
import { videoPlayer } from 'vue-video-player'
|
|
|
|
export default {
|
|
name: 'VideoPlayer',
|
|
props: {
|
|
src: {
|
|
type: String,
|
|
// default: 'http://cctvalih5ca.v.myalicdn.com/live/cctv6_1/index.m3u8',
|
|
required: true
|
|
}
|
|
},
|
|
components: {
|
|
videoPlayer
|
|
},
|
|
data() {
|
|
return {
|
|
showVideo: true,
|
|
isPlay: false, // 是否正在播放
|
|
playerOptions: {
|
|
sources: [{
|
|
type: 'application/x-mpegURL',
|
|
withCredentials: false,
|
|
src: this.src
|
|
}],
|
|
height: '100%',
|
|
language: 'zh-CN',
|
|
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
|
techOrder: ['html5'],
|
|
flash: { hls: { withCredentials: false }},
|
|
html5: { hls: { withCredentials: false }},
|
|
autoplay: true, // 自动播放
|
|
muted: true, // 默认情况下将会消除任何音频。
|
|
controls: true,
|
|
notSupportedMessage: '不支持的视频格式',
|
|
controlBar: {
|
|
timeDivider: false, // 当前时间和持续时间的分隔符
|
|
durationDisplay: false, // 显示持续时间
|
|
remainingTimeDisplay: false, // 是否显示剩余时间功能
|
|
fullscreenToggle: true // 是否显示全屏按钮
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(()=> {
|
|
const videoRef = this.$refs['video-player'];
|
|
// videoRef.player.play();
|
|
console.log(videoRef);
|
|
})
|
|
},
|
|
methods: {
|
|
// 暂停回调
|
|
onPlayerPause() {
|
|
this.isPlay && this.$emit('showModel');
|
|
// this.isPlay = false;
|
|
},
|
|
// 已开始播放回调
|
|
onPlayerPlaying(...args) {
|
|
this.isPlay = true;
|
|
},
|
|
// 视频播完回调
|
|
onPlayerEnded($event) {
|
|
this.isPlay = false;
|
|
},
|
|
// 播放
|
|
onPlayerTimeupdate($event) {
|
|
const bufferedEnd = $event.bufferedEnd();
|
|
const currentTime = $event.currentTime();
|
|
// 延迟时间
|
|
const differTime = bufferedEnd - currentTime
|
|
// 超过延迟重新加载
|
|
if(differTime > 60) {
|
|
this.showVideo = false;
|
|
this.$nextTick(() => {
|
|
this.showVideo = true;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.vjs-custom-skin /deep/{
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
.video-player, .video-js {
|
|
height: 100% !important;
|
|
}
|
|
// 屏蔽视频操作栏
|
|
.vjs-control-bar {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|