场景

Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览：

Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基础上实现Nginx搭建RTMP服务器，然后使用FFmpeg实现摄像头推流。

最后使用VCL打开网络串流的方式去进行摄像头预览。

如果要在前端Vue中去加载显示视频，怎么实现。

若依前后端分离版手把手教你本地搭建环境并运行项目：

若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面搭建起来项目的基础上去实现。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、安装video.js相关依赖

npm install --save video.js

npm install --save videojs-contrib-hls

2、在需要播放视频的页面引入video.js相关的对象和css文件

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

3、页面播放视频的元素控件

<videoid="my-video"class="video-js vjs-default-skin"controlspreload="auto"width="500px"><sourcesrc="http://127.0.0.1:81/hls/badao.m3u8"type="application/x-mpegURL"/></video>

注意这里的id属性，后面要用到。

然后这里的src属性对应上面使用VCL播放时的网络串流地址。

4、页面加载完成之后设置6秒的延迟播放视频

  mounted() {let _that = this;setTimeout(() => {_that.getVideo();}, 6000);},

这里如果不设置延迟播放的话会提示:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

5、播放视频的具体实现方法

  methods: {getVideo() {videojs("my-video",{bigPlayButton: false,textTrackDisplay: false,posterImage: true,errorDisplay: false,controlBar: true,},function () {this.play();});},},

6、页面完整代码


<template><div class="component-upload-image"><videoid="my-video"class="video-js vjs-default-skin"controlspreload="auto"width="500px"><sourcesrc="http://127.0.0.1:81/hls/badao.m3u8"type="application/x-mpegURL"/></video></div>
</template>
<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls";export default {components: {},name: "m3u8Play",data() {return {};},mounted() {let _that = this;setTimeout(() => {_that.getVideo();}, 6000);},methods: {getVideo() {videojs("my-video",{bigPlayButton: false,textTrackDisplay: false,posterImage: true,errorDisplay: false,controlBar: true,},function () {this.play();});},},watch: {},
};
</script><style scoped lang="scss">
</style>

7、效果

Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)相关推荐

Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
vue+video.js播放.m3u8地址视频
使用的包 "video.js": "^7.6.6", "videojs-contrib-hls": "^5.15.0", ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
vue中使用video.js 播放m3u8直播流
需求描述支持播放m3u8直播流 + 录屏视频:同时可以动态更改视频直播地址,新增,删除视频. 实现效果实现代码安装依赖 npm install video.js --save // 视频播放器 ...
videojs 卡顿_流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了...
总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播播放器:VideoJs 直播: 1.阿里云直播,需要CDN设置HTTP头 2.本地直播需要设置直播访问服务器 ...
video.js播放m3u8视频
m3u8 是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率先提出的 HLS 协议在 ...
H5视频之video.js播放m3u8
最近接触了这一块,简单说下吧. m3u8 是一种基于 HTTP Live Streaming 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率 ...
Video.js 播放m3u8直播流
谷歌浏览器全面禁止flash导致直播流无法播放, 通过video.js结合videojs-contrib-hls实现播放m3u8直播流粘贴到html打开即可 <!DOCTYPE html> ...
使用hls.js播放m3u8视频流
1.安装hls.js npm install hls.js -S 2.使用 <template><div class="video_con"><vid ...

Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)

场景

实现

Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)相关推荐

最新文章

热门文章