2024年Web前端最新关于vue播放flv，m3u8视频流(监控)的方法(1)，蚂蚁金服开发面试

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

  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();
  }
  };
  

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


![](https://img-blog.csdnimg.cn/338c1e9635c2482fa2fce13d40689c98.png)


 如有想要文件的请私聊



二、easyplayer插件播放m3u8流


教程：


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

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

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


### 总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

这里分享一些前端学习笔记：

* **html5 / css3 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/c7aea89db6b059151c753196f8f4e9b5.png)

  

* **JavaScript 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/af0c75f32f6618baccf39ce440a0fb5c.png)

* **Vue 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/94cca01f6717f672208838e9ac549be1.png)