<template>
|
<div>
|
<div>
|
正在播放: <span> {{defalutTitle}} </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>
|
<!-- v-if="playHistory.length>1" -->
|
<a-collapse-panel key="playList" header="播放记录">
|
<div class="playItem" v-for="(item,index) in playHistory">
|
{{item.title}}
|
<a-icon v-if="index==0" type="youtube" class="playIcon" />
|
</div>
|
</a-collapse-panel>
|
</a-collapse>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Hls from 'hls.js'
|
import DPlayer from 'dplayer'
|
|
export default {
|
data() {
|
return {
|
defalutImg: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
|
defalutTitle: "",
|
dp: null,
|
video: {},
|
firstLoad: true,
|
volumeInit: 0.1,
|
isPlaying: false,
|
playHistory: [],
|
playHistoryId: {},
|
}
|
},
|
mounted() {
|
//弹窗初始化后先不加载视频,等待手动播放
|
this.init();
|
},
|
methods: {
|
changeVolume(value) {
|
this.dp.volume(value, true, false);
|
},
|
changePlay(videoData) {
|
console.log(111);
|
this.defalutTitle = videoData.title;
|
if (this.playHistoryId[videoData.id] != null) {
|
this.playHistory = this.playHistory.filter(item => item.id == videoData.id);
|
this.playHistory.unshift(videoData)
|
return
|
} else {
|
this.playHistoryId[videoData.id] = videoData;
|
this.playHistory.unshift(videoData)
|
}
|
|
// this.video = {
|
// img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
|
// url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
|
// type: "normal"
|
// }
|
|
this.loadVideo(videoData)
|
|
// 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
|
// 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(); // 去掉作者信息
|
},
|
loadVideo(videoInfo) {
|
|
},
|
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,
|
// type: videoInfo.type,
|
customType: {
|
customHls: function(video, player) {
|
const hls = new Hls()
|
hls.loadSource(video.src)
|
hls.attachMedia(video)
|
}
|
}
|
}
|
})
|
},
|
}
|
|
}
|
</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.85);
|
}
|
|
.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: flex;
|
}
|
|
.myVideo /deep/ .dplayer-video {
|
height: auto;
|
// border-radius: 16px;
|
}
|
|
.myVideo /deep/ .dplayer {
|
border-radius: 5px;
|
}
|
|
.myVideo /deep/ video {
|
object-fit: cover;
|
}
|
</style>
|
