From c3aa826406d52957d6f98d0ecd4b77413d5ce908 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 29 Aug 2022 18:23:08 +0800 Subject: [PATCH] 统计模块异步加载 --- src/components/mini/box15-videoPlayBox.vue | 65 ++++++++++++++++++++++++++++---- 1 files changed, 57 insertions(+), 8 deletions(-) diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue index 6685448..8e56ba5 100644 --- a/src/components/mini/box15-videoPlayBox.vue +++ b/src/components/mini/box15-videoPlayBox.vue @@ -1,12 +1,13 @@ <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;"> 音量 : <a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" /> @@ -16,6 +17,7 @@ {{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"> @@ -49,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, @@ -62,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() { @@ -77,7 +81,7 @@ var _this = this; //调整音量 - _this.$message.success("模块加载完成,请注意音量是否合适..") + //_this.$message.success("模块加载完成,请注意音量是否合适..") this.dp.volume(this.volumeInit, true, false); @@ -99,9 +103,20 @@ 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: { + pauseMyVideo() { + this.dp.pause(); + this.isPlaying = false; + }, togglePlay() { this.dp.toggle(); this.isPlaying = !this.isPlaying; @@ -114,6 +129,7 @@ }, //切换视频源 swichPlay(videoId) { + if (this.swichLock) { this.$message.info("切换太快啦,缓一缓..", 5) return @@ -158,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(); @@ -167,15 +193,19 @@ 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) - + }, //播放器初始化 init() { @@ -219,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); + }) } + } } } @@ -248,6 +289,14 @@ position: relative; } + .mark { + border-radius: 14px; + background: #00000073; + width: 100%; + height: 100%; + pointer-events: none; + } + .playItem:hover { //transform: scale(1.1) translate3d(0, 0, 0); } @@ -271,7 +320,7 @@ height: 180px; background-color: #565656; border-radius: 10px; - margin: 20px 0px; + margin: 20px auto; display: grid; } -- Gitblit v1.9.1