vlc播放rtsp视频流

简单记录一下项目中用到的浏览器内嵌vlc播放rtsp视频流

首先使用object标签，关于object标签的介绍，放一张图

页面设置

 <object class="vlc-box" ref="vlc" type="application/x-vlc-plugin"
                windowless="true"
                pluginspage="rtsp://admin:jxd123456@192.168.14.69:554/Streaming/Channels/101"
        />

初始化视频播放

// 初始化vlc视频
    initVlcVideo() {
      this.$nextTick(() => {
        // const mrl = 'rtsp://admin:jxd123456@192.168.14.69:554/Streaming/Channels/101';
        if (this.mrl !== '') {
          console.log(this.mrl, 'init');
          const vlc = this.$refs.vlc;
          vlc.playlist.clear();
          vlc.playlist.add(this.mrl);
          vlc.playlist.play();
        } else {
          const vlc = this.$refs.vlc;
          vlc.playlist.clear();
        }
      });
    },

放一个vlc配合<object>使用的文档链接：Documentation:WebPlugin - VideoLAN Wiki