rtmp、hls流视频监控播放前端代码

最新推荐文章于 2024-10-29 17:27:10 发布

菜文姬

最新推荐文章于 2024-10-29 17:27:10 发布

阅读量756

点赞数

分类专栏：监控视频文章标签： vue.js html5

本文链接：https://blog.csdn.net/yuan20010401/article/details/113518803

版权

监控视频专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用h5页面结合video.js播放hls流视频，以及在vue框架下处理监控视频播放的方法，特别是针对hls流。同时提到了rtmp流视频的限制，它主要在IE或360浏览器中通过插件支持。

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

1、h5页面视频播放（引用video.js，适用hls流）

<!DOCTYPE html>
<html>
<head>
    <title>VideoLayerPlayer</title>
    <style type="text/css">
        html, body {
            background-color: #111;
            text-align: center;
        }
    </style>   
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
</head>
<body>
    <video id='myVideo' class='video-js vjs-default-skin vjs-big-play-centered' style="object-fit:fill">
        <source src="http://192.168.3.104:8765/hls/cctv1.m3u8" type="application/x-mpegURL" />
    </video>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<script type="text/javascript">
    var player = videojs('myVideo', {
        autoplay: true
    });
</script>
</html>

2、vue框架播放监控视频（hls流通过下载hls node包ref动态获取视频地址）

npm install --save hls.js


<video ref="videoRef" style="position:absolute;width:100%;height:100%;" autoplay loop muted controls></video>

<script>
import Hls from 'hls.js'; 

export default {
    data () {
        return {
            //
        }
    },
    mounted() {
      this.jiankong1();
    }，
    methods: {
    // 监控视频1
    jiankong1(){
      var hls = new Hls();
    //  console.log(hls)
      hls.loadSource('http://192.168.3.104:8765/hls3/cctv1.m3u8');
      hls.attachMedia(this.$refs.videoRef);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        this.$refs.videoRef.play();
      });
    },
}
</script>

3、rtmp流视频（只能IE浏览器或360浏览器打开安装插件）

rtmp只需嵌入监控视频地址即可通过ref或者byID利用js动态刷新视频