From c6793e5475b607e83cbb55b7d0ddfb9b81bd7774 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Thu, 25 Aug 2022 04:09:06 +0800
Subject: [PATCH] 日志内容详情页多媒体适配 markdown 内图片增加viewer相应
---
src/components/mini/box15-videoPlayBox.vue | 429 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 284 insertions(+), 145 deletions(-)
diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue
index 18ea111..008d666 100644
--- a/src/components/mini/box15-videoPlayBox.vue
+++ b/src/components/mini/box15-videoPlayBox.vue
@@ -1,51 +1,52 @@
<template>
<div>
- <div class="myVideo">
- <div id="videoPlay" ref="test1" class="dplayer"></div>
- <!-- <div class="mark" ></div> -->
- <!-- 视频 -->
- <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 v-if="!this.$attrs.showTar">
+ 正在播放: <span> {{playingVideoData.title}} </span>
+ </div>
+ <div class="myVideo fade">
+ <div id="videoPlay" ref="myVdeoPlay"></div>
+ </div>
+ <div style="border-radius: 0 0 4px 4px;" v-if="!this.$attrs.showTar">
+
+ <div style="padding: 10px 0px;">
+ 音量 :
+ <a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
</div>
+ <div style="padding: 10px 0px;">
+ 播放进度 : {{Math.floor(currentTime/60)}}:{{Math.floor(currentTime%60)}} /
+ {{Math.floor(duration/60)}}:{{Math.floor(duration%60)}}
+ <a-slider v-model="currentTime" :max="duration" @afterChange="changeTime" />
+ </div>
+
+ <a-collapse activeKey="playHistory">
+ <a-collapse-panel key="playHistory" header="播放记录">
+ <div v-for="(item,index) in playHistory">
+ <div v-if="index==0">
+ <a-tooltip placement="bottomRight" title="播放/暂停">
+ <div @click="togglePlay" class="playItem">
+ {{item.title}}
+ <span v-if="!isPlaying " class="myTip">(已暂停)</span>
+ <a-icon type="youtube" class="playIcon "
+ v-bind:class="{ activeElement: isPlaying }" />
+ </div>
+ </a-tooltip>
+ </div>
+ <div v-else>
+ <div @click="swichPlay(item.id)" class="playItem">
+ <a-tooltip placement="bottomRight" title="切换播放">
+ <div>
+ {{item.title}}
+ </div>
+ </a-tooltip>
+ </div>
+ </div>
+ </div>
+ </a-collapse-panel>
+ </a-collapse>
</div>
</div>
</template>
+
<script>
import Hls from 'hls.js'
@@ -55,135 +56,273 @@
data() {
return {
dp: null,
- video: {},
- firstLoad: true
+ playHistory: [],
+ playRecordIds: [],
+ volumeInit: 0.1,
+ isPlaying: false,
+ swichLock: false,
+ currentTime: 0,
+ duration: 0,
+ playingVideoData: {
+ img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ url: "",
+ type: "normal",
+ title: "",
+ id: ""
+ },
+ hls: null,
}
},
- methods: {
- myPlay() {
- this.$message.info("start play..")
- },
- changePlay(videoData) {
- // this.video = {
- // img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
- // url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
- // type: "normal"
- // }
+ mounted() {
+ //弹窗初始化后先不加载视频,等待手动播放
+ this.init();
+ var _this = this;
- this.loadVideo(videoData)
+ //调整音量
+ _this.$message.success("模块加载完成,请注意音量是否合适..")
+
+ this.dp.volume(this.volumeInit, true, false);
+
+ this.dp.on('pause', function() {
+ _this.$message.info("停止播放")
+ _this.isPlaying = false;
+ });
+
+ this.dp.on('play', function() {
+ _this.$message.info("开始播放..")
+ _this.isPlaying = true;
+ _this.duration = _this.dp.video.duration;
+ _this.currentTime = _this.dp.video.currentTime;
+ });
+ this.dp.on('timeupdate', function() {
+ //_this.$message.info("进度..")
+ _this.currentTime = _this.dp.video.currentTime;
+ });
+ this.dp.on('volumechange', function() {
+ _this.volumeInit = _this.dp.video.volume;
+ });
+
+ },
+ methods: {
+ pauseMyVideo() {
+ this.dp.pause();
+ this.isPlaying = false;
+ },
+ togglePlay() {
+ this.dp.toggle();
+ this.isPlaying = !this.isPlaying;
+ },
+ changeVolume(value) {
+ this.dp.volume(value, true, false);
+ },
+ changeTime(time) {
+ this.dp.seek(time)
+ },
+ //切换视频源
+ swichPlay(videoId) {
+ if (this.swichLock) {
+ this.$message.info("切换太快啦,缓一缓..", 5)
+ return
+ }
+
+ if (videoId == this.playingVideoData.id) {
+ this.$message.info("同一个视频..", 1)
+ return
+ }
+ let tempData = this.playHistory.filter(item => item.id == videoId)[0]
+
+ this.$message.info("切换视频源..", 1)
+ this.swichLock = !this.swichLock;
+
+
+ this.startPlay(tempData)
+
+ setTimeout(() => {
+ this.swichLock = !this.swichLock;
+ }, 2000);
+
+ //通知父组件更换评论信息
+ this.$emit("swichPlay", tempData)
+
+ },
+ //调整播放记录
+ adjustOrder(videoData) {
+ if (this.playRecordIds.findIndex(id => id == videoData.id) == -1) {
+ //新纪录
+ this.playRecordIds.push(videoData.id)
+ this.playHistory.unshift(videoData)
+ } else {
+ //旧记录
+ this.playHistory = this.playHistory.filter(item => item.id != videoData.id);
+ this.playHistory.unshift(videoData)
+ }
+ },
+ //加载播放
+ startPlay(videoData) {
+ if (videoData == null || videoData == undefined) {
+ this.$message.error("无效资源..")
+ return
+ }
+
+ if (videoData.url != null && videoData.urlL != "" && videoData.url.endsWith("m3u8")) {
+ videoData.type = "customHls";
+ } else {
+ videoData.type = "normal";
+ }
+
+
+ //重要!!防止hls类型视频在切换后不停在后台缓存
+ if (this.hls != null) {
+ this.hls.destroy();
+ }
+
+ this.adjustOrder(videoData)
+
+ this.playingVideoData = videoData
+
+ this.isPlaying = false;
+
+ //重要!!防止hls类型视频在切换后不停在后台缓存
+ if (videoData.type == "customHls") {
+ this.hls = new Hls();
+ }
+
+ this.dp.switchVideo(this.playingVideoData)
+
+ },
+ //播放器初始化
+ init() {
+ var _this = this;
+ this.dp = new DPlayer({
+ element: document.getElementById("videoPlay"),
+ //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: "metadata", // 自动预加载 'none', 'metadata', 'auto'
+ volume: _this.volumeInit, // 初始化音量
+ playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
+ contextmenu: [
+ //右键菜单
+ {
+ text: "b站",
+ link: "https://www.bilibili.com"
+ },
+
+ ],
+ highlight: [
+ //进度条上的自定义时间标记
+ // 进度条时间点高亮
+ // {
+ // text: "10M",
+ // time: 60
+ // },
+ ],
+ video: {
+ pic: _this.defalutImg, // 视频封面
+ // url: videoInfo.url,
+ //url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
+ type: "normal",
+ customType: {
+ customHls: function(video, player) {
+ //const hls = new Hls()
+ if (_this.hls != null) {
+ _this.hls.loadSource(video.src)
+ _this.hls.attachMedia(video)
+ }
+ }
+ }
+ }
+ })
// 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
// 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 - 1].remove(); // 去掉作者信息
document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
},
- loadVideo(videoInfo) {
- this.dp = new DPlayer({
- element: document.getElementById("videoPlay"),
- //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.1, // 初始化音量
- 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: videoInfo.type,
- customType: {
- customHls: function(video, player) {
- const hls = new Hls()
- hls.loadSource(video.src)
- hls.attachMedia(video)
- }
- }
- }
- })
- }
}
}
</script>
<style lang="less" scoped>
- .myVideo {
- position: relative;
- // width: 220px;
- // height: 140px;
- width: 300px;
- height: 180px;
- background-color: #565656;
- border-radius: 10px;
+ .playItem {
+ border: 1px solid #d9d9d9;
+ padding: 10px;
+ border-radius: 5px;
margin: 10px;
- display: flex;
-
-
- }
-
-
- .myVideo:hover {
- .mark {
- background-color: #000;
- display: initial;
- }
-
- .player-video-state {
- // display: initial;
- }
- }
-
-
- .dplayer {
- width: 500px;
+ transition: all .3s;
+ position: relative;
}
.mark {
- opacity: 0.45;
+ border-radius: 14px;
+ background: #00000073;
width: 100%;
height: 100%;
- position: absolute;
- background-color: #000;
- display: none;
+ pointer-events: none;
}
- .player-video-state {
+ .playItem:hover {
+ //transform: scale(1.1) translate3d(0, 0, 0);
+ }
+
+ .playItem:active {
+ // transform: scale(0.75) translate3d(0, 0, 0);
+ box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
+ }
+
+
+ .playIcon {
+ transform: scale(1.3);
position: absolute;
- left: 43%;
top: 35%;
- width: 50px;
- height: 50px;
- display: none;
+ right: 10px;
+ }
+
+ .myVideo {
+ position: relative;
+ width: 315px;
+ height: 180px;
+ background-color: #565656;
+ border-radius: 10px;
+ margin: 20px 0px;
+ display: grid;
+ }
+
+
+ .myVideo /deep/ .dplayer {
+ border-radius: 5px;
+ }
+
+ .activeElement {
+ -webkit-animation: free_download 1s linear alternate infinite;
+ animation: free_download 1s linear alternate infinite;
+ }
+
+ @-webkit-keyframes free_download {
+ 0% {
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ -webkit-transform: scale(1.2);
+ }
+ }
+
+ @keyframes free_download {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(1.2);
+ }
}
</style>
--
Gitblit v1.9.1