使用jsmpeg渲染视频动画

如何渲染视频动画？如果直接嵌入video标签移动设备不会自动播放，本节介绍如何在设备上自动播放视频动画。

setup

html

<!-- 在body后插入 -->
<script src="https://custouch-cloud.oss-cn-hangzhou.aliyuncs.com/static/v1/jsmpeg.min.js"></script>

准备视频

由于jsmpeg要求的是ts容器的视频，所以先根据文档进行容器转换，本次使用的ffmpeg进行转换，ffmpeg通过homebrew进行安装。

bash

ffmpeg -i 源文件.mp4 -f mpegts -codec:v mpeg1video -b:v 2048k -codec:a mp2 output.ts

渲染视频

vue

<template>
<!-- 占位元素 -->
<canvas v-show="animeStart" ref="canvasRef" class="w-full h-auto"></canvas>
</template>
<script>
// 在载入完成前不展示元素，防止白屏元素
const animeStart = ref(false),
        canvasRef = ref<HTMLCanvasElement>()
    function rednerCanvas() {
        // @ts-ignore
       new JSMpeg.Player(
            'xxx.ts',
            {
                canvas: canvasRef.value,
                audio: false,
                loop: false,
                autoplay: true,
				// 在载入完成后展示元素，自动播放动画
                onSourceEstablished: () => (animeStart.value = true)
            }
        )
    }
    onMounted(rednerCanvas)
</script>

动画控制

如果不是简单得播放一个动画就结束的话，我们如何去控制动画的播放，jsmpeg暴露了一些和操作视频类似的api，举例来说：

比方说有个场景需要在动画播放完成后从第4s开始循环播放，我们可以在结束的回调中控制

function rednerCanvas() {
    // @ts-ignore
    const video = new JSMpeg.Player(
        'xxx.ts',
        {
            canvas: canvasRef.value,
            audio: false,
            loop: false,
            autoplay: true,
            onEnded: () => {
                // 播放结束后从4s开始循环播放到结束
                video.currentTime = 4
                video.play()
            }
            onSourceEstablished: () => (animeStart.value = true)
        }
    )
}

使用jsmpeg渲染视频动画 ​

setup ​

准备视频 ​

渲染视频 ​

动画控制 ​

使用jsmpeg渲染视频动画

setup

准备视频

渲染视频

动画控制