像HTML一样编写视频：video/image/gif节点介绍

今天继续介绍MiraML的视频描述能力: video(视频)/image(图片)/gif(动图)。这些能力都是基于米拉视频改造的FFCreator实现的。

之前的文章可以看这里：

1. MiraML概述
2. 灵活的时间与空间单位
3. 画布、主轨、场景(复合片段)与转场

老规矩，先举一个栗子🌰：

<miraml>
  <canvas width="1280" height="720">
    <spine>
      <!-- 按源素材比例，适应宽高: width/height不给全 -->
      <video x="50vw" y="50vh" width="100vw" src="pic_oceans.mp4" duration="5" ss="1">
        <image x="20vw" y="10vh" height="50rpx" src="pic1.jpg"></image>
        <gif x="20vw" y="50vh" src="pic_ani.gif"></gif>
      </video>
      <!-- 给定宽高，object-fit: cover (默认) -->
      <video x="50vw" y="50vh" width="100vh" height="100vh" src="pic_oceans.mp4" duration="5" ss="1">
        <image x="20vw" y="10vh" width="50rpx" height="50rpx" src="pic1.jpg"></image>
        <!-- gif/video支持loop属性: 是否循环播放 -->
        <gif x="20vw" y="50vh" width="50rpx" height="50rpx" loop="false" src="pic_ani.gif"></gif>
      </video>
      <!-- 给定宽高，object-fit: contain -->
      <video x="50vw" y="50vh" width="100vh" height="100vh" object-fit="contain" src="pic_oceans.mp4" duration="5" ss="1">
        <image x="20vw" y="10vh" width="50rpx" height="50rpx" object-fit="contain" src="pic1.jpg"></image>
        <!-- gif/video支持speed属性: 播放速度 -->
        <gif x="20vw" y="50vh" width="50rpx" height="50rpx" object-fit="contain" speed="2" src="pic_ani.gif"></gif>
      </video>
      <!-- 用frame属性截取部分画面 (按绝对像素) -->
      <video x="50vw" y="50vh" src="pic_oceans.mp4" duration="5" ss="1">
        <frame x="200" y="100" w="500" h="300"></frame>
      </video>
      <!-- 用pframe属性截取部分画面 (按百分比) -->
      <video x="50vw" y="50vh" src="pic_oceans.mp4" duration="5" ss="1">
        <pframe x="0.2" y="0.1" w="0.5" h="0.5"></pframe>
      </video>
    </spine>
  </canvas>
</miraml>

👁️👁️ 所有的示例都是可以直接复制到MiraPlayer的沙盒里直接预览播放的

👁️👁️ 科学上网不方便的同学，也可以在掘金的沙盒里玩：

👁️👁️ 目前只支持Chrome/Firefox/Edge，Safari会很卡顿 😈

视频(video)、图片(image)、动图(gif)都是组成视频中画面的基础元素。 除了之前提过的x, y, width, height等属性外，它们还有以下属性和逻辑：

1. width, height如果只给出其中任意1个，则另一个将根据源素材的画面比例来自适应；
2. width, height如果都没有给，则按源素材的尺寸（强烈不推荐）；
3. width, height都给，则会根据object-fit属性设置来做填充；
4. object-fit的概念可参考CSS同名属性，支持的值有：cover (默认), contain, scale-down, fill；
5. frame, pframe 用于画面部分裁剪，可以参加上面的示例；
6. loop: 是否无限循环播放，gif节点默认true循环，video节点默认false不循环；
7. speed: 播放倍速，默认1.0，即正常速度；
8. audio: video节点播放时是否播放声音, true播放声音, false静音, 默认为true
9. volume: video节点播放声音的音量, 默认1.0，取值在0~5之间（*部分浏览器可能有差异）。

👁️👁️ frame和pframe在做画面裁剪的时候，不能超出源素材画面，否则会报错，如下图。

参考：

开源项目: FFCreator

如果遇到问题也可以扫码入群：