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

分手后的思念是犯贱 2022-09-11 05:24 222阅读 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 条评论，222人围观）

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

相关阅读

相关 unity播放实时视频流

安防行业经常需要手机app能够查看实时的rtsp流或rtmp流。 unity自带的VideoPlayer插件只能播放视频文件(videoclip)，无法播放实时视频流。要

阳光穿透心脏的1/2处/ 2024年03月27日 13:53/ 0 赞/ 100 阅读

相关视频流学习笔记

一直困惑于流媒体、视频流，总是听说NVR、拉流、推流、以及视频的播放是怎么一个原理，今天就来总结记录一下。一、过去视频发展不成熟以及互联网发展不成熟的情景下，都是客户端直接

矫情吗；*/ 2023年10月01日 00:17/ 0 赞/ 3 阅读

相关 H5播放视频流

代码 <html> <head> <title>视频直播</title> <meta charset="utf-8">

浅浅的花香味﹌/ 2023年01月22日 11:55/ 0 赞/ 271 阅读

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

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

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

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

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

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

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

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

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

相关流媒体与直播技术学习笔记

https://zhuanlan.zhihu.com/p/22221170?refer=c\_46929389 ![流媒体与直播技术学习笔

港控/mmm°/ 2022年06月13日 12:56/ 0 赞/ 204 阅读

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

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

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

相关视频播放_笔记

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

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

相关视频监控播放（UIKit ）

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

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