位置: IT常识 - 正文

关于vue播放flv,m3u8视频流(监控)的方法(vue播放器)

编辑:rootadmin
关于vue播放flv,m3u8视频流(监控)的方法

推荐整理分享关于vue播放flv,m3u8视频流(监控)的方法(vue播放器),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue播放hls,vue播放视频文件,vue播放器,vue播放视频,vue播放视频,vue-video-player,vue播放器,vue视屏播放插件,内容如对您有帮助,希望把文章链接给更多的朋友!

前文:随着前端大屏页面的逐渐壮大,客户的需求也越来越多,大屏上面展示的事物也越来越丰     富。其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8。

一、 JessibucaPlayer插件用来播放flv流

1.首先是先把文件放在vue项目的public下面

2.在index.html文件里面引入 index.js文件(直接引入即可)

 3.把封装好的JessibucaPlayer组件放到公共components

<template> <div class="jessibuca-player" style="width: 100%; height: 100%"> <div class="container" :id="id" ref="container"></div> </div></template><script>export default { name: "JessibucaPlayer", props: { videoUrl: { type: String, default: "" }, id: { type: Number, required: true } }, data() { return { jessibuca: null // jessibuca 实例化对象 }; }, methods: { init() { this.jessibuca = new window.Jessibuca({ container: document.getElementById(this.id), // 播放器容器,若为 string ,则底层调用的是 document.getElementById('id') videoBuffer: 0.2, // 设置最大缓冲时长,单位毫秒,播放器会自动消除延迟。 forceNoOffscreen: true, // 是否不使用离屏模式(提升渲染能力) hasAudio: false, // 是否有音频 rotate: 0, // 设置旋转角度,只支持,0(默认) ,180,270 三个值 isResize: false, // 1.当为true的时候:视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边;2.当为false的时候:视频画面完全填充canvas区域,画面会被拉伸 isFullSize: true, // 当为true的时候:视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 debug: false, // 是否开启控制台调试打印 timeout: 30, // 设置超时时长, 单位秒,在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件 supportDblclickFullscreen: true, // 是否支持屏幕的双击事件,触发全屏,取消全屏事件。 showBandwidth: false, // 是否显示网速 operateBtns: { // 配置功能 fullscreen: false, // 是否显示全屏按钮 screenshot: false, // 是否显示截图按钮 play: false, // 是否显示播放暂停按钮 audio: false // 是否显示声音按钮 }, keepScreenOn: false, // 开启屏幕常亮,在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。 isNotMute: false, // 是否开启声音,默认是关闭声音播放的。 loadingText: "加载中...", // 加载过程中文案。 background: "" // 背景图片。 }); // 事件: this.jessibuca_load() // 1. 监听 jessibuca 初始化事件。 this.jessibuca.on("load", () => { this.jessibuca_load()}); // 2. 信息,包含错误信息 this.jessibuca.on("log", data => this.jessibuca_log(data)); // 3. 触发暂停事件 this.jessibuca.on("pause", this.jessibuca_pause); // 4. 触发播放事件 this.jessibuca.on("play", this.jessibuca_play); // 5. 当前是否全屏 this.jessibuca.on("fullscreen", this.jessibuca_fullscreen); // 6. 触发声音事件,返回boolean值 this.jessibuca.on("mute", this.jessibuca_mute); // 7. 当解析出音频信息时回调 this.jessibuca.on("audioInfo", this.jessibuca_audioInfo); // 8. 当解析出视频信息时回调 this.jessibuca.on("videoInfo", this.jessibuca_videoInfo); // 9. 错误信息 this.jessibuca.on("error", this.jessibuca_error); // 10. 当设定的超时时间内无数据返回,则回调 this.jessibuca.on("timeout", this.jessibuca_timeout); // 11. 流状态统计,流开始播放后回调,每秒1次 this.jessibuca.on("start", this.jessibuca_start); // 12. 渲染性能统计,流开始播放后回调,每秒1次 this.jessibuca.on("performance", this.jessibuca_performance); // 13. 当前网速, 单位KB 每秒1次, this.jessibuca.on("kBps", this.jessibuca_kBps); }, // 事件: jessibuca_load() { // 监听 jessibuca 初始化事件。 console.log("on load"); console.log("module", this.videoUrl); this.methods_play(this.videoUrl); }, jessibuca_log(data) { // 信息,包含错误信息 console.log("on log", data); }, jessibuca_pause(flag) { // 触发暂停事件 console.log("on pause", flag); }, jessibuca_play(flag) { // 触发播放事件 console.log("on play", flag); }, jessibuca_fullscreen(flag) { // 当前是否全屏 console.log("on fullscreen", flag); if (flag) { let myEvent = new Event("resize"); setTimeout(() => { window.dispatchEvent(myEvent); }, 100); } }, jessibuca_mute(flag) { // 触发声音事件 console.log("on mute", flag); }, jessibuca_audioInfo(data) { // 当解析出音频信息时回调,2个回调参数 // 1. numOfChannels:声频通道 // 2. sampleRate 采样率 console.log("audioInfo", data); }, jessibuca_videoInfo(data) { // 当解析出视频信息时回调 // 1. w:视频宽 // 2. h:视频高 console.log("videoInfo", data); }, jessibuca_error(error) { // 错误信息 console.log("error:", error); }, jessibuca_timeout() { // 当设定的超时时间内无数据返回,则回调 console.log("timeout"); }, jessibuca_start(s) { // 流状态统计,流开始播放后回调,每秒1次 // 1. buf: 当前缓冲区时长,单位毫秒 // 2. fps: 当前视频帧率, // 3. abps: 当前音频码率,单位bit, // 4. vbps: 当前视频码率,单位bit, // 5. ts:当前视频帧pts,单位毫秒 // console.log('stats is', s); }, jessibuca_performance(performance) { // 渲染性能统计,流开始播放后回调,每秒1次。 // 0: 表示卡顿、1: 表示流畅、2: 表示非常流程 // console.log('performance', performance); }, jessibuca_kBps(kBps) { // 当前网速, 单位KB 每秒1次, // console.log('kBps', kBps); }, // 方法: methods_play(url) { // 播放 if (this.jessibuca.hasLoaded()) { this.jessibuca.play(url); } else { console.error("视频数据未加载完毕,请稍后操作"); } }, methods_mute() { // 静音 this.jessibuca.mute(); }, methods_cancelMute() { // 取消静音 this.jessibuca.cancelMute(); }, methods_pause() { // 暂停 this.jessibuca.pause(); }, methods_setVolume(volume) { // 设置音量 this.jessibuca.setVolume(volume); }, methods_setRotate(rotate) { // 设置旋转角度 0\180\270 this.jessibuca.setRotate(rotate); }, methods_destroy() { // 关闭视频,释放底层资源 if (this.jessibuca) { this.jessibuca.destroy(); } }, methods_fullscreen(flag) { // 全屏(取消全屏)播放视频 this.jessibuca.setFullscreen(flag); }, methods_screenShot() { // 截图 // 1. screenshot(filename, format, quality) // 2. {string} filename、 {string} format、{number} quality // 3.filename: 保存的文件名, 默认 时间戳、format : 截图的格式,可选png或jpeg或者webp ,默认 png、quality: 可选参数,当格式是jpeg或者webp时,压缩质量,取值0 ~ 1 ,默认 0.92 this.jessibuca.screenshot(); }, methods_setBufferTime(time) { // 设置最大缓冲时长,单位秒,播放器会自动消除延迟。 // {number} time this.jessibuca.setBufferTime(Number(time)); }, methods_setScaleMode(mode) { // 设置播放器填充 // 1. 0 视频画面完全填充canvas区域,画面会被拉伸 等同于参数 isResize 为false // 2. 1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 isResize 为true // 3. 2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 isFullSize 为true this.jessibuca.setScaleMode(Number(mode)); }, restartPlay() { // 重新加载 this.methods_destroy(); this.methods_play(this.videoUrl); } }, mounted() { this.init(); window.onerror = msg => (this.err = msg); }, beforeDestroy() { if (this.jessibuca) this.jessibuca.destroy(); }};</script><style>@import url("./JessibucaPlayer.css");</style>

 4.最后再自己用到的文件里面 引入组件即可

关于vue播放flv,m3u8视频流(监控)的方法(vue播放器)

 如有想要文件的请私聊

二、easyplayer插件播放m3u8流

教程:

1.首先npm安装EasyPlayer、copy-webpack-pluginps:copy-webpack-plugin版本一定一定一定不能大于6.0,否则会报错。

npm install @easydarwin/easyplayer --save npm install copy-webpack-plugin@5.1.2 --save-dev

2.最重要的地方 一定要把这个地方弄好 那就是在vue.config.js里面

const CopyWebpackPlugin = require('copy-webpack-plugin')configureWebpack: { plugins:[ new CopyWebpackPlugin([ { from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf', to: './libs/EasyPlayer/' }, { from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml', to: './libs/EasyPlayer/' }, { from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js', to: './libs/EasyPlayer/' } ]) ]}

3.还需要在public/index.html 引入EasyPlayer-lib.min.js,可以直接在node_modules里找到@easydarwin下的dist/compent/EasyPlayer-lib.min.js复制到pubilc目录下,还有需要EasyPlayer.wasm同样放到public目录下

 4.引入组件使用

 最后效果

本文链接地址:https://www.jiuchutong.com/zhishi/269638.html 转载请保留说明!

上一篇:DHCP安全维护范围(dhcp的安全防范)

下一篇:怎么解决Win7关闭锁屏不起作用?(win7如何取消关机)

  • 快手怎么换收款账户(快手小店收款方式怎么改)

    快手怎么换收款账户(快手小店收款方式怎么改)

  • 华为nova5怎么更换应用图标(华为nova5怎么更改锁屏密码)

    华为nova5怎么更换应用图标(华为nova5怎么更改锁屏密码)

  • WPS的分页符怎么去掉(wps的分页符怎么显示出来)

    WPS的分页符怎么去掉(wps的分页符怎么显示出来)

  • 三星s10+发热严重(三星s10+发热严重怎么办)

    三星s10+发热严重(三星s10+发热严重怎么办)

  • 苹果手表出现lowbattery是什么意思(苹果新款手表)

    苹果手表出现lowbattery是什么意思(苹果新款手表)

  • 闲鱼擦亮和重发的区别(闲鱼上擦亮和重新发布有啥区别)

    闲鱼擦亮和重发的区别(闲鱼上擦亮和重新发布有啥区别)

  • 为什么陌生号码打不进来电话(为什么陌生号码打电话打不进来)

    为什么陌生号码打不进来电话(为什么陌生号码打电话打不进来)

  • ipad6代多少寸	(ipad6代是几寸)

    ipad6代多少寸 (ipad6代是几寸)

  • 截图用什么快捷键(截图哪个快捷键)

    截图用什么快捷键(截图哪个快捷键)

  • h5页面是什么意思(什么是h5页面设计)

    h5页面是什么意思(什么是h5页面设计)

  • 苹果7plus打电话没有免提功能是怎么了(苹果7plus打电话没声音免提无法打开)

    苹果7plus打电话没有免提功能是怎么了(苹果7plus打电话没声音免提无法打开)

  • iPhone8p长度(苹果8p手机的长度)

    iPhone8p长度(苹果8p手机的长度)

  • 拉黑买家评价还会生效吗(拉黑卖家还能评价吗)

    拉黑买家评价还会生效吗(拉黑卖家还能评价吗)

  • 微信怎么发送定位(微信怎么发送定时朋友圈)

    微信怎么发送定位(微信怎么发送定时朋友圈)

  • lgg7支持多少w快充(lgg7支持什么快充协议)

    lgg7支持多少w快充(lgg7支持什么快充协议)

  • nova6充电器多少瓦(nova6原装充电器多少w)

    nova6充电器多少瓦(nova6原装充电器多少w)

  • 华为手表ftn b19有什么功能(华为手表ftnb19表带多宽)

    华为手表ftn b19有什么功能(华为手表ftnb19表带多宽)

  • 辅助触控怎么设置(辅助触控怎么设置返回)

    辅助触控怎么设置(辅助触控怎么设置返回)

  • qq文件过期怎么恢复(qq文件过期怎么下载)

    qq文件过期怎么恢复(qq文件过期怎么下载)

  • 为啥快手一开直播就闪退(为啥快手一开直播就黑屏)

    为啥快手一开直播就闪退(为啥快手一开直播就黑屏)

  • 快手怎么链接淘宝店铺(快手怎么连接淘宝卖货)

    快手怎么链接淘宝店铺(快手怎么连接淘宝卖货)

  • iphone8连不上4g网络(苹果8无法连接4g网络)

    iphone8连不上4g网络(苹果8无法连接4g网络)

  • 外接硬盘读不出来(外接硬盘读不出来怎么解决)

    外接硬盘读不出来(外接硬盘读不出来怎么解决)

  • 一加有没有语音助手(一加有没有语音唤醒功能啊?)

    一加有没有语音助手(一加有没有语音唤醒功能啊?)

  • 在Win7中,怎么查看已连接wifi密码?(在win7中怎么安转只兼容win10的软件)

    在Win7中,怎么查看已连接wifi密码?(在win7中怎么安转只兼容win10的软件)

  • Windows 10桌面声音图标不见了怎么办(win10声音设置面板在哪)

    Windows 10桌面声音图标不见了怎么办(win10声音设置面板在哪)

  • Win11更新卡在开机界面怎么办?解决Win11更新卡在开机界面的办法(win11更新卡主)

    Win11更新卡在开机界面怎么办?解决Win11更新卡在开机界面的办法(win11更新卡主)

  • jed命令  编辑文本文件(jedis命令)

    jed命令 编辑文本文件(jedis命令)

  • for循环语法(for循环语法结构是什么)

    for循环语法(for循环语法结构是什么)

  • 发生无偿赠与行为怎么办
  • 小规模销售收入免税会计分录
  • 开淘宝店怎么做账
  • 进口产品销售需要什么资质
  • 资产负债表月报期末余额怎么填
  • 税局函调准备哪些资料
  • 小规模纳税人增值税优惠政策2023
  • 合同成本在哪个科目列支
  • 增值税小规模纳税人起征点
  • 红冲发票跨年怎么操作
  • 财产转让所得的纳税义务发生时间
  • 债务清偿如何进行税务处理
  • 缴纳个税和社保
  • 出口样品收汇不报关会计分录
  • 现金收据为什么也在自制原始凭证的范畴呢?
  • 工薪个人所得税扣除
  • 网络信息化服务中心是干嘛的
  • 发票签收单怎么填
  • 跨区域施工增值税怎么交
  • 工会经费减除项填什么
  • 对于甲供工程,施工方销售额不包括建设方提供的材料款。那么该销售额是否包括设备及动力款?
  • 入职不满一年有年假吗
  • 增值税申报尾差怎么做账
  • 可供出售金融资产是指什么
  • 加盟费是一年一收还是终身的
  • 红字发票信息表是销方还是购方开
  • 稿酬所得怎么纳税
  • Mac SIP系统完整性保护开启及关闭的方法介绍
  • 如何挽留婚姻危机
  • 坏账准备的会计科目
  • 结转商品的成本的会计分录
  • uniapp如何使用
  • php中常见的错误类型有
  • 若依框架前端如何通过后端加载页面
  • win11升级正式版
  • 金蝶 账无忧 使用说明
  • 城市公交网
  • vue组件入门
  • 超参数有哪些调优方法
  • 视频制作发票属于什么经营范围
  • 企业应采用
  • 其他综合收益是利润表项目吗
  • 企业利润表列报项目有哪些
  • python中mktime函数
  • 帝国cms界面
  • python apriori算法
  • 小规模纳税人减免增值税会计处理
  • 商家下单
  • 收据和发票有什么用
  • 买房的社保指的是什么
  • 同在一个单位
  • 会计上需要结转的科目
  • 制造费用折旧费编码
  • 可交换债券发行方的会计处理
  • 日记账怎么设置
  • 私企干不长久
  • 正版vista一键升级win7
  • 在linux操作系统中
  • fpt.exe
  • centos 做bond
  • 扫描仪在哪儿
  • 打开word显示
  • windows7更新补丁后蓝屏
  • cocos2dx4.0入门
  • cocos2dx openGL
  • unity3d bim
  • 用javascript写表单代码
  • vue复用node_module
  • jquery中ajax处理跨域的三大方式
  • javascript如何学
  • jquery技巧
  • jquery.css
  • javascript函数如何定义及其作用
  • python安装心得
  • js使用类
  • 中国的外籍
  • 民办幼儿园属于民营企业吗
  • 航信开的电子发票怎么导出来
  • 内蒙民生认证系统
  • 房屋契税交错了能退吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设