Video won't load on first try

Question

I´m using the asset management to load a .mp4 Clip (5 MB) and want to display it via A-Frame (1.0.4)

a-video src="ID"

Now the problem appears that it wont load on the first try. I´m just getting a black plane. After a reload of the page it appears. That not a problem with only one clip...it won't work on multiple clips within the scene.

I´m using pace.min.js for preloading but that doesnt look like the problem.

Maybe someone here has some suggestions?

Regards Pascal

Answer 1

It's complicated to get the media autoplay on modern browsers, so it's better to add the a-video dynamically. As said in my comment, you can have a modal window or anything with a button to add the video to the scene and launch it. Here is a simple example on how to do it.

// This will create the tag and remove the button from the page when it's done.
document.getElementById("video-button").addEventListener("click", function() {
        var video = document.createElement("a-video");
        video.setAttribute("src", "#videoclip");
        video.setAttribute("width", "16");
        video.setAttribute("height", "9");
        video.setAttribute("rotation", "0 180 0");
        video.setAttribute("position", "-2 2 -4.15");
        video.addEventListener("loaded", function() {
            document.getElementById("videoclip").load();
            document.getElementById("videoclip").play();
        });
        document.querySelector("a-scene").appendChild(video);
        this.remove();
} );