vlc播放rtsp视频流

最新推荐文章于 2024-05-02 11:57:14 发布

小菜花29

最新推荐文章于 2024-05-02 11:57:14 发布

阅读量884

点赞数 9

文章标签：前端音视频

本文链接：https://blog.csdn.net/jinse29/article/details/135625692

版权

本文介绍了如何在网页项目中使用HTMLobject标签内嵌VLC播放器来实现实时RTSP视频流，包括对象标签配置和初始化视频播放的JavaScript代码示例，以及相关文档链接。

摘要由CSDN通过智能技术生成

简单记录一下项目中用到的浏览器内嵌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