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

2023-4-19    前端达人

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

一、 JessibucaPlayer插件用来播放flv流

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

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

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


  1. <template>
  2. <div class="jessibuca-player" style="width: 100%; height: 100%">
  3. <div class="container" :id="id" ref="container"></div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: "JessibucaPlayer",
  9. props: {
  10. videoUrl: {
  11. type: String,
  12. default: ""
  13. },
  14. id: {
  15. type: Number,
  16. required: true
  17. }
  18. },
  19. data() {
  20. return {
  21. jessibuca: null // jessibuca 实例化对象
  22. };
  23. },
  24. methods: {
  25. init() {
  26. this.jessibuca = new window.Jessibuca({
  27. container: document.getElementById(this.id), // 播放器容器,若为 string ,则底层调用的是 document.getElementById('id')
  28. videoBuffer: 0.2, // 设置最大缓冲时长,单位毫秒,播放器会自动消除延迟。
  29. forceNoOffscreen: true, // 是否不使用离屏模式(提升渲染能力)
  30. hasAudio: false, // 是否有音频
  31. rotate: 0, // 设置旋转角度,只支持,0(默认) ,180,270 三个值
  32. isResize: false, // 1.当为true的时候:视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边;2.当为false的时候:视频画面完全填充canvas区域,画面会被拉伸
  33. isFullSize: true, // 当为true的时候:视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全
  34. debug: false, // 是否开启控制台调试打印
  35. timeout: 30, // 设置超时时长, 单位秒,在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
  36. supportDblclickFullscreen: true, // 是否支持屏幕的双击事件,触发全屏,取消全屏事件。
  37. showBandwidth: false, // 是否显示网速
  38. operateBtns: {
  39. // 配置功能
  40. fullscreen: false, // 是否显示全屏按钮
  41. screenshot: false, // 是否显示截图按钮
  42. play: false, // 是否显示播放暂停按钮
  43. audio: false // 是否显示声音按钮
  44. },
  45. keepScreenOn: false, // 开启屏幕常亮,在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
  46. isNotMute: false, // 是否开启声音,默认是关闭声音播放的。
  47. loadingText: "加载中...", // 加载过程中文案。
  48. background: "" // 背景图片。
  49. });
  50. // 事件:
  51. this.jessibuca_load()
  52. // 1. 监听 jessibuca 初始化事件。
  53. this.jessibuca.on("load", () => {
  54. this.jessibuca_load()});
  55. // 2. 信息,包含错误信息
  56. this.jessibuca.on("log", data => this.jessibuca_log(data));
  57. // 3. 触发暂停事件
  58. this.jessibuca.on("pause", this.jessibuca_pause);
  59. // 4. 触发播放事件
  60. this.jessibuca.on("play", this.jessibuca_play);
  61. // 5. 当前是否全屏
  62. this.jessibuca.on("fullscreen", this.jessibuca_fullscreen);
  63. // 6. 触发声音事件,返回boolean值
  64. this.jessibuca.on("mute", this.jessibuca_mute);
  65. // 7. 当解析出音频信息时回调
  66. this.jessibuca.on("audioInfo", this.jessibuca_audioInfo);
  67. // 8. 当解析出视频信息时回调
  68. this.jessibuca.on("videoInfo", this.jessibuca_videoInfo);
  69. // 9. 错误信息
  70. this.jessibuca.on("error", this.jessibuca_error);
  71. // 10. 当设定的超时时间内无数据返回,则回调
  72. this.jessibuca.on("timeout", this.jessibuca_timeout);
  73. // 11. 流状态统计,流开始播放后回调,每秒1次
  74. this.jessibuca.on("start", this.jessibuca_start);
  75. // 12. 渲染性能统计,流开始播放后回调,每秒1次
  76. this.jessibuca.on("performance", this.jessibuca_performance);
  77. // 13. 当前网速, 单位KB 每秒1次,
  78. this.jessibuca.on("kBps", this.jessibuca_kBps);
  79. },
  80. // 事件:
  81. jessibuca_load() {
  82. // 监听 jessibuca 初始化事件。
  83. console.log("on load");
  84. console.log("module", this.videoUrl);
  85. this.methods_play(this.videoUrl);
  86. },
  87. jessibuca_log(data) {
  88. // 信息,包含错误信息
  89. console.log("on log", data);
  90. },
  91. jessibuca_pause(flag) {
  92. // 触发暂停事件
  93. console.log("on pause", flag);
  94. },
  95. jessibuca_play(flag) {
  96. // 触发播放事件
  97. console.log("on play", flag);
  98. },
  99. jessibuca_fullscreen(flag) {
  100. // 当前是否全屏
  101. console.log("on fullscreen", flag);
  102. if (flag) {
  103. let myEvent = new Event("resize");
  104. setTimeout(() => {
  105. window.dispatchEvent(myEvent);
  106. }, 100);
  107. }
  108. },
  109. jessibuca_mute(flag) {
  110. // 触发声音事件
  111. console.log("on mute", flag);
  112. },
  113. jessibuca_audioInfo(data) {
  114. // 当解析出音频信息时回调,2个回调参数
  115. // 1. numOfChannels:声频通道
  116. // 2. sampleRate 采样率
  117. console.log("audioInfo", data);
  118. },
  119. jessibuca_videoInfo(data) {
  120. // 当解析出视频信息时回调
  121. // 1. w:视频宽
  122. // 2. h:视频高
  123. console.log("videoInfo", data);
  124. },
  125. jessibuca_error(error) {
  126. // 错误信息
  127. console.log("error:", error);
  128. },
  129. jessibuca_timeout() {
  130. // 当设定的超时时间内无数据返回,则回调
  131. console.log("timeout");
  132. },
  133. jessibuca_start(s) {
  134. // 流状态统计,流开始播放后回调,每秒1次
  135. // 1. buf: 当前缓冲区时长,单位毫秒
  136. // 2. fps: 当前视频帧率,
  137. // 3. abps: 当前音频码率,单位bit,
  138. // 4. vbps: 当前视频码率,单位bit,
  139. // 5. ts:当前视频帧pts,单位毫秒
  140. // console.log('stats is', s);
  141. },
  142. jessibuca_performance(performance) {
  143. // 渲染性能统计,流开始播放后回调,每秒1次。
  144. // 0: 表示卡顿、1: 表示流畅、2: 表示非常流程
  145. // console.log('performance', performance);
  146. },
  147. jessibuca_kBps(kBps) {
  148. // 当前网速, 单位KB 每秒1次,
  149. // console.log('kBps', kBps);
  150. },
  151. // 方法:
  152. methods_play(url) {
  153. // 播放
  154. if (this.jessibuca.hasLoaded()) {
  155. this.jessibuca.play(url);
  156. } else {
  157. console.error("视频数据未加载完毕,请稍后操作");
  158. }
  159. },
  160. methods_mute() {
  161. // 静音
  162. this.jessibuca.mute();
  163. },
  164. methods_cancelMute() {
  165. // 取消静音
  166. this.jessibuca.cancelMute();
  167. },
  168. methods_pause() {
  169. // 暂停
  170. this.jessibuca.pause();
  171. },
  172. methods_setVolume(volume) {
  173. // 设置音量
  174. this.jessibuca.setVolume(volume);
  175. },
  176. methods_setRotate(rotate) {
  177. // 设置旋转角度 0\180\270
  178. this.jessibuca.setRotate(rotate);
  179. },
  180. methods_destroy() {
  181. // 关闭视频,释放底层资源
  182. if (this.jessibuca) {
  183. this.jessibuca.destroy();
  184. }
  185. },
  186. methods_fullscreen(flag) {
  187. // 全屏(取消全屏)播放视频
  188. this.jessibuca.setFullscreen(flag);
  189. },
  190. methods_screenShot() {
  191. // 截图
  192. // 1. screenshot(filename, format, quality)
  193. // 2. {string} filename、 {string} format、{number} quality
  194. // 3.filename: 保存的文件名, 默认 时间戳、format : 截图的格式,可选png或jpeg或者webp ,默认 png、quality: 可选参数,当格式是jpeg或者webp时,压缩质量,取值0 ~ 1 ,默认 0.92
  195. this.jessibuca.screenshot();
  196. },
  197. methods_setBufferTime(time) {
  198. // 设置最大缓冲时长,单位秒,播放器会自动消除延迟。
  199. // {number} time
  200. this.jessibuca.setBufferTime(Number(time));
  201. },
  202. methods_setScaleMode(mode) {
  203. // 设置播放器填充
  204. // 1. 0 视频画面完全填充canvas区域,画面会被拉伸 等同于参数 isResize 为false
  205. // 2. 1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 isResize 为true
  206. // 3. 2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 isFullSize 为true
  207. this.jessibuca.setScaleMode(Number(mode));
  208. },
  209. restartPlay() {
  210. // 重新加载
  211. this.methods_destroy();
  212. this.methods_play(this.videoUrl);
  213. }
  214. },
  215. mounted() {
  216. this.init();
  217. window.onerror = msg => (this.err = msg);
  218. },
  219. beforeDestroy() {
  220. if (this.jessibuca) this.jessibuca.destroy();
  221. }
  222. };
  223. </script>
  224. <style>
  225. @import url("./JessibucaPlayer.css");
  226. </style>

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

 如有想要文件的请私聊

二、easyplayer插件播放m3u8流

教程:

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


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

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


  1. const CopyWebpackPlugin = require('copy-webpack-plugin')
  2. configureWebpack: {
  3. plugins:[
  4. new CopyWebpackPlugin([
  5. {
  6. from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
  7. to: './libs/EasyPlayer/'
  8. },
  9. {
  10. from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
  11. to: './libs/EasyPlayer/'
  12. },
  13. {
  14. from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
  15. to: './libs/EasyPlayer/'
  16. }
  17. ])
  18. ]
  19. }

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

 4.引入组件使用

 最后效果



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档