<template>
|
<div>
|
<div>
|
正在播放: <span> {{playingVideoData.title}} </span>
|
</div>
|
<div class="myVideo">
|
<div id="videoPlay" ref="myVdeoPlay"></div>
|
</div>
|
<div style="border-radius: 0 0 4px 4px;">
|
<div style="padding: 10px 0px;">
|
音量 :
|
<a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
|
</div>
|
<a-collapse activeKey="playHistory">
|
<a-collapse-panel key="playHistory" header="播放记录">
|
<div v-for="(item,index) in playHistory">
|
<div v-if="index==0">
|
<a-tooltip placement="bottomRight" title="播放/暂停">
|
<div @click="togglePlay" class="playItem">
|
{{item.title}}
|
<a-icon type="youtube" class="playIcon" />
|
</div>
|
</a-tooltip>
|
</div>
|
<div v-else>
|
<div @click="swichPlay(item.id)" class="playItem">
|
<a-tooltip placement="bottomRight" title="切换播放">
|
<div>
|
{{item.title}}
|
</div>
|
</a-tooltip>
|
</div>
|
</div>
|
</div>
|
</a-collapse-panel>
|
</a-collapse>
|
</div>
|
</div>
|
</template>
|
|
|
<script>
|
import Hls from 'hls.js'
|
import DPlayer from 'dplayer'
|
|
export default {
|
data() {
|
return {
|
dp: null,
|
playHistory: [],
|
playRecordIds: [],
|
volumeInit: 0.1,
|
isPlaying: false,
|
swichLock: false,
|
playingVideoData: {
|
img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
|
url: "",
|
type: "normal",
|
title: "",
|
id: ""
|
},
|
|
}
|
},
|
mounted() {
|
//弹窗初始化后先不加载视频,等待手动播放
|
this.init();
|
var _this = this;
|
|
//调整音量
|
_this.$message.success("加载完成,请注意音量是否合适..")
|
|
this.dp.volume(this.volumeInit, true, false);
|
|
this.dp.on('pause', function() {
|
_this.$message.info("停止播放")
|
this.isPlaying = false;
|
});
|
|
this.dp.on('play', function() {
|
_this.$message.info("开始播放..")
|
this.isPlaying = true;
|
});
|
},
|
methods: {
|
togglePlay() {
|
this.dp.toggle();
|
this.isPlaying = !this.isPlaying;
|
},
|
changeVolume(value) {
|
this.dp.volume(value, true, false);
|
},
|
//切换视频源
|
swichPlay(videoId) {
|
if (this.swichLock) {
|
this.$message.info("切换太快啦,缓一缓..", 5)
|
return
|
}
|
|
if (videoId == this.playingVideoData.id) {
|
this.$message.info("同一个视频..", 1)
|
return
|
}
|
let tempData = this.playHistory.filter(item => item.id == videoId)[0]
|
|
this.$message.info("切换视频源..", 1)
|
this.swichLock = !this.swichLock;
|
|
this.startPlay(tempData)
|
|
setTimeout(() => {
|
this.swichLock = !this.swichLock;
|
}, 5000);
|
|
//通知父组件更换评论信息
|
this.$emit("swichPlay", tempData)
|
|
},
|
//调整播放记录
|
adjustOrder(videoData) {
|
if (this.playRecordIds.findIndex(id => id == videoData.id) == -1) {
|
//新纪录
|
this.playRecordIds.push(videoData.id)
|
this.playHistory.unshift(videoData)
|
} else {
|
//旧记录
|
this.playHistory = this.playHistory.filter(item => item.id != videoData.id);
|
this.playHistory.unshift(videoData)
|
}
|
},
|
//加载播放
|
startPlay(videoData) {
|
|
this.adjustOrder(videoData)
|
|
this.playingVideoData = videoData
|
|
this.isPlaying = false;
|
this.dp.switchVideo(this.playingVideoData, null)
|
|
|
},
|
//播放器初始化
|
init() {
|
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], //可选的播放速度，可自定义
|
contextmenu: [
|
//右键菜单
|
{
|
text: "b站",
|
link: "https://www.bilibili.com"
|
},
|
|
],
|
|
highlight: [
|
//进度条上的自定义时间标记
|
// 进度条时间点高亮
|
// {
|
// text: "10M",
|
// time: 60
|
// },
|
],
|
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()
|
hls.loadSource(video.src)
|
hls.attachMedia(video)
|
}
|
}
|
}
|
})
|
|
// 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
|
// 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 lang="less" scoped>
|
.playItem {
|
border: 1px solid #d9d9d9;
|
padding: 10px;
|
border-radius: 5px;
|
margin: 10px;
|
transition: all .5s;
|
position: relative;
|
}
|
|
.playItem:hover {
|
//transform: scale(1.1) translate3d(0, 0, 0);
|
}
|
|
.playItem:active {
|
transform: scale(0.75) translate3d(0, 0, 0);
|
}
|
|
|
.playIcon {
|
transform: scale(1.3);
|
position: absolute;
|
top: 35%;
|
right: 10px;
|
}
|
|
.myVideo {
|
position: relative;
|
width: 300px;
|
height: 180px;
|
background-color: #565656;
|
border-radius: 10px;
|
margin: 20px 0px;
|
display: grid;
|
}
|
|
|
.myVideo /deep/ .dplayer {
|
border-radius: 5px;
|
}
|
|
|
</style>
|
