inleft
2022-08-16 b72b2ea324a3ab0e94b987bf98024bd884d25f33
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>