blog/blog-facade.git

inleft

2022-08-30 271ca6cb0ee2ff0a789bf74d1821e7891a7043bb

commit \| author \| age
105729	1	<template>
I	2	<div>
c6793e	3	<div v-if="!this.$attrs.showTar">
e4f086	4	正在播放: <span> {{playingVideoData.title}} </span>
0dd41b	5	</div>
a23166	6	<div class="myVideo fade" v-bind:class="{disabledPointer:disabledPointer}">
0dd41b	7	<div id="videoPlay" ref="myVdeoPlay"></div>
I	8	</div>
c6793e	9	<div style="border-radius: 0 0 4px 4px;" v-if="!this.$attrs.showTar">
8ec9c5	10
0dd41b	11	<div style="padding: 10px 0px;">
I	12	音量 :
	13	<a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
1cf6d9	14	</div>
I	15	<div style="padding: 10px 0px;">
	16	播放进度 : {{Math.floor(currentTime/60)}}:{{Math.floor(currentTime%60)}} /
	17	{{Math.floor(duration/60)}}:{{Math.floor(duration%60)}}
	18	<a-slider v-model="currentTime" :max="duration" @afterChange="changeTime" />
105729	19	</div>
8ec9c5	20
e4f086	21	<a-collapse activeKey="playHistory">
I	22	<a-collapse-panel key="playHistory" header="播放记录">
	23	<div v-for="(item,index) in playHistory">
	24	<div v-if="index==0">
	25	<a-tooltip placement="bottomRight" title="播放/暂停">
	26	<div @click="togglePlay" class="playItem">
	27	{{item.title}}
1cf6d9	28	<span v-if="!isPlaying " class="myTip">(已暂停)</span>
I	29	<a-icon type="youtube" class="playIcon "
	30	v-bind:class="{ activeElement: isPlaying }" />
e4f086	31	</div>
I	32	</a-tooltip>
	33	</div>
	34	<div v-else>
	35	<div @click="swichPlay(item.id)" class="playItem">
	36	<a-tooltip placement="bottomRight" title="切换播放">
	37	<div>
	38	{{item.title}}
	39	</div>
	40	</a-tooltip>
	41	</div>
	42	</div>
0dd41b	43	</div>
I	44	</a-collapse-panel>
	45	</a-collapse>
105729	46	</div>
I	47	</div>
	48	</template>
e4f086	49
105729	50
I	51	<script>
	52	import Hls from 'hls.js'
	53	import DPlayer from 'dplayer'
1b6f1e	54	import myConstant from "../../config/myConstant.js"
105729	55
I	56	export default {
	57	data() {
	58	return {
a23166	59	disabledPointer: false,
105729	60	dp: null,
1b6f1e	61	hls: null,
e4f086	62	playHistory: [],
I	63	playRecordIds: [],
0dd41b	64	volumeInit: 0.1,
I	65	isPlaying: false,
e4f086	66	swichLock: false,
1cf6d9	67	currentTime: 0,
I	68	duration: 0,
e4f086	69	playingVideoData: {
1b6f1e	70	pic: "",
e4f086	71	url: "",
I	72	type: "normal",
	73	title: "",
	74	id: ""
	75	},
105729	76	}
I	77	},
0dd41b	78	mounted() {
I	79	//弹窗初始化后先不加载视频,等待手动播放
	80	this.init();
e4f086	81	var _this = this;
I	82
	83	//调整音量
a23166	84	//_this.$message.success("模块加载完成,请注意音量是否合适..")
e4f086	85
I	86	this.dp.volume(this.volumeInit, true, false);
	87
	88	this.dp.on('pause', function() {
	89	_this.$message.info("停止播放")
1cf6d9	90	_this.isPlaying = false;
e4f086	91	});
I	92
	93	this.dp.on('play', function() {
	94	_this.$message.info("开始播放..")
1cf6d9	95	_this.isPlaying = true;
I	96	_this.duration = _this.dp.video.duration;
	97	_this.currentTime = _this.dp.video.currentTime;
e4f086	98	});
1cf6d9	99	this.dp.on('timeupdate', function() {
I	100	//_this.$message.info("进度..")
	101	_this.currentTime = _this.dp.video.currentTime;
	102	});
	103	this.dp.on('volumechange', function() {
	104	_this.volumeInit = _this.dp.video.volume;
	105	});
a23166	106	this.dp.on('loadedmetadata', function() {
I	107	_this.duration = _this.dp.video.duration;
	108	});
	109	this.dp.on('error', function() {
	110	_this.duration = 0
	111	_this.disabledPointer = true
	112	});
1cf6d9	113
0dd41b	114	},
105729	115	methods: {
8ec9c5	116	pauseMyVideo() {
I	117	this.dp.pause();
	118	this.isPlaying = false;
	119	},
e4f086	120	togglePlay() {
I	121	this.dp.toggle();
	122	this.isPlaying = !this.isPlaying;
	123	},
0dd41b	124	changeVolume(value) {
I	125	this.dp.volume(value, true, false);
1cf6d9	126	},
I	127	changeTime(time) {
	128	this.dp.seek(time)
af029b	129	},
e4f086	130	//切换视频源
I	131	swichPlay(videoId) {
a23166	132
e4f086	133	if (this.swichLock) {
I	134	this.$message.info("切换太快啦,缓一缓..", 5)
0dd41b	135	return
I	136	}
	137
e4f086	138	if (videoId == this.playingVideoData.id) {
I	139	this.$message.info("同一个视频..", 1)
	140	return
	141	}
	142	let tempData = this.playHistory.filter(item => item.id == videoId)[0]
af029b	143
e4f086	144	this.$message.info("切换视频源..", 1)
I	145	this.swichLock = !this.swichLock;
af029b	146
1cf6d9	147
e4f086	148	this.startPlay(tempData)
0dd41b	149
e4f086	150	setTimeout(() => {
I	151	this.swichLock = !this.swichLock;
1cf6d9	152	}, 2000);
0dd41b	153
e4f086	154	//通知父组件更换评论信息
I	155	this.$emit("swichPlay", tempData)
0dd41b	156
I	157	},
e4f086	158	//调整播放记录
I	159	adjustOrder(videoData) {
	160	if (this.playRecordIds.findIndex(id => id == videoData.id) == -1) {
	161	//新纪录
	162	this.playRecordIds.push(videoData.id)
	163	this.playHistory.unshift(videoData)
	164	} else {
	165	//旧记录
	166	this.playHistory = this.playHistory.filter(item => item.id != videoData.id);
	167	this.playHistory.unshift(videoData)
	168	}
	169	},
	170	//加载播放
	171	startPlay(videoData) {
a3ab3a	172	if (videoData == null \|\| videoData == undefined) {
I	173	this.$message.error("无效资源..")
	174	return
	175	}
a23166	176
1b6f1e	177	if (videoData.url != null && videoData.url != "" && videoData.url.endsWith("m3u8")) {
c6793e	178	videoData.type = "customHls";
I	179	} else {
	180	videoData.type = "normal";
	181	}
a3ab3a	182
1b6f1e	183	if (videoData.pic === null \|\| videoData.pic == ''){
I	184	videoData.pic = myConstant.defaultBGVideo;
	185	}
	186
1cf6d9	187	//重要!!防止hls类型视频在切换后不停在后台缓存
I	188	if (this.hls != null) {
	189	this.hls.destroy();
	190	}
e4f086	191
I	192	this.adjustOrder(videoData)
	193
	194	this.playingVideoData = videoData
	195
a23166	196	this.disabledPointer = false;
e4f086	197	this.isPlaying = false;
I	198
1cf6d9	199	//重要!!防止hls类型视频在切换后不停在后台缓存
I	200	if (videoData.type == "customHls") {
	201	this.hls = new Hls();
a23166	202
1cf6d9	203	}
a23166	204
I	205	this.dp.notice("播放器加载完成..", 3)
e4f086	206
a3ab3a	207	this.dp.switchVideo(this.playingVideoData)
8ec9c5	208
e4f086	209	},
I	210	//播放器初始化
0dd41b	211	init() {
1cf6d9	212	var _this = this;
105729	213	this.dp = new DPlayer({
I	214	element: document.getElementById("videoPlay"),
	215	//logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
0dd41b	216	hotkey: true, // 是否支持热键，调节音量，播放，暂停等
105729	217	mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户
I	218	theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
	219	loop: false, // 是否自动循环
	220	lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
	221	// screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
0dd41b	222	preload: "metadata", // 自动预加载 'none', 'metadata', 'auto'
1cf6d9	223	volume: _this.volumeInit, // 初始化音量
105729	224	playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
I	225	contextmenu: [
	226	//右键菜单
	227	{
	228	text: "b站",
	229	link: "https://www.bilibili.com"
	230	},
0dd41b	231
105729	232	],
I	233	highlight: [
	234	//进度条上的自定义时间标记
	235	// 进度条时间点高亮
0dd41b	236	// {
I	237	// text: "10M",
	238	// time: 60
	239	// },
105729	240	],
I	241	video: {
1cf6d9	242	pic: _this.defalutImg, // 视频封面
0dd41b	243	// url: videoInfo.url,
e4f086	244	//url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
I	245	type: "normal",
105729	246	customType: {
I	247	customHls: function(video, player) {
1cf6d9	248	//const hls = new Hls()
I	249	if (_this.hls != null) {
	250	_this.hls.loadSource(video.src)
	251	_this.hls.attachMedia(video)
a23166	252
I	253	// 监听Hls.Events.ERROR事件，
	254	// DNS解析、下载超时，都会触发manifestLoadError错误
	255	_this.hls.on(Hls.Events.ERROR, function(eventName, data) {
	256	// 埋点上报，可以追踪data.details
	257	// track()
	258	_this.$message.error("hls加载异常", 5)
	259	console.log(eventName);
	260	console.log(data);
	261	})
1cf6d9	262	}
a23166	263
105729	264	}
I	265	}
	266	}
	267	})
e4f086	268
I	269	// 以下为隐藏一些作者的信息和视频播放源如不需要可删除
	270	// document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
	271
	272	document.querySelector(".dplayer-mask").remove();
	273	document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
	274	let length = document.querySelectorAll(".dplayer-menu-item").length;
	275	document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
	276	document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
0dd41b	277	},
105729	278	}
af029b	279
105729	280	}
I	281	</script>
	282	<style lang="less" scoped>
0dd41b	283	.playItem {
I	284	border: 1px solid #d9d9d9;
	285	padding: 10px;
	286	border-radius: 5px;
	287	margin: 10px;
1cf6d9	288	transition: all .3s;
0dd41b	289	position: relative;
I	290	}
	291
8ec9c5	292	.mark {
I	293	border-radius: 14px;
	294	background: #00000073;
	295	width: 100%;
	296	height: 100%;
	297	pointer-events: none;
	298	}
	299
0dd41b	300	.playItem:hover {
e4f086	301	//transform: scale(1.1) translate3d(0, 0, 0);
0dd41b	302	}
I	303
	304	.playItem:active {
1cf6d9	305	// transform: scale(0.75) translate3d(0, 0, 0);
I	306	box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
0dd41b	307	}
e4f086	308
0dd41b	309
I	310	.playIcon {
	311	transform: scale(1.3);
	312	position: absolute;
	313	top: 35%;
	314	right: 10px;
	315	}
	316
105729	317	.myVideo {
I	318	position: relative;
1cf6d9	319	width: 315px;
105729	320	height: 180px;
I	321	background-color: #565656;
	322	border-radius: 10px;
a23166	323	margin: 20px auto;
e4f086	324	display: grid;
105729	325	}
I	326
	327
0dd41b	328	.myVideo /deep/ .dplayer {
I	329	border-radius: 5px;
105729	330	}
I	331
1cf6d9	332	.activeElement {
I	333	-webkit-animation: free_download 1s linear alternate infinite;
	334	animation: free_download 1s linear alternate infinite;
	335	}
	336
	337	@-webkit-keyframes free_download {
	338	0% {
	339	-webkit-transform: scale(1);
	340	}
	341
	342	100% {
	343	-webkit-transform: scale(1.2);
	344	}
	345	}
	346
	347	@keyframes free_download {
	348	0% {
	349	transform: scale(1);
	350	}
	351
	352	100% {
	353	transform: scale(1.2);
	354	}
	355	}
105729	356	</style>