Video won't load on first try

user_13817198 0
Viewed 399

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

aframe virtual-reality javascript
2 Answers

Here is some example Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta name="description" content="3D Model">
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
   <body>
     <a-scene vr-mode-ui="enabled: false" cursor="rayOrigin: mouse">
<!--Assets -->
  <a-assets>
    <video id="videoclip" autoplay loop="true" src="assets/clip.mp4"></video>
     </a-assets>
  
<!--Camera Rig -->
    <a-entity movement-controls="speed: 0.2; constrainToNavMesh: true" position="0 4 20">

<!-- Camera -->
        <a-entity camera position="0 1.8 0"
                look-controls="pointerLockEnabled: false">
        </a-entity>
    </a-entity>
<!--Video -->
  <a-video src="#videoclip" width="2.15" height="1" rotation=" 0 180 0" position="-2 2 -4.15"></a-video>

    </a-scene>
  </body>
</html>

Regards!

user_138171980

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