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

一、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'

更多内容可查看

官网：https://jsmpeg.com
github：https://github.com/phoboslab/jsmpeg

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~