vue实现flv格式视频播放

公司项目需要实现摄像头实时视频播放,flv格式的视频。先百度使用flv.js插件实现,但是两个摄像头一个能放一个不能放,没有找到原因。(开始两个都能放,后端更改地址后不有一个不能放)但是在另一个系统上是可以播放的。使用的是jessibuca.js

jessibuca.js实现视频播放

1、下载jessibuca.js包

在这里插入图片描述
这三个文件需要直接放到public文件夹里,不能在添加文件夹放置。

2、创建VideoPlayer.vue文件

<template><div id="container" ref="container"></div>
</template>
<script>
export default {name: 'DemoPlayer',props: {videoUrl: {type: String,default: ''}},data() {return {jessibuca: null,version: '',wasm: false,vc: 'ff',playing: false,quieting: true,loaded: false, // muteshowOperateBtns: false,showBandwidth: false,err: '',speed: 0,performance: '',volume: 1,rotate: 0,useWCS: false,useMSE: true,useOffscreen: false,recording: false,recordType: 'webm',scale: 0}},mounted() {this.create()window.onerror = (msg) => (this.err = msg)},unmounted() {this.jessibuca.destroy()},methods: {create(options) {options = options || {}this.jessibuca = new window.Jessibuca(Object.assign({container: this.$refs.container,videoBuffer: 0.2, // Number(this.$refs.buffer.value), // 缓存时长isResize: false,useWCS: this.useWCS,useMSE: this.useMSE,text: '',// background: "bg.jpg",loadingText: '疯狂加载中...',// hasAudio:false,debug: true,supportDblclickFullscreen: true,showBandwidth: this.showBandwidth, // 显示网速operateBtns: {fullscreen: this.showOperateBtns,screenshot: this.showOperateBtns,play: this.showOperateBtns,audio: this.showOperateBtns},vod: this.vod,forceNoOffscreen: !this.useOffscreen,isNotMute: true,timeout: 10},options))var _this = thisthis.jessibuca.on('pause', function () {console.log('on pause')_this.playing = false})this.jessibuca.on('play', function () {console.log('on play')_this.playing = true})this.jessibuca.on('mute', function (msg) {console.log('on mute', msg)_this.quieting = msg})this.jessibuca.on('error', function (error) {console.log('error', error)})this.jessibuca.on('performance', function (performance) {var show = '卡顿'if (performance === 2) {show = '非常流畅'} else if (performance === 1) {show = '流畅'}_this.performance = show})this.jessibuca.on('play', () => {this.playing = truethis.loaded = truethis.quieting = this.jessibuca.isMute()})},play(videoUrl) {if (videoUrl) {this.jessibuca.play(videoUrl)} else {// this.$message.error('播放地址出错')this.destroy()}},mute() {this.jessibuca.mute()},cancelMute() {this.jessibuca.cancelMute()},pause() {this.jessibuca.pause()this.playing = falsethis.err = ''this.performance = ''},destroy() {if (this.jessibuca) {this.jessibuca.destroy()}this.create()this.playing = falsethis.loaded = falsethis.performance = ''}}
}
</script>
<style>
#container {background: rgba(13, 14, 27, 0.7);width: 100%;height: 100%;
}
</style>

3、使用组件

  1. 引入
import VideoPlayer from '@/components/VideoPlayer.vue'
  1. 使用
<VideoPlayer ref="VideoPlayer"></VideoPlayer>
  1. 播放
let url = 'http://182.150.58.94:15280/rtp/44010200492000000001_34020000001320000110.flv'
this.$refs.VideoPlayer.play(url)

效果

在这里插入图片描述

参考文档:

jessibuca-api-文档
参考官方实例 jessibuca-vue-demo

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/10630.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Blocking Analyzer 1.5 For MySQL 8.0

快速获取MySQL 8.0的blocking信息 1&#xff09;super_read_only 2&#xff09;read_only 3&#xff09;innodb lock waits 4&#xff09;schema table lock waits 5&#xff09;data lock waits 6&#xff09;metadata locks 7&#xff09;data locks 通过以上信息快速…

wangEditor初探

1、前言 现有的Quill比较简单&#xff0c;无法满足业务需求&#xff08;例如SEO的图片属性编辑需求&#xff09; Quill已经有比较长的时间没有更新了&#xff0c;虽然很灵活&#xff0c;但是官方demo都没有一个。 业务前期也没有这块的需求&#xff0c;也没有考虑到这块的扩展…

Xilinx P4使用方法--架构篇

Xilinx P4使用方法--架构篇 1 P4 IP架构2 P4接口说明3 P4使用方法3.1 P4程序3.2 命令文件3.3 数据流文件本文主要介绍Xilinx P4的基本架构、接口和仿真测试文件。 1 P4 IP架构 P4 IP的架构如下图所示,主要由解析器(Parser)、匹配-动作引擎(Match-Action Engine)、逆解析器(De…

接口自动化测试-Python+Requests+Pytest+YAML+Allure配套撸码(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 接口自动化框架&a…

[Java] 观察者模式简述

模式定义&#xff1a;定义了对象之间的一对多依赖&#xff0c;让多个观察者对象同时监听某一个主题对象&#xff0c;当主题对象发生变化时&#xff0c;他的所有依赖者都会收到通知并且更新 依照这个图&#xff0c;简单的写一个代码 package Section1.listener;import java.ut…

前端程序员入门:先学Vue3还是Vue2?

一、前言 对于新手来说&#xff0c;学习Vue.js框架时往往会有这样一个疑问&#xff1a;应该先学习Vue2还是直接学习Vue3&#xff1f;在回答这个问题之前&#xff0c;我们先简单介绍一下Vue.js框架。 Vue.js是一个轻量级的MVVM(Model-View-ViewModel)框架&#xff0c;它以数据驱…

el-table表格自动滚动

实现效果如下&#xff1a; 功能点&#xff1a; 1. 当表格内容超出时&#xff0c;自动滚动&#xff0c;滚动到最后一条之后在从头滚动。 2. 表格中的数据会定时刷新&#xff0c;刷新后数据更新。 3. 鼠标移入表格中&#xff0c;停止滚动&#xff1b;移出后&#xff0c;继续滚…

nginx几种常见的负载均衡策略

在服务器集群中&#xff0c;Nginx起到一个代理服务器的角色&#xff08;即反向代理&#xff09;&#xff0c;为了避免单独一个服务器压力过大&#xff0c;将来自用户的请求转发给不同的服务器。 根据权重负载均衡 指定轮询几率&#xff0c;weight和访问比率成正比&#xff0c…

算法训练营第四十九天||● 121. 买卖股票的最佳时机 ● 122.买卖股票的最佳时机II

● 121. 买卖股票的最佳时机 暴力和贪心都可以解决 主要讲解动态规划 dp数组&#xff1a;我们把dp数组定义为一个二维的vector容器 dp[i][0]表示第i天持有股票手中的金额&#xff1a;它可以是当天买入的也可以是之前买入的 dp[i][1]表示第i天不持有股票手中的金额&#xf…

VXLAN集中式网关部署(静态方式)

目录 1. 网络拓扑1.1 配置思路1.2 数据准备2. 配置Underlay网络2.1 配置CE12.2 配置CE22.3 配置CE32.4 查看OSPF结果2.5 配置LSW12.6 配置LSW23. 配置Overlay网络二层互通(同网段)3.1 配置CE13.2 配置CE23.3 配置CE33.4 Server13.5 Server23.6 Server33.7 Server43.8 抓包分析…

Kafka入门到起飞系列 - 副本机制,什么是副本因子呢?

我们一直在讲一个主题会有多个分区&#xff0c;这多个分区可以分布在一台服务器上&#xff0c;也可以分布在多台服务器上&#xff0c;还可以增加分区&#xff08;Kafka目前只支持分区&#xff09;&#xff0c;这是Kafka提供的一种横向扩展的手段 比如我们创建了一个主题&#x…

YAML+PyYAML笔记 2 | YAML缩进、分离、注释简单使用

2 | YAML缩进、分离、注释简单使用 1 简介2 缩进3 分离4 多行文本4.1 折叠块4.2 字面块4.3 引用块 5 注释5.1 行内注释5.2 块注释5.3 完美注释示例 1 简介 YAML 不是一种标记语言&#xff0c;而是一种数据格式&#xff1b;使用缩进和分离来表示数据结构&#xff0c;不需要使用…

与 ChatGPT 进行有效交互的几种策略

在这篇文章中&#xff0c;您将了解即时工程。尤其&#xff0c; 如何在提示中提供对响应影响最大的信息什么是角色、正面和负面提示、零样本提示等如何迭代使用提示来利用 ChatGPT 的对话性质 废话不多说直接开始吧&#xff01;&#xff01;&#xff01; 提示原则 快速工程是有…

Safari 查看 http 请求

文章目录 1、开启 Safari 开发菜单2、显示 JavaScript 控制台 1、开启 Safari 开发菜单 Safari 设置中&#xff0c;打开开发菜单选项 *** 选择完成后&#xff0c;Safari 的目录栏就会出现一个 开发 功能。 2、显示 JavaScript 控制台 开启页面后&#xff0c;在开发中选中 显…

【Linux后端服务器开发】数据链路层

目录 一、以太网 二、MAC地址 三、MTU 四、ARP协议 一、以太网 “以太网”不是一种具体的网路&#xff0c;而是一种技术标准&#xff1a;既包含了数据链路层的内容&#xff0c;也包含了一些物理层的内容&#xff0c;例如&#xff1a;规定了网络拓扑结构、访问控制方式、传…

@Bean的作用

Bean通常和Configuration注解一起使用 Bean可以用在方法上&#xff0c;方法返回的对象交给spring容器管理&#xff0c;和提供给其他程序组件使用 Bean是一个注解&#xff0c;用于将方法标记为Spring容器中的一个Bean。具体来说&#xff0c;Bean注解可以用于方法上&#xff0c…

Android 在程序运行时申请权限——以自动拨打电话为例

Android 6.0及以上系统在使用危险权限时必须进行运行时权限处理。 main_activity.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://sche…

Git 绑定账号 和clone

一:环境: 下载安装完成Git,在桌面或文件夹下(在你将要保存代码的位置)右击可以看到Git Bash Here,点击可以进入黑窗口 二:配置公钥 1.查看当前状态(如果已绑定,且知道密码可以登陆,可以直接获取SSH公钥并配置即可拉取代码) git config --list 2.配置全局git用户名和邮箱 …

使用Python搭建代理服务器- 爬虫代理服务器详细指南

搭建一个Python爬虫代理服务器可以让你更方便地管理和使用代理IP。下面是一个详细的教程来帮助你搭建一个简单的Python爬虫代理服务器&#xff1a; 1. 首先&#xff0c;确保你已经安装了Python。你可以在官方网站(https://www.python.org/)下载并安装最新版本的Python。 2. 安…

c#中的Math.Ceiling和Math.floor()和Math.Round()

Math.Ceiling(),只要有小数就加1(小数部分不为0&#xff09; 例如&#xff1a; Math.Ceiling(0.0) -> 0 Math.Ceiling(0.1) -> 1 Math.Ceiling(0.2) -> 1 Math.Ceiling(0.3) -> 1 Math.Ceiling(0.4) -> 1 Math.Ceiling(0.5) -> 1 Math.Ceiling(0.6) -> 1…