From e4f0862bd8af0ac1c7aab59904b69dd071526aff Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 12 Aug 2022 23:59:41 +0800
Subject: [PATCH] 视频模块添加播放历史
---
src/components/mini/box15-videoPlayBox.vue | 159 +++++++++++++++++++++++++++------------
src/components/swichLabel/main1-home.vue | 2
src/components/mini/box14-video.vue | 3
src/components/mini/box16-videoDetail.vue | 22 ++++-
4 files changed, 131 insertions(+), 55 deletions(-)
diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
index 54bfb57..2ef594c 100644
--- a/src/components/mini/box14-video.vue
+++ b/src/components/mini/box14-video.vue
@@ -18,7 +18,7 @@
<!-- <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
{{item.title}}
</router-link> -->
- {{item.title}}
+ {{item.title}}
</h5>
<div class="post_content">
{{item.introduce}}
@@ -124,6 +124,7 @@
gap: 2rem;
padding-bottom: 20px;
// background-color: #666;
+ user-select: none;
a {
color: #555;
diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue
index fa7b0cf..0a6b19b 100644
--- a/src/components/mini/box15-videoPlayBox.vue
+++ b/src/components/mini/box15-videoPlayBox.vue
@@ -1,7 +1,7 @@
<template>
<div>
<div>
- 正在播放: <span> {{defalutTitle}} </span>
+ 正在播放: <span> {{playingVideoData.title}} </span>
</div>
<div class="myVideo">
<div id="videoPlay" ref="myVdeoPlay"></div>
@@ -11,18 +11,33 @@
音量 :
<a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
</div>
- <a-collapse>
- <!-- v-if="playHistory.length>1" -->
- <a-collapse-panel key="playList" header="播放记录">
- <div class="playItem" v-for="(item,index) in playHistory">
- {{item.title}}
- <a-icon v-if="index==0" type="youtube" class="playIcon" />
+ <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}}
+ <a-icon type="youtube" class="playIcon" />
+ </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'
@@ -31,58 +46,101 @@
export default {
data() {
return {
- defalutImg: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
- defalutTitle: "",
dp: null,
- video: {},
- firstLoad: true,
+ playHistory: [],
+ playRecordIds: [],
volumeInit: 0.1,
isPlaying: false,
- playHistory: [],
- playHistoryId: {},
+ swichLock: false,
+ playingVideoData: {
+ img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ url: "",
+ type: "normal",
+ title: "",
+ id: ""
+ },
+
}
},
mounted() {
//弹窗初始化后先不加载视频,等待手动播放
this.init();
+ var _this = this;
+
+ //调整音量
+ _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;
+ });
},
methods: {
+ togglePlay() {
+ this.dp.toggle();
+ this.isPlaying = !this.isPlaying;
+ },
changeVolume(value) {
this.dp.volume(value, true, false);
},
- changePlay(videoData) {
- console.log(111);
- this.defalutTitle = videoData.title;
- if (this.playHistoryId[videoData.id] != null) {
- this.playHistory = this.playHistory.filter(item => item.id == videoData.id);
- this.playHistory.unshift(videoData)
+ //切换视频源
+ swichPlay(videoId) {
+ if (this.swichLock) {
+ this.$message.info("切换太快啦,缓一缓..", 5)
return
- } else {
- this.playHistoryId[videoData.id] = videoData;
- this.playHistory.unshift(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"
- // }
+ if (videoId == this.playingVideoData.id) {
+ this.$message.info("同一个视频..", 1)
+ return
+ }
+ let tempData = this.playHistory.filter(item => item.id == videoId)[0]
- this.loadVideo(videoData)
+ this.$message.info("切换视频源..", 1)
+ this.swichLock = !this.swichLock;
- // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
- // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
+ this.startPlay(tempData)
+ setTimeout(() => {
+ this.swichLock = !this.swichLock;
+ }, 5000);
- // 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.$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) {
+
+ this.adjustOrder(videoData)
+
+ this.playingVideoData = videoData
+
+ this.isPlaying = false;
+ this.dp.switchVideo(this.playingVideoData, null)
+
+
+ },
+ //播放器初始化
init() {
this.dp = new DPlayer({
element: document.getElementById("videoPlay"),
@@ -116,7 +174,8 @@
video: {
pic: this.defalutImg, // 视频封面
// url: videoInfo.url,
- // type: videoInfo.type,
+ //url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
+ type: "normal",
customType: {
customHls: function(video, player) {
const hls = new Hls()
@@ -126,6 +185,15 @@
}
}
})
+
+ // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
+ // 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(); // 去掉作者信息
},
}
@@ -142,12 +210,13 @@
}
.playItem:hover {
- transform: scale(1.1) translate3d(0, 0, 0);
+ //transform: scale(1.1) translate3d(0, 0, 0);
}
.playItem:active {
- transform: scale(0.85);
+ transform: scale(0.75) translate3d(0, 0, 0);
}
+
.playIcon {
transform: scale(1.3);
@@ -163,19 +232,13 @@
background-color: #565656;
border-radius: 10px;
margin: 20px 0px;
- display: flex;
+ display: grid;
}
- .myVideo /deep/ .dplayer-video {
- height: auto;
- // border-radius: 16px;
- }
.myVideo /deep/ .dplayer {
border-radius: 5px;
}
- .myVideo /deep/ video {
- object-fit: cover;
- }
+
</style>
diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue
index 7071b88..d093711 100644
--- a/src/components/mini/box16-videoDetail.vue
+++ b/src/components/mini/box16-videoDetail.vue
@@ -1,12 +1,12 @@
<template>
<div>
- <div class="boxMain">
- <videoPlayBox ref="videoPlayBox"></videoPlayBox>
+ <div class="boxMain ">
+ <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
</div>
- <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow">
+ <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow fadeInLeft">
<pre>{{introduce}}</pre>
</div>
- <div class="articleComment">
+ <div class="articleComment fadeInRight">
<comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
</div>
</div>
@@ -59,11 +59,16 @@
url: "",
type: "normal",
title: "",
+ introduce: "",
id: ""
}
}
},
methods: {
+ swichPlay(videoData) {
+ this.introduce = videoData.introduce;
+ this.$refs.myComment.updateCommentList(videoData.id);
+ },
showVideo(item) {
//防止重复加载
this.lastArticleId = this.articleId;
@@ -78,6 +83,10 @@
this.loadData();
},
loadData() {
+
+ if (this.$refs.videoPlayBox.isPlaying) {
+ this.$message.info("上个视频正在播放中")
+ }
if (this.myLock) {
this.$message.info("正在努力加载中..", 3)
@@ -113,6 +122,7 @@
this.videoData.url = res.data.articleFileURL;
this.videoData.img = res.data.coverFileURL;
this.videoData.title = res.data.title;
+ this.videoData.introduce = res.data.introduce;
this.videoData.id = res.data.id;
@@ -126,7 +136,8 @@
this.myLock = !this.myLock;
if (this.lastArticleId != this.articleId) {
- _this.$refs.videoPlayBox.changePlay(this.videoData)
+ let tempParam = JSON.parse(JSON.stringify(this.videoData))
+ _this.$refs.videoPlayBox.startPlay(tempParam)
}
})
@@ -145,6 +156,7 @@
}
.boxMain {
+ user-select: none;
display: flex;
justify-content: center;
padding: 5px 20px;
diff --git a/src/components/swichLabel/main1-home.vue b/src/components/swichLabel/main1-home.vue
index 9277329..3ac5f97 100644
--- a/src/components/swichLabel/main1-home.vue
+++ b/src/components/swichLabel/main1-home.vue
@@ -27,7 +27,7 @@
<a-col v-bind="colApiMain">
<a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
- <a-affix :offset-top="550">
+ <a-affix :offset-top="500">
<a-button @click="showDrawer" style="padding:0px 10px">
<a-icon type="left-circle" />
</a-button>
--
Gitblit v1.9.1