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