学习笔记——Vue中播放直播流（监控视频）

分手后的思念是犯贱 2022-09-11 05:24 180阅读 0赞

> Vue项目中需要播放监控视频或者直播。

--------------------

### 1.npm下载包 ###

npm i video.js
    npm i videojs-contrib-hls

### 2.引入包 ###

import "video.js/dist/video-js.css";
    import videojs from "video.js";
    import "videojs-contrib-hls";

### 3.使用包 ###

<video class="videoItem video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
           id="rightvideos"
           autoplay
           muted
           src="直播流地址，类似hls"
           poster="未播放直播流，播放器的封面"
    ></video>

// nextTick让代码在DOM更新后执行
          this.$nextTick(() => {
            this.airPlayer = videojs("video标签的id", {
              controls: true, //控件显示
              autoplay: true, //自动播放
              preload: "auto",
              bigPlayButton: true,
              errorDisplay: true,
              controlBar: true,
              hls: true,
            });
            setTimeout(() => {
              this.airPlayer.src({
                src: "直播流地址",
                type: "application/x-mpegURL",
              });
              this.airPlayer.play();
            }, 200);
          });
    
          // 如果退出播放所在页面，或者播放另一个监控视频
          // 最好使用this.airPlayer.dispose()来将当前直播流注销掉

> 如果使用uni-app框架来做，其中的video组件就直接可以播放直播流。

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关实现监控视频RTSP流在网页中低延时播放

1.行业痛点随着平安城市、平安社区、雪亮工程等应用在全国范围的开展，安防视频监控系统得到了大面积使用。传统的安防应用场景中，监控终端和平台管理端都通过C/S模式实现监

超、凢脫俗/ 2023年10月15日 10:26/ 0 赞/ 98 阅读

相关 HTML5的GB/T28181协议监控视频直播 web播放网页播放 H5播放

采用GB/T28181协议的监控视频直播系统中，由于GB/T 28181媒体流无法在Web页面中通过Flash插件或HTML5<audio>和<video>标签进行直接播放，故

冷不防/ 2023年10月13日 23:07/ 0 赞/ 144 阅读

相关 html5中播放rtsp流实现监控、直播等方案

浏览器网页上播放建筑工地摄像头监控的画面，如工地出入口通道画面、塔吊可视化，并且可兼容不同型号的摄像头设备。由于摄像头大多都是通过 RTSP 协议传输视频流的，而HTML

喜欢ヅ旅行/ 2023年10月13日 13:22/ 0 赞/ 35 阅读

相关监控视频web播放方案

直播目前直播的技术方案一般是：把RTSP流转成RTMP流推到RTMP流媒体服务器上，浏览器请求RTMP流开始播放。 RTMP是Adobe公司推出的格式，视频格式是f

超、凢脫俗/ 2023年10月13日 08:42/ 0 赞/ 12 阅读

相关移动端H5播放直播流m38u视频

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></t

蔚落/ 2022年12月16日 13:19/ 0 赞/ 135 阅读

相关 vue 播放rtmp 直播拉流视频

一、写插件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

红太狼/ 2022年10月24日 11:49/ 0 赞/ 1215 阅读

相关学习笔记——Vue中播放直播流（监控视频）

> Vue项目中需要播放监控视频或者直播。 -------------------- 1.npm下载包 npm i video.js npm i vi

分手后的思念是犯贱/ 2022年09月11日 05:24/ 0 赞/ 181 阅读

相关实时监控、直播流、流媒体、视频网站开发方案设计简要

一、本地推送端 1、本地：采用javaCV（安卓和java平台推荐javaCV）、ffmpeg、openCV或者jmf可以很方便的获取到本地摄像头流媒体 javaCV

心已赠人/ 2022年06月06日 02:14/ 0 赞/ 189 阅读

相关视频播放_笔记

1.FFPlay是一个使用了 ffmpeg 和 sdl 库的、一个简单的可移植的媒体播放器 [http://www.cnblogs.com/bingqili/p/591902

àì夳堔傛蜴生んèń/ 2022年04月01日 05:48/ 0 赞/ 347 阅读

相关视频监控播放（UIKit ）

超简单，直接上代码： <!DOCTYPE html> <html> <!-- UIKit Javascript 说明：

拼搏现实的明天。/ 2022年02月13日 15:41/ 0 赞/ 390 阅读