<template>
|
<div v-if="closePlayer" style="display: flex; justify-content: center;align-items: center;height: 180px;">
|
无效视频资源
|
</div>
|
<div v-else id="videoPlay" ref="myVdeoPlay" style="position: absolute; top: 0;left: 0;width: 100%;height: 100%;">
|
</div>
|
</template>
|
|
<script>
|
import Hls from 'hls.js'
|
import DPlayer from 'dplayer'
|
export default {
|
components: {},
|
mounted() {
|
var url = this.$route.query.url;
|
if (url == null || url == '') {
|
this.closePlayer = true;
|
return
|
}
|
|
let _this = this;
|
|
this.videoData.url = 'http://t.inleft.com/blog/mp4/' + url
|
|
|
//弹窗初始化后先不加载视频,等待手动播放
|
this.init();
|
|
this.dp.volume(0, true, false);
|
|
this.dp.on('pause', function() {
|
_this.$message.info("停止播放")
|
});
|
|
this.dp.on('play', function() {
|
_this.$message.info("开始播放..")
|
});
|
|
this.dp.on('error', function() {
|
_this.disabledPointer = true
|
});
|
|
_this.$nextTick(function() {
|
_this.startPlay(this.videoData)
|
})
|
},
|
data() {
|
return {
|
dp: null,
|
hls: null,
|
videoData: {},
|
closePlayer: false
|
}
|
},
|
methods: {
|
//加载播放
|
startPlay(videoData) {
|
if (videoData == null || videoData == undefined) {
|
this.$message.error("无效资源..")
|
return
|
}
|
|
if (videoData.url != null && videoData.url != "" && videoData.url.endsWith("m3u8")) {
|
videoData.type = "customHls";
|
} else {
|
videoData.type = "normal";
|
}
|
|
if (videoData.pic === null || videoData.pic == '') {
|
videoData.pic = myConstant.defaultBGVideo;
|
}
|
|
//重要!!防止hls类型视频在切换后不停在后台缓存
|
if (this.hls != null) {
|
this.hls.destroy();
|
}
|
|
this.disabledPointer = false;
|
this.isPlaying = false;
|
|
//重要!!防止hls类型视频在切换后不停在后台缓存
|
if (videoData.type == "customHls") {
|
this.hls = new Hls();
|
|
}
|
|
this.dp.switchVideo(videoData)
|
|
},
|
//播放器初始化
|
init() {
|
var _this = this;
|
this.dp = new DPlayer({
|
element: document.getElementById("videoPlay"),
|
//logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
|
hotkey: true, // 是否支持热键，调节音量，播放，暂停等
|
mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户
|
theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
|
loop: false, // 是否自动循环
|
lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
|
// screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
|
preload: "metadata", // 自动预加载 'none', 'metadata', 'auto'
|
volume: _this.volumeInit, // 初始化音量
|
playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
|
video: {
|
pic: _this.defalutImg, // 视频封面
|
// url: videoInfo.url,
|
//url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
|
type: "normal",
|
customType: {
|
customHls: function(video, player) {
|
//const hls = new Hls()
|
if (_this.hls != null) {
|
_this.hls.loadSource(video.src)
|
_this.hls.attachMedia(video)
|
|
// 监听Hls.Events.ERROR事件，
|
// DNS解析、下载超时，都会触发manifestLoadError错误
|
_this.hls.on(Hls.Events.ERROR, function(eventName, data) {
|
// 埋点上报，可以追踪data.details
|
// track()
|
_this.$message.error("hls加载异常", 5)
|
console.log(eventName);
|
console.log(data);
|
})
|
}
|
|
}
|
}
|
}
|
})
|
|
// 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
|
document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
|
|
// document.querySelector(".dplayer-mask").remove();
|
// document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
|
// let length = document.querySelectorAll(".dplayer-menu-item").length;
|
// document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
|
// document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
|
},
|
}
|
|
}
|
</script>
|
|
<style>
|
</style>
|
