vue+videojs+videojs-contrib-hl实现hls视频流切换播放

最新推荐文章于 2025-06-23 18:15:09 发布

小菜鸡的日常问题

最新推荐文章于 2025-06-23 18:15:09 发布

阅读量9k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue videojs hls 视频播放切换

本文链接：https://blog.youkuaiyun.com/qq_33426324/article/details/103036789

本文介绍如何使用 Vue.js 和 videojs 框架结合 videojs-contrib-hls 插件，实现根据不同的数据源动态播放 HLS 格式的视频。文章详细展示了如何在页面上根据视频 URL 的变化动态创建和销毁 videojs 播放器实例，确保每次都能正确加载新的视频流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+videojs+videojs-contrib-hl实现点击勾选不同的数据，播放不同的视频。

<template>
  <div class="player-container">
    <template v-if="hlsurl">
      <div id="video-content">
        <video 
          :id="'myvideo'+cameraId"
          class="video-js vjs-default-skin" 
          controls 
          preload="auto" 
          poster>
            <source 
              :src="hlsurl" 
              type="application/x-mpegURL">
        </video>
      </div>
    </template>
     <template v-if="!hlsurl">
       <img src="/public/images/warning.png"/><span>该设备暂无数据</span>
     </template>
  </div>
</template>

注意：在加载下一个的时候，必须先dispose，不然会一直加载。dispose销毁会将页面的代码一起销毁，因为直接重建会报错，所以需要通过js将代码添上去：

 var videoContent = document.getElementById("video-content");
                      videoContent.innerHTML = " <video id='myvideo"+this.videoId+"' \
                                            class='video-js vjs-default-skin' \
                                        controls \
                                        preload='auto' \
                                        poster> \
                                        <source \
                                            src='"+this.videoUrl+"' \
                                            type='application/x-mpegURL'> \
                                      </video>";

下面是完整的代码：

<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'

  export default {
    props:{
      hlsurl:"",
      cameraId:"",
      isChangeType:false,
    },
    data () {
      return {
        videoUrl:"",
        videoId:"",
        videoType:"", 
        videoPlayer:null,
        isVideoTypeChange:0,
      }
    },
    watch:{
      hlsurl: {
        immediate: true,
        handler (val) {
          this.videoUrl= val;
        }
      },
      cameraId: {
        immediate: true,
        handler (val) {
            this.videoId= val;
        }
      },
      isChangeType: {
        immediate: true, 
        handler (val) {            
            this.isVideoTypeChange = val;       
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
          this.$watch(function() {
            return {url: this.videoUrl, id: this.videoId,type:this.videoType}
          }, function(params) {
                if(this.videoUrl){
                    if(this.videoPlayer){
                      this.videoPlayer.pause()
                      this.videoPlayer.dispose(); 
                      var videoContent = document.getElementById("video-content");
                      videoContent.innerHTML = " <video id='myvideo"+this.videoId+"' \
                                            class='video-js vjs-default-skin' \
                                        controls \
                                        preload='auto' \
                                        poster> \
                                        <source \
                                            src='"+this.videoUrl+"' \
                                            type='application/x-mpegURL'> \
                                      </video>";            
                      var id = "myvideo"+this.videoId;
                      this.getVideo(id);
                    }else{                  
                        var id = "myvideo"+this.videoId;
                        this.getVideo(id);
                    }
                }  
          });
      });    
      var id = "myvideo"+this.videoId;
      this.getVideo(id);
    },
    methods: {
      getVideo(id){
         this.videoPlayer = videojs(id, {
                bigPlayButton: true,
                textTrackDisplay: false,
                posterImage: true,
                errorDisplay: false,
                controlBar: true
            }, function () {
                // this.play()
            })
        }
    },
    beforeDestroy:function(){
         this.videoPlayer.dispose();  
    },
  }