blog/blog-facade.git

inleft

2022-08-26 fa1bd95d533444d7360d1ada127b7a3279a3901f

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