video - A-Frame 并动态添加视频
问题描述
我有
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
...
<a-assets>
<video id="losevideo" autoplay loop="true" src="images/losevideo_oA.mp4" crossorigin="anonymous" playsinline webkit-playsinline></video>
</a-assets>
...
<a-video id="alosevid3" webkit-playsinline playsinline autoplay loop="true" src="#losevideo" position="-5 0 -5" rotation="0 0 0" scale="0.01 0.01 0.01"></a-video>
在我拥有的一个组件内
let videoEl = document.createElement('a-video');
videoEl.setAttribute('id', 'loseVidEl'); // Create a unique id for asset
videoEl.setAttribute('src', '#losevideo');
videoEl.setAttribute('height', '4.9');
videoEl.setAttribute('width', '4');
videoEl.setAttribute('position', '0 0.001 -5');
videoEl.setAttribute('rotation', '-90 0 0');
scene.appendChild(videoEl);
该视频按预期播放。(并且 alosevid3 不可见,因为它太小了)
如果我尝试
<a-video id="alosevid3" webkit-playsinline playsinline autoplay loop="true" src="#losevideo" position="-5 0 -5" rotation="0 0 0" visible="false"></a-video>
(可见 = 假)我的 lossVidEl 出现黑屏。(就像我没有视频一样)有人可以向我解释这种行为吗?
加法 - 这是 Firefox 中的行为。在 Oculus 浏览器和 Chrome (MacOS) 中,视频屏幕为黑色。(视频直接加载播放)
解决方案
这似乎是a-frame的(不可靠的)资产管理系统(可能是底层的three.js缓存)的问题。类似问题: https ://github.com/aframevr/aframe/issues/4080
现在我直接加载视频 videoEl.setAttribute('src', 'images/winvideo_oA.mp4');
就我而言,这已经足够了。
推荐阅读
- xaml - Xamarin.Forms - 我的 ControlTemplate 不尊重 HeightRequest
- java - apache VFS2 上的 IIS 证书无法恢复 KEY SSL
- heroku - Heroku 的 CloudFormation / Terraform?
- ios - Flutter 无法为模拟器构建应用程序。在 iPhone 8 上启动应用程序时出错
- lightningchart - 将缩放带/恒定线限制到某个 X 轴
- jestjs - Jest 使用 Mock Service Worker (MSW) 或其他模拟离线网络?
- pentaho - 选择路径取决于结果 Pentaho
- node.js - Firebase存储图像ulpoad和规则集允许读取但获取链接403禁止openresty
- python - Python:为什么当我保存它时,PillowWriter 会改变我的 gif 的形状?
- lwm2m - 自定义对象/实例名称未反映在 LwM2M 自定义对象的服务器中