前端使用hls插件播放监控视频流

最新推荐文章于 2024-08-15 17:40:17 发布

把悲伤化作温柔

最新推荐文章于 2024-08-15 17:40:17 发布

阅读量611

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_54413072/article/details/136354111

版权

本文介绍了如何在Vue项目中通过npm安装并使用hls.js库来实现实时视频流的自动播放。代码展示了如何检测HLS支持性、加载M3U8URL、并监听MANIFEST_PARSED事件以启动视频播放。

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

1.安装hls

npm i hls -dev

2.具体实现代码

    <div class="test">
       <video id="player" controls="" autoplay muted ></video>
    </div>
</template>

<script>
export default{
    data(){
        return{
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        playVideo(videoSrc){
     if (Hls.isSupported()) {
    var video = document.getElementById("player");
    video.volume = 1.0;
    var hls = new Hls();
    var m3u8Url = decodeURIComponent(videoSrc);
    hls.loadSource(m3u8Url);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,()=>{
      video.play();
    });
  }
        }
    }
}
</script>
<style>
video{
    width:290px;
    height:190px
}
</style>