• animation-video 透明视频动画
  • 属性说明
  • 示例
    • 代码示例
  • Bug & Tip

animation-video 透明视频动画

解释：animation-video 属于前端组件，为智能小程序提供了将特定视频资源渲染为透明背景动效的能力，可以帮助开发者低成本实现更为沉浸，丰富的动画效果。动画资源设计方法详见透明视频 AFX 。animation-video 组件还提供丰富的 API 来控制动画的播放，暂停，跳到指定位置等，详见 swan.createAnimationVideo 。

Web 态说明：在 Web 态中 animation-video 组件的支持情况取决于浏览器本身对 WebGL 以及 Video 的支持情况。安卓系统下常见问题有：
1. 部分浏览器（如 UC）不支持 WebGL ，因此动画无法展现。
2. autoplay 功能失效，并且需要用户在页面发生交互行为后调用 animationVideo.play 。

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS
• CSS

 
 
 

  
  
  
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 id="myAnimationVideo"
  
  
  
 path="{{path}}"
  
  
  
 loop="{{loop}}"
  
  
  
 resource-width="800"
  
  
  
 resource-height="400"
  
  
  
 canvas-style="width:200px;height:200px"
  
  
  
 autoplay="{{autoplay}}"
  
  
  
 bindstarted="started"
  
  
  
 bindended="ended">
  
  
  
 
  
  
  
 
  
  
  
 {{status}}动画
  
  
  
 跳转到动画2S处
  
  
  
 
  
  
  
 
 
 

设计指南

可支持透明背景动画，实现沉浸式的动画效果展现,视频文件体积较小，有利于提升小程序性能,动画播放流畅，实现还原度高。
等级进阶、签到、弹窗、运营 banner 、直播礼物等强氛围的场景。
互动性建议不自动播放，展示型建议自动播放。