技术沉淀-论Canvas混剪播放器的诞生

无法理解的情感，无法言说的情绪都存档在了这些只言片语中。难得开怀，笔录于此。

在这个信息化碎片的时代，视频作为承载媒介之一，是诸多新媒体的玩物。许多好玩有趣的视频，在不同的模板套索下，产出的也不尽一致。

在业务中，有一个 视频混剪工具 的需求， 我们这次探索的点，在于 如何从前端层面思考，将若干个不同源、不同时长、不同内容的视频拼接为一个视频，无缝衔接，丝滑播放。 能够提前预览拼接后的视频效果，从而减轻后台服务器的压力，减免不必要消耗。

canvas-video-player 使用canvas渲染的视频混剪播放器,无缝拼接不同的视频源

预览地址 canvas-video.epochy.cn/

安装

npm i canvas-video-player
//or
yarn add canvas-video-player

使用方式

在Vue2.x项目中使用，首先需要在main.js中引入、全局注册

import canvasPlayer from "canvas-video-player"

Vue.use(canvasPlayer)

在要使用的组件中，采用API的方式调用 例如：

<template>
  <div id="app">
    <button @click="play">我是视频播放器</button>
  </div>
</template>

<script>

export default {
  name: 'App',
   data() {
    return {
      list: [
        {
          url: '**视频地址1**',
          // 视频的尺寸
          width: 1080,
          height: 1920,
          // 摆放logo的位置
          logoPosition: {
            x: 'left',
            y: 'top',
          },
          // 播放截取的时段
          playPoint: {
            end: '3.120000',
            start: '0',
          },
        },
        {
          url: '**视频地址2**',
          // 视频的尺寸
          width: 1080,
          height: 1920,
          // 摆放logo的位置
          logoPosition: {
            x: 'left',
            y: 'top',
          },
          // 播放截取的时段
          playPoint: {
            end: '3.120000',
            start: '0',
          },
        },
        //...不限制视频个数，无限多
      ],
    }
  },
  methods:{
    play(){
      this.$canvasVideoPlayer(this.list)
    }
  }
}
</script>

创造不易，喜欢点个小星星 (^▽^)