Video won't load on first try

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

Solution

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();
} );