在 aframe 中动态添加视频

Question

我的要求是在 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.

添加视频的正确方法是什么。我哪里错了。请帮忙

Answer 1

我遇到了同样的问题，只是设法让它在 Chrome 中运行，如下所示：

// Create a new asset
var new_asset = document.createElement('video');
new_asset.setAttribute('id', 'dynVid'); // Create a unique id for asset
new_asset.setAttribute('src', videoUrl);

// Append the new video to the a-assets, where a-assets id="assets-id"
document.getElementById('assets-id').appendChild(new_asset);

// Add the asset to the a-video
screen.setAttribute('src', '#dynVid');
// Start playback
new_asset.play();

这还有一个额外的好处，即您可以在必要时控制播放（new_asset.pause()、new_asset.currentTime = X、muted = true 等）。

对于较大的视频，您可能需要添加一些回调，例如 oncanplaythrough，以等待视频加载足够。

Answer 2

https://aframe.io/docs/0.5.0/guides/using-javascript-and-dom-apis.html#creating-an-entity-with-createelement

var videoEl = document.createElement('a-video');
videoEl.setAttribute('src', videoUrl);
this.el.appendChild(videoEl);