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

【问题标题】：Video won't load on first try第一次尝试时无法加载视频
【发布时间】：2020-06-26 06:41:46
【问题描述】：

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

a-video src="ID"

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

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

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

问候帕斯卡

【问题讨论】：

你能提供一个完整的例子吗？这么少的细节很难猜出问题出在哪里，抱歉。
您好，Stéphane，感谢您的回复。

标签： javascript aframe virtual-reality

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这是一些示例代码：

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

问候！

【讨论】：

好的，我找到了另一个提示。在 Chrome 中，它不会像描述的那样工作。在 Safari 中，剪辑的第一个图像是可见的，但不会播放。 n Firefox 运行良好。任何想法让它在所有这三个浏览器上工作？问候！
好的，现在看起来它不是直接加载问题....使用上面的 sn-p 我试图通过一次又一次地重新加载页面来重现错误，但现在即使在第二页加载它不会工作。但是...第一次尝试...打开浏览器...视频是黑色的...单击某处（不是在视频上，只是某处）剪辑在下一次重新加载时播放。
浏览器好像在等待什么。删除 cursor="rayOrigin: mouse" 后，单击不再有帮助，但会在第二次重新加载时加载
某些浏览器（至少是 chrome 浏览器）不允许在页面加载时自动播放媒体并且需要用户手势。所以是的，它可能很复杂。但是您可以例如在全景图前面添加一个模式，并在按下按钮或类似的东西后触发视频播放。