From 56fe690507efc7e47f3b83e4e2095afa1ccf1439 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Mon, 07 Mar 2022 01:29:57 +0800
Subject: [PATCH] Dplayer测试

---
 src/components/mini/box14-video.vue |  307 +++++++++++++++++++++++++++++++++++---------------
 1 files changed, 214 insertions(+), 93 deletions(-)

diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
index d7bc140..789e714 100644
--- a/src/components/mini/box14-video.vue
+++ b/src/components/mini/box14-video.vue
@@ -1,109 +1,230 @@
+<style lang="less" scoped>
+	.videoBoxList {
+		display: flex;
+		// justify-content: space-evenly;
+		flex-wrap: wrap;
+		// align-content:flex-start;
+		min-height: 700px;
+		align-items: stretch;
+	}
+
+	.myVideo {
+		position: relative;
+		// width: 220px;
+		// height: 140px;
+		width: 300px;
+		height: 180px;
+		background-color: #565656;
+		border-radius: 10px;
+		margin: 10px;
+		display: flex;
+
+		.face {
+			z-index: 1;
+		}
+
+		img {
+			max-width: 100%;
+		}
+	}
+
+
+	.myVideo:hover {
+		.mark {
+			background-color: #000;
+			display: initial;
+		}
+
+		.player-video-state {
+			// display: initial;
+		}
+	}
+
+
+
+
+	.dplayer {
+		width: 500px;
+	}
+
+	.mark {
+		opacity: 0.45;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		display: none;
+	}
+
+	.player-video-state {
+		// position: absolute;
+		left: 43%;
+		top: 35%;
+		width: 50px;
+		height: 50px;
+		display: none;
+	}
+</style>
+
 <template>
-
 	<div>
-		<div class="test_wow" v-for="(temp,index) in [1,2,1,1,1,1]">
-
-			    <section class="wow animate__slideInUp test_wow" data-wow-delay="0.8s" data-wow-duration="0.8s">
-				temp,index
-				    </section>
-
+		<div class="videoBoxList">
+			<div class="myVideo" v-for=" (temp,index) in ['test1','test2','test3']">
+				<div :id="temp" :ref="temp" class="dplayer"></div>
+				<!-- <div class="mark" ></div> -->
+				<!-- <img src="qq.png"> -->
+				<!-- 视频 -->
+				<div class="player-video-state">
+					<span class="bp-svgicon">
+						<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
+							xmlns:xlink="http://www.w3.org/1999/xlink">
+							<defs>
+								<path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path>
+								<path
+									d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z"
+									id="pid-1-svgo-d"></path>
+								<filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%"
+									filterUnits="objectBoundingBox" id="pid-1-svgo-c">
+									<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+									<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1">
+									</feGaussianBlur>
+									<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
+										in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+									<feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+									<feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2"
+										result="shadowBlurOuter2">
+									</feGaussianBlur>
+									<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+										in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+									<feMerge>
+										<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+										<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+									</feMerge>
+								</filter>
+							</defs>
+							<g fill="none" fill-rule="evenodd" opacity=".8">
+								<mask id="pid-1-svgo-b" fill="#fff">
+									<use xlink:href="#pid-1-svgo-a"></use>
+								</mask>
+								<g mask="url(#pid-1-svgo-b)">
+									<use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use>
+									<use fill="#FFF" xlink:href="#pid-1-svgo-d"></use>
+								</g>
+							</g>
+						</svg>
+					</span>
+				</div>
+			</div>
 		</div>
 	</div>
-
-
-
 </template>
 
 <script>
+	import Hls from 'hls.js'
+	import DPlayer from 'dplayer'
+
 	export default {
-
-		name: 'Home',
-
 		data() {
-
 			return {
-
+				dp: null,
+				video: {},
+				video1: {
+				},
+				video2: {
+				},
+			}
+		},
+		methods: {
+			myPlay() {
+				this.$message.info("start play..")
+			},
+			loadVideo(videoInfo, index) {
+				this.dp = new DPlayer({
+					element: document.getElementById(index),
+					//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: "auto", // 自动预加载
+					volume: 0, // 初始化音量
+					playbackSpeed: [2, 1, 0.5], //可选的播放速度,可自定义
+					contextmenu: [
+						//  自定义上下文菜单
+						// 右键菜单
+						{
+							text: "b站",
+							link: "https://www.bilibili.com"
+						},
+						{
+							text: "选项二",
+							click: player => {
+								console.log(player);
+							}
+						}
+					],
+					highlight: [
+						//进度条上的自定义时间标记
+						// 进度条时间点高亮
+						{
+							text: "10M",
+							time: 60
+						},
+						{
+							text: "20M",
+							time: 120
+						}
+					],
+					video: {
+						pic: videoInfo.img, // 视频封面
+						url: videoInfo.url,
+						type: 'customHls',
+						customType: {
+							customHls: function(video, player) {
+								const hls = new Hls()
+								hls.loadSource(video.src)
+								hls.attachMedia(video)
+							}
+						}
+					}
+				})
+			}
+		},
+		mounted() {
+			this.video1 = {
+				img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+				url: "http://t.inleft.com/share/myVideo/faye/faye.m3u8"
+			}
+			this.video2 = {
+				img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+				url: "http://t.inleft.com/share/myVideo/canon/canon.m3u8"
 			}
 
-		},
+			// getVideo: ajax request for getting videoInfo
+			/*   getVideo().then(res => {
+			    this.video = res.data.video
+			    this.laodVideo(this.video)
+			  }) */
+			this.video = {
+				//封面
+				//img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg",
+				img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+				// video: "https://vod3.bdzybf3.com/20210509/ZMHA3RpS/1000kb/hls/index.m3u8",
+				// video: "http://t.inleft.com/share/ckplayer/ckplayer-master/sample/test/video_tieba.m3u8",
+				// video: videoUrl,
+				// video: "http://t.inleft.com/share/mp3/inleft-test-20211103-rainbow.mp3",
+			}
+			this.loadVideo(this.video1, "test1")
+			this.loadVideo(this.video2, "test2")
 
-		mounted() {
-
-			new this.$wow.WOW().init()
-
+			// 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
+			// 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 - 2].remove(); // 去掉作者信息
+			document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
 		}
-
 	}
 </script>
-
-<style scoped>
-	.test_wow {
-
-		position: relative;
-
-		width: 1000px;
-
-		height: 400px;
-
-		/* background: #212121; */
-
-		margin: 0 auto;
-
-	}
-
-	.test_wow1 {
-
-		position: relative;
-
-		width: 1000px;
-
-		height: 400px;
-
-		background: #741919;
-
-		margin: 0 auto;
-
-	}
-
-	.test_wow2 {
-
-		position: relative;
-
-		width: 1000px;
-
-		height: 400px;
-
-		background: #2b0f44;
-
-		margin: 0 auto;
-
-	}
-
-	.test_wow3 {
-
-		position: relative;
-
-		width: 1000px;
-
-		height: 400px;
-
-		background: #558614;
-
-		margin: 0 auto;
-
-	}
-
-	.test_wow4 {
-
-		position: relative;
-
-		width: 1000px;
-
-		height: 400px;
-
-		background: #440707;
-
-		margin: 0 auto;
-
-	}
-</style>

--
Gitblit v1.9.1