From 57e3bead08715d72efaeffe90fafa179b8366473 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Sat, 18 May 2024 12:02:14 +0800 Subject: [PATCH] 1.RSS更新 2.调整标签hover位置 3.font size --- src/components/mini/box15-videoPlayBox.vue | 49 ++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 42 insertions(+), 7 deletions(-) diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue index 4ce96af..8e56ba5 100644 --- a/src/components/mini/box15-videoPlayBox.vue +++ b/src/components/mini/box15-videoPlayBox.vue @@ -1,12 +1,12 @@ <template> <div> - <div> + <div v-if="!this.$attrs.showTar"> 正在播放: <span> {{playingVideoData.title}} </span> </div> - <div class="myVideo fade"> + <div class="myVideo fade" v-bind:class="{disabledPointer:disabledPointer}"> <div id="videoPlay" ref="myVdeoPlay"></div> </div> - <div style="border-radius: 0 0 4px 4px;"> + <div style="border-radius: 0 0 4px 4px;" v-if="!this.$attrs.showTar"> <div style="padding: 10px 0px;"> 音量 : @@ -51,11 +51,14 @@ <script> import Hls from 'hls.js' import DPlayer from 'dplayer' + import myConstant from "../../config/myConstant.js" export default { data() { return { + disabledPointer: false, dp: null, + hls: null, playHistory: [], playRecordIds: [], volumeInit: 0.1, @@ -64,13 +67,12 @@ currentTime: 0, duration: 0, playingVideoData: { - img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", + pic: "", url: "", type: "normal", title: "", id: "" }, - hls: null, } }, mounted() { @@ -79,7 +81,7 @@ var _this = this; //调整音量 - _this.$message.success("模块加载完成,请注意音量是否合适..") + //_this.$message.success("模块加载完成,请注意音量是否合适..") this.dp.volume(this.volumeInit, true, false); @@ -101,6 +103,13 @@ this.dp.on('volumechange', function() { _this.volumeInit = _this.dp.video.volume; }); + this.dp.on('loadedmetadata', function() { + _this.duration = _this.dp.video.duration; + }); + this.dp.on('error', function() { + _this.duration = 0 + _this.disabledPointer = true + }); }, methods: { @@ -120,6 +129,7 @@ }, //切换视频源 swichPlay(videoId) { + if (this.swichLock) { this.$message.info("切换太快啦,缓一缓..", 5) return @@ -164,6 +174,16 @@ return } + if (videoData.url != null && videoData.url != "" && videoData.url.endsWith("m3u8")) { + videoData.type = "customHls"; + } else { + videoData.type = "normal"; + } + + if (videoData.pic === null || videoData.pic == ''){ + videoData.pic = myConstant.defaultBGVideo; + } + //重要!!防止hls类型视频在切换后不停在后台缓存 if (this.hls != null) { this.hls.destroy(); @@ -173,12 +193,16 @@ this.playingVideoData = videoData + this.disabledPointer = false; this.isPlaying = false; //重要!!防止hls类型视频在切换后不停在后台缓存 if (videoData.type == "customHls") { this.hls = new Hls(); + } + + this.dp.notice("播放器加载完成..", 3) this.dp.switchVideo(this.playingVideoData) @@ -225,7 +249,18 @@ if (_this.hls != null) { _this.hls.loadSource(video.src) _this.hls.attachMedia(video) + + // 监听Hls.Events.ERROR事件, + // DNS解析、下载超时,都会触发manifestLoadError错误 + _this.hls.on(Hls.Events.ERROR, function(eventName, data) { + // 埋点上报,可以追踪data.details + // track() + _this.$message.error("hls加载异常", 5) + console.log(eventName); + console.log(data); + }) } + } } } @@ -285,7 +320,7 @@ height: 180px; background-color: #565656; border-radius: 10px; - margin: 20px 0px; + margin: 20px auto; display: grid; } -- Gitblit v1.9.1