vue中播放m3u8格式实时监控画面（取流）--调用后端接口

实现目标：点击按钮，出现弹窗，弹窗中为m3u8格式的监控实时画面。

实现效果：

1.index.html文件中：

<!-- 取流 --><link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script><script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>

2.安装：

cnpm install --save video.js

cnpm install --save videojs-contrib-hls

3.main.js文件中引入相关样式（样式可修改）：

import 'video.js/dist/video-js.css'

4.相应的vue文件中：

import videojs from "video.js";
import "videojs-contrib-hls";

弹窗样式（template中）：

<el-dialogtitle="预  览":visible.sync="dialogVisible"width="35%"class="video-box"><videoid="myVideo"class="video-js vjs-default-skin vjs-big-play-centered"controlspreload="auto"width="600"height="330"data-setup="{}"><source id="source" :src="srcPath" type="application/x-mpegURL" /></video><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">确   定</el-button></span></el-dialog>

点击出现弹窗的按钮样式（template 中）：

<template slot-scope="scope"><el-buttonsize="mini"type="primary"@click="preview(scope.row.cameraIndexCode)"title="预览">预览</el-button></template>

methods中：

preview(cameraIndexCode) {this.dialogVisible = true;this.srcPath = "";this.indexCodeCamera = cameraIndexCode;let param = {cameraIndexCode: this.indexCodeCamera};// 获取摄影监控实时画面--调用接口videoPreview(param).then((res) => {if (res.status == 200) {this.srcPath = res.data.data.url;setTimeout(() => {if (myVideo) {myVideo.src(this.srcPath);myVideo.play();} else {myVideo = videojs("myVideo", {bigPlayButton: true,textTrackDisplay: false,posterImage: false,errorDisplay: false,});myVideo.src(this.srcPath);myVideo.play();}// myVideo.pause();});} else {this.$message.warning("请稍后再试");}});}

后端的swagger中：

vue中播放m3u8格式实时监控画面（取流）--调用后端接口相关推荐

第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法
一.m3u8文件第一次接触这种m3u8格式的视频文件,开始以为类似与.mp4这种,所以在项目中我通过html5提供的video标签做播放功能发现并不能成功,后来了解到M3U8文件是一种UTF-8编码 ...
vue中使用海康实时监控详细代码
第一步:下载海康的js包,并在html中引入: 第二步:在相应的页面中开始编写,具体代码如下: <template><el-container><el-aside wid ...
vue中播放flv格式视频（b站flv.js的使用）
1.下载flv.js npm install --save flv.js 2.引用 import flvjs from 'flv.js/dist/flv.min.js' 完整代码 <templa ...
Windows上搭建rtsp-simple-server流媒体服务器实现rtsp、rtmp等推流以及转流、前端html与Vue中播放hls(m3u8)视频流
场景 Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流: Nginx-http-flv-module流媒体服务器搭建 ...
vue项目兼容m3u8格式视频，h5的Android播放异常
需求:h5项目中(app内嵌页面)和b端管理系统需要兼容m3u8格式的视频在h5页面的ios端不需要适配,苹果自动做出了兼容一.问题(h5的android) 1.百度的方法:默认引入的vue-vi ...
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api
目前主流浏览器不能直接嵌入并且播放FLV文件,所以直接用video标签播放是行不通的. 因此提供两种解析方法嵌入一个swf媒体播放文件,并利用该文件来播放你预设的文件. 这里推荐dplayer--h ...
androidTV在html中集成饺子播放器并播放m3u8格式视频
饺子播放器的默认引擎是MediaPlayer,只能播放一些常见格式的视频.想要播放m3u8格式,需要切换引擎 jzvdStd.setUp("http://youku.cdn-iqiyi.co ...
h5播放m3u8格式视频流
h5播m3u8格式视频流在微信公众号的某个页面接入监控视频(.m3u8格式的),需求相对简单,能够播放就可以,之前没有处理过mp4格式外的视频文件,记录一下: ###1.使用video.js来播放 ...

vue中播放m3u8格式实时监控画面（取流）--调用后端接口

vue中播放m3u8格式实时监控画面（取流）--调用后端接口相关推荐

最新文章

热门文章