場景

Nginx搭建RTMP服務器+FFmpeg實現海康威視攝像頭預覽：

Nginx搭建RTMP服務器+FFmpeg實現海康威視攝像頭預覽_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基礎上實現Nginx搭建RTMP服務器，然后使用FFmpeg實現攝像頭推流。

最后使用VCL打開網絡串流的方式去進行攝像頭預覽。

如果要在前端Vue中去加載顯示視頻，怎么實現。

若依前后端分離版手把手教你本地搭建環(huán)境并運行項目：

若依前后端分離版手把手教你本地搭建環(huán)境并運行項目_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)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。