今天继续介绍MiraML的视频描述能力: 画布、场景与转场。这些能力都是基于米拉视频改造的FFCreator实现的。
之前的文章可以看这里：
老规矩，先举一个栗子🌰：
<miraml>
<canvas width="1280" height="720">
<spine>
<!-- 第一幕，0~2秒 -->
<video x="50vw" y="50vh" width="100vw" src="pic_oceans.mp4" duration="2" ss="1">
<image zIndex="2" x="50rpx" y="30rpx" height="50rpx" width="50rpx" src="pic1.jpg"></image>
</video>
<!-- 转场1 -->
<trans key="cube"></trans>
<!-- 第二幕，2~4秒 -->
<video x="50vw" y="50vh" width="100vw" src="pic_oceans.mp4" duration="2" ss="8">
<image zIndex="2" x="100rpx" y="30rpx" height="50rpx" width="50rpx" src="pic2.jpg"></image>
</video>
<!-- 转场2 -->
<trans key="cube"></trans>
<!-- 第三幕，4~6秒 -->
<scene name="复合片段">
<video x="50vw" y="50vh" width="100vw" src="pic_oceans.mp4" duration="2" ss="15">
<image zIndex="2" x="150rpx" y="30rpx" height="50rpx" width="50rpx" src="pic3.jpg"></image>
</video>
</scene>
<!-- 转场3 -->
<trans key="cube"></trans>
<!-- 第四幕，6~8秒 -->
<video x="50vw" y="50vh" width="100vw" src="pic_oceans.mp4" duration="2" ss="20"></video>
</spine>
</canvas>
</miraml>
👁️👁️ 所有的示例都是可以直接复制到MiraPlayer的沙盒里直接预览播放的
👁️👁️ 科学上网不方便的同学，也可以在掘金的沙盒里玩：
👁️👁️ 目前只支持Chrome/Firefox/Edge，不支持Safari 😈
示例代码包含了4个镜头，每个时长2秒，所以最终渲染出的视频是8秒。 其中还有3个转场特效，每个时长1秒。
熟悉剪辑工具的同学，看这个轨道里的排列或许会更好理解：
从最外层的节点开始（除miraml外），主要有以下几类节点：
-
canvas: 画布，也是根节点，有且只能有1个。有以下属性：
width,height表示最终生成视频的尺寸(px)，只能是int类型；
fps帧/秒，预览的时候用处不大，烧录的时候可以指定，默认24；
debug布尔型(boolean)，开启后会打印更多log信息；
crf,vb,highWaterMark,outputDir.. 等参数，参见FFCreator文档 -
spine: 主轨，为了方便多个片段前后(时间)自动排列而引入，有且只能有1个。
主轨中的子节点(仅第一级子节点)，按文档中的先后顺序，在上一个结束后，自动进入下一个，而无需为每一个节点设置start。而主轨以外的节点，如果没有start设置，都会在第0秒开始。
👁️👁️ 如果canvas下没有主轨（spine）节点，FFCreator会自动创建主轨，并将canvas下第一级子节点中没有设置start的video节点都挂到主轨节点下。这是为了方便多数情况下省略主轨节点而设置的默认行为。如果需要绕过，可写一个空的主轨节点<spine></spine>。 -
video: 视频，image: 图片。这一层的节点除了基本属性x,y,width,height,start,duration外，也有各自支持的属性，比如src等，留在以后详细介绍。 -
trans: 转场特效。目前只能作为spine的子节点（未来可能支持更多的情况），实现前后2个兄弟节点（也是同一层的spine的子节点）之间的转场动画效果。默认duration时长1秒。
👁️👁️ 转场特效通常会在同时出现前后两个片段（节点）的画面，以特效叠加的方式融合在一起。所以实际上在转场过程中，会用前后节点的隐藏片段来补帧（下图中灰色部分），达到更顺畅的画面效果。比如【子节点1】的视频源素材时长10秒，但我们只用它前8秒，那么它其实正常画面离场后还有2秒的隐藏片段（灰色部分）；而【子节点2】的视频，我们设置了属性
ss=2，即从进场后直接从视频源素材的第2秒开始播放，那它前面也有2秒的隐藏片段。因此，在转场特效进入的时候，会继续播放【子节点1】尾部，同时开始播放【子节点2】的隐藏头部。
👁️👁️ 如果隐藏片段的时长小于转场时长的一半（因为转场时长是前后各分一半），没有可供补帧的画面，就会保持在前一个片段的尾帧，或后一个片段的首帧。 -
scene: 场景，类似常用视频编辑软件中【复合片段】的效果，即将它里面所有的子节点（所有子层级）都打包在一起，在时间轴上也不允许子节点超出它的时长范围，就类似空间布局里
overflow: hidden的概念。
👁️👁️ 示例中，第三幕包含在scene里面，可以看到它里面的图片与前两幕里图片不一样的地方：图片与视频都打包在一起，共同参与了转场特效的动画。
最后，介绍一下每个节点都支持zIndex属性（audio等无画面的除外）。与CSS里的zIndex功能类似，是决定节点空间布局里上下遮挡关系的关键因素。
默认的zIndex是child > parent，即子节点盖在父节点上面。文档中后出现的节点盖在先出现的上面。如有需求，可直接设置int类型的值。
👁️👁️ scene里所有子节点的zIndex都是单独比较大小，不会与scene外面的节点混淆。最后打包到scene之后，再拍扁作为一层参与外面的zIndex比较。
参考：
开源项目: FFCreator
如果遇到问题也可以扫码入群：
