vue中使用JSMpeg的使用总结及踩坑JSMpeg是用JavaScript编写的视频播放器。它由MPEG-TS Dem

一、JSMpeg简介

JSMpeg是用JavaScript编写的视频播放器。它由MPEG-TS Demuxer，WebAssembly MPEG1视频和MP2音频解码器，WebGL和Canvas2D渲染器以及WebAudio声音输出组成。JSMpeg可以通过Ajax加载静态文件，并可以通过WebSockets进行低延迟的流传输（〜50ms）。

JSMpeg可以在iPhone 5S上以30fps的速度解码720p视频，可以在任何现代浏览器（Chrome，Firefox，Safari和Edge）中使用，并且压缩后的速度为42kb。

二、vue中使用JSMpeg

1、下载jsmpeg.min.js

将jsmpeg.min.js放入项目中

2、在main.js中引入

import JSMpeg from '@/util/jsmpeg.min'

3、在组件中使用

<template>
      <canvas id="video"></canvas>
</template>

<script>
export default {
  name: "Test",
  components: {
  },
  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})
    }
  }
}
</script>

<style scoped>

</style>

踩坑：将其引入父组件时，需要使用正常加载方式，不能使用懒加载，懒加载会导致白屏无法加载视频，如：

import Test from '@/components/Test'

vue中使用JSMpeg的使用总结及踩坑