From a23166e4fac771238a90ae5ddc5b1e53a1c7afb8 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Thu, 25 Aug 2022 18:10:21 +0800
Subject: [PATCH] 更新后的细节调整
---
src/components/mini/box15-videoPlayBox.vue | 35 +++++++++++++++++++++++++++++------
1 files changed, 29 insertions(+), 6 deletions(-)
diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue
index 008d666..99132eb 100644
--- a/src/components/mini/box15-videoPlayBox.vue
+++ b/src/components/mini/box15-videoPlayBox.vue
@@ -3,7 +3,7 @@
<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;" v-if="!this.$attrs.showTar">
@@ -55,6 +55,7 @@
export default {
data() {
return {
+ disabledPointer: false,
dp: null,
playHistory: [],
playRecordIds: [],
@@ -64,7 +65,7 @@
currentTime: 0,
duration: 0,
playingVideoData: {
- img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ pic: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
url: "",
type: "normal",
title: "",
@@ -79,7 +80,7 @@
var _this = this;
//调整音量
- _this.$message.success("模块加载完成,请注意音量是否合适..")
+ //_this.$message.success("模块加载完成,请注意音量是否合适..")
this.dp.volume(this.volumeInit, true, false);
@@ -101,6 +102,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 +128,7 @@
},
//切换视频源
swichPlay(videoId) {
+
if (this.swichLock) {
this.$message.info("切换太快啦,缓一缓..", 5)
return
@@ -163,14 +172,13 @@
this.$message.error("无效资源..")
return
}
-
+
if (videoData.url != null && videoData.urlL != "" && videoData.url.endsWith("m3u8")) {
videoData.type = "customHls";
} else {
videoData.type = "normal";
}
-
//重要!!防止hls类型视频在切换后不停在后台缓存
if (this.hls != null) {
this.hls.destroy();
@@ -180,12 +188,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)
@@ -232,7 +244,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);
+ })
}
+
}
}
}
@@ -292,7 +315,7 @@
height: 180px;
background-color: #565656;
border-radius: 10px;
- margin: 20px 0px;
+ margin: 20px auto;
display: grid;
}
--
Gitblit v1.9.1