第一次尝试时无法加载视频

Question

我正在使用资产管理加载 .mp4 剪辑 (5 MB) 并希望通过 A-Frame (1.0.4) 显示它

a-video src="ID"

现在出现的问题是它不会在第一次尝试时加载。我刚得到一架黑色飞机。重新加载页面后，它会出现。只有一个剪辑不是问题...它不适用于场景中的多个剪辑。

我正在使用 pace.min.js 进行预加载，但这看起来不是问题。

也许这里有人有一些建议？

问候帕斯卡

Answer 1

这是一些示例代码：

<!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>

此致！

Answer 2

在现代浏览器上让媒体自动播放很复杂，所以最好动态添加 a-video。正如我在评论中所说，您可以使用模式 window 或任何带有按钮的按钮来将视频添加到场景并启动它。这是一个简单的例子，说明如何做到这一点。

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

第一次尝试时无法加载视频

Video won't load on first try

javascript

virtual-reality

aframe