• animation-video 透明視頻動畫
  • 屬性說明
  • 示例
    • 代碼示例
  • Bug & Tip

animation-video 透明視頻動畫

解釋：animation-video 屬于前端組件，為智能小程序提供了將特定視頻資源渲染為透明背景動效的能力，可以幫助開發(fā)者低成本實現(xiàn)更為沉浸，豐富的動畫效果。動畫資源設(shè)計方法詳見透明視頻 AFX 。animation-video 組件還提供豐富的 API 來控制動畫的播放，暫停，跳到指定位置等，詳見 swan.createAnimationVideo 。

Web 態(tài)說明：在 Web 態(tài)中 animation-video 組件的支持情況取決于瀏覽器本身對 WebGL 以及 Video 的支持情況。安卓系統(tǒng)下常見問題有：
1. 部分瀏覽器（如 UC）不支持 WebGL ，因此動畫無法展現(xiàn)。
2. autoplay 功能失效，并且需要用戶在頁面發(fā)生交互行為后調(diào)用 animationVideo.play 。

屬性說明

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 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}}動畫
  
  
  
 跳轉(zhuǎn)到動畫2S處
  
  
  
 
  
  
  
 
 
 

設(shè)計指南

可支持透明背景動畫，實現(xiàn)沉浸式的動畫效果展現(xiàn),視頻文件體積較小，有利于提升小程序性能,動畫播放流暢，實現(xiàn)還原度高。
等級進階、簽到、彈窗、運營 banner 、直播禮物等強氛圍的場景。
互動性建議不自動播放，展示型建議自動播放。