透明视频在A帧中播放黑色背景

Question

我正在使用8th wall来创建Web的AR体验。我创建的视频是透明的，但是当视频在AR中播放时，它会以黑色补丁背景播放

我已经尝试使用VP8和VP9对视频进行编码，并且视频格式为webm。我从互联网上下载了类似的视频，效果很好。但是，当我尝试通过我们的视频实现相同效果时，它会显示黑色背景。我已经在编码时启用了Alpha通道

   <!-- We've included a slightly modified version of A-Frame, which fixes some polish concerns -->
   <script src="//cdn.8thwall.com/web/aframe/8frame-0.8.2.min.js"></script>
   <script src="photo-mode.js"></script>

   <!-- XR Extras - provides utilities like load screen, almost there, and error handling.
        See github.com/8thwall/web/xrextras -->
   <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script>

   <!-- 8thWall Web - Replace the app key here with your own app key -->
   <script async src="//apps.8thwall.com/xrweb?appKey=gJVnVCIA0hbEiv6BfUy9pgLHnjaMiMWxPcLg8DfiFcgKUMTCFcv3iw5xrHR3jZzE7YNk3l"></script>
<link rel="stylesheet" href="index.css">
   <script>
     // This component gives the invisible hider walls the property they need
     AFRAME.registerComponent('hider-material', {
       init: function() {
         const mesh = this.el.getObject3D('mesh')
         mesh.material.colorWrite = false
       },
     })

     // This component hides and shows certain elements as the camera moves
     AFRAME.registerComponent('portal', {
       schema: {
         width: {default: 4},
         height: {default: 6},
         depth: {default: 1},
       },
       init: function(){
         this.camera = document.getElementById('camera')
         this.isInPortalSpace = false
         this.wasOutside = true
       },
       tick: function() {
         const position = this.camera.object3D.position

         const isOutside = position.z  > this.data.depth / 2
         const withinPortalBounds =
           position.y < this.data.height && Math.abs(position.x) < this.data.width / 2

         if (this.wasOutside != isOutside && withinPortalBounds) {
           this.isInPortalSpace = !isOutside
         }

AR体验应该能够在没有黑色背景（即透明背景）的情况下播放视频