我的要求是在aframe的飞机上简单地播放一个视频(json文件中的url)。我在我的html中创建了视频实体,如下所示
<a-video id="video_1" position="0 0 2" geometry="width:2.4;height:1.4"></a-video>
在我的注册组件中,我已将src文件添加到视频中,如下所示
AFRAME.registerComponent('myComp', {
schema: {
file: {type: 'asset', default: 'assets/data/file1.json'},
var: {type: 'number', default: 0}
},
init: function () {
},
update: function () {
var data = this.data;
var scene = this.el.sceneEl;
var screen = scene.querySelector('#video_' + data.var);
load(data.file, function (response) {
var products = response.mydata;
screen.setAttribute('src',products[data.var].videoUrl);
});
this.el.addEventListener('mouseenter', function () {
console.log("mouseenter",screen.getAttribute('src'));
});
}
});
我的控制台日志显示为json文件中提到的路径
"mouseenter assets/img/movies/videos/video1.mp4"
在网络标签中,我可以看到我的文件被提取类型媒体和状态200.但我仍然收到错误
components:texture:warn `$s` is not a valid video +41ms assets/img/movies/videos/video1.mp4
index.html:1 [.Offscreen-For-WebGL-000000BA313F15D0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
添加视频的正确方法是什么。我哪里错了。请帮忙
答案 0 :(得分:1)
我遇到了同样的问题,并且设法让它在Chrome中运行,具体如下:
<script type="text/javascript">
function toolbarSetSection(event){
//some logic which leads to
return false;
};
</script>
这有一个额外的好处,你可以在必要时控制播放(new_asset.pause(),new_asset.currentTime = X,muted = true等)。
对于较大的视频,您可能需要添加一些回调,例如oncanplaythrough,等待视频加载足够。
答案 1 :(得分:0)
var videoEl = document.createElement('a-video');
videoEl.setAttribute('src', videoUrl);
this.el.appendChild(videoEl);