blog/blog-facade.git

inleft

2022-08-14 a3ab3afe580daa80e9689f6e513e75a385f75bac

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