|
|
@@ -100,7 +100,7 @@
|
|
|
class="custom-video"
|
|
|
style="display: block; background: #000; height: 40vh;"
|
|
|
>
|
|
|
- <source :src="videoUrl" type="video/mp4">
|
|
|
+ <source :src="videoUrl" type="application/x-mpegURL">
|
|
|
</video>
|
|
|
<!-- 自定义进度条容器 -->
|
|
|
<div ref="progressBar" class="progress-container">
|
|
|
@@ -122,7 +122,7 @@
|
|
|
playsinline
|
|
|
style="display: block; background: #000; height: 40vh;"
|
|
|
>
|
|
|
- <source :src="videoUrl" type="video/mp4">
|
|
|
+ <source :src="videoUrl" type="application/x-mpegURL">
|
|
|
</video>
|
|
|
</div>
|
|
|
<div style="border-radius: 5px; overflow: hidden;" v-else>
|
|
|
@@ -393,7 +393,6 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
const video = this.$refs.videoPlayer;
|
|
|
if (video != null) {
|
|
|
- video.play();
|
|
|
this.initVideoPlayer(this.liveInfo.startTime)
|
|
|
}
|
|
|
})
|
|
|
@@ -453,7 +452,17 @@ export default {
|
|
|
},
|
|
|
initVideoPlayer: function (startTime) {
|
|
|
const video = this.$refs.videoPlayer;
|
|
|
-
|
|
|
+ this.hls = new Hls();
|
|
|
+ this.hls.attachMedia(video);
|
|
|
+ this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
|
|
|
+ this.hls.loadSource(this.videoUrl);
|
|
|
+ this.hls.on(Hls.Events.STREAM_LOADED, (event, data) => {
|
|
|
+ video.play();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.hls.on(Hls.Events.ERROR, (event, data) => {
|
|
|
+ console.error('HLS 错误:', data);
|
|
|
+ });
|
|
|
|
|
|
// 1. 初始化开播时间
|
|
|
startTime = new Date(startTime).getTime();
|
|
|
@@ -588,8 +597,6 @@ export default {
|
|
|
this.liveType = 2
|
|
|
this.videoUrl = res.data.videoUrl;
|
|
|
this.$nextTick(() => {
|
|
|
- const video = this.$refs.videoPlayer;
|
|
|
- video.play()
|
|
|
this.initVideoPlayer(res.data.startTime)
|
|
|
})
|
|
|
}
|
|
|
@@ -682,6 +689,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
loadUserList() {
|
|
|
+ if(this.liveId == null) return
|
|
|
// 直播间用户
|
|
|
watchUserList({
|
|
|
liveId: this.liveId,
|