vue JSMpeg

JSMpeg是一个用JavaScript编写的视频播放器，它包含了MPEG-TS Demuxer、WebAssembly MPEG1视频和MP2音频解码器、WebGL和Canvas2D渲染器以及WebAudio声音输出等组件。\[3\]在Vue中使用JSMpeg的步骤如下：
1. 将jsmpeg.min.js文件放入项目中。
2. 在main.js中引入JSMpeg：import JSMpeg from '@/util/jsmpeg.min'。
3. 在组件中使用JSMpeg进行视频播放。在template中添加一个canvas元素，例如<canvas id="video"></canvas>。在script中的mounted钩子函数中调用getVideos方法，该方法中可以通过JSMpeg.Player来创建一个视频播放器实例，并传入视频的URL和canvas元素作为参数。示例代码如下：

export default {
  name: "Test",
  data() {
    return {}
  },
  mounted() {
    this.getVideos()
  },
  methods: {
    getVideos() {
      let canvas = document.getElementById('video')
      let url = 'ws://127.0.0.1:8066'
      let player = new JSMpeg.Player(url, { canvas: canvas })
    }
  }
}

需要注意的是，当将JSMpeg引入父组件时，需要使用正常加载方式，不能使用懒加载，否则可能导致白屏无法加载视频。\[1\]此外，JSMpeg可以在iPhone 5S上以30fps的速度解码720p视频，并且可以在现代浏览器（如Chrome，Firefox，Safari和Edge）中使用，压缩后的速度为42kb。\[2\]更多关于JSMpeg的内容可以查看相关文档。
#### 引用[.reference_title]
- *1* *2* *3* [vue中使用JSMpeg的使用总结及踩坑](https://blog.csdn.net/focusmickey/article/details/111269204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]