blog/blog-facade.git

inleft

2022-08-12 0dd41bd8cee430d3a948b89c664cb511c400993c

commit \| author \| age
105729	1	<template>
I	2	<div>
0dd41b	3	<div>
I	4	正在播放: <span> {{defalutTitle}} </span>
	5	</div>
105729	6	<div class="myVideo">
0dd41b	7	<div id="videoPlay" ref="myVdeoPlay"></div>
I	8	</div>
	9	<div style="border-radius: 0 0 4px 4px;">
	10	<div style="padding: 10px 0px;">
	11	音量 :
	12	<a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
105729	13	</div>
0dd41b	14	<a-collapse>
I	15	<!-- v-if="playHistory.length>1" -->
	16	<a-collapse-panel key="playList" header="播放记录">
	17	<div class="playItem" v-for="(item,index) in playHistory">
	18	{{item.title}}
	19	<a-icon v-if="index==0" type="youtube" class="playIcon" />
	20	</div>
	21	</a-collapse-panel>
	22	</a-collapse>
105729	23	</div>
I	24	</div>
	25	</template>
	26
	27	<script>
	28	import Hls from 'hls.js'
	29	import DPlayer from 'dplayer'
	30
	31	export default {
	32	data() {
	33	return {
0dd41b	34	defalutImg: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
I	35	defalutTitle: "",
105729	36	dp: null,
I	37	video: {},
0dd41b	38	firstLoad: true,
I	39	volumeInit: 0.1,
	40	isPlaying: false,
	41	playHistory: [],
	42	playHistoryId: {},
105729	43	}
I	44	},
0dd41b	45	mounted() {
I	46	//弹窗初始化后先不加载视频,等待手动播放
	47	this.init();
	48	},
105729	49	methods: {
0dd41b	50	changeVolume(value) {
I	51	this.dp.volume(value, true, false);
af029b	52	},
I	53	changePlay(videoData) {
0dd41b	54	console.log(111);
I	55	this.defalutTitle = videoData.title;
	56	if (this.playHistoryId[videoData.id] != null) {
	57	this.playHistory = this.playHistory.filter(item => item.id == videoData.id);
	58	this.playHistory.unshift(videoData)
	59	return
	60	} else {
	61	this.playHistoryId[videoData.id] = videoData;
	62	this.playHistory.unshift(videoData)
	63	}
	64
af029b	65	// this.video = {
I	66	// img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
	67	// url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
	68	// type: "normal"
	69	// }
	70
	71	this.loadVideo(videoData)
	72
	73	// 以下为隐藏一些作者的信息和视频播放源如不需要可删除
	74	// document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
0dd41b	75
I	76
	77	// document.querySelector(".dplayer-mask").remove();
	78	// document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
	79	// let length = document.querySelectorAll(".dplayer-menu-item").length;
	80	// document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
	81	// document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
105729	82	},
I	83	loadVideo(videoInfo) {
0dd41b	84
I	85	},
	86	init() {
105729	87	this.dp = new DPlayer({
I	88	element: document.getElementById("videoPlay"),
	89	//logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
0dd41b	90	hotkey: true, // 是否支持热键，调节音量，播放，暂停等
105729	91	mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户
I	92	theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
	93	loop: false, // 是否自动循环
	94	lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
	95	// screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
0dd41b	96	preload: "metadata", // 自动预加载 'none', 'metadata', 'auto'
I	97	volume: this.volumeInit, // 初始化音量
105729	98	playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
I	99	contextmenu: [
	100	//右键菜单
	101	{
	102	text: "b站",
	103	link: "https://www.bilibili.com"
	104	},
0dd41b	105
105729	106	],
0dd41b	107
105729	108	highlight: [
I	109	//进度条上的自定义时间标记
	110	// 进度条时间点高亮
0dd41b	111	// {
I	112	// text: "10M",
	113	// time: 60
	114	// },
105729	115	],
I	116	video: {
0dd41b	117	pic: this.defalutImg, // 视频封面
I	118	// url: videoInfo.url,
	119	// type: videoInfo.type,
105729	120	customType: {
I	121	customHls: function(video, player) {
	122	const hls = new Hls()
	123	hls.loadSource(video.src)
	124	hls.attachMedia(video)
	125	}
	126	}
	127	}
	128	})
0dd41b	129	},
105729	130	}
af029b	131
105729	132	}
I	133	</script>
	134	<style lang="less" scoped>
0dd41b	135	.playItem {
I	136	border: 1px solid #d9d9d9;
	137	padding: 10px;
	138	border-radius: 5px;
	139	margin: 10px;
	140	transition: all .5s;
	141	position: relative;
	142	}
	143
	144	.playItem:hover {
	145	transform: scale(1.1) translate3d(0, 0, 0);
	146	}
	147
	148	.playItem:active {
	149	transform: scale(0.85);
	150	}
	151
	152	.playIcon {
	153	transform: scale(1.3);
	154	position: absolute;
	155	top: 35%;
	156	right: 10px;
	157	}
	158
105729	159	.myVideo {
I	160	position: relative;
	161	width: 300px;
	162	height: 180px;
	163	background-color: #565656;
	164	border-radius: 10px;
0dd41b	165	margin: 20px 0px;
105729	166	display: flex;
I	167	}
	168
0dd41b	169	.myVideo /deep/ .dplayer-video {
I	170	height: auto;
	171	// border-radius: 16px;
105729	172	}
I	173
0dd41b	174	.myVideo /deep/ .dplayer {
I	175	border-radius: 5px;
105729	176	}
I	177
0dd41b	178	.myVideo /deep/ video {
I	179	object-fit: cover;
105729	180	}
I	181	</style>