随机视频在 Chrome 中不起作用答案

【问题标题】：Random Video not working in Chrome随机视频在 Chrome 中不起作用
【发布时间】：2016-11-27 10:25:22
【问题描述】：

我使用此代码在我的页面上显示随机电影。

它在 Firefox 中完美运行。

但在谷歌浏览器中它不起作用。

<script type="text/javascript">

        var randomVid;
            randomVid = function() {
              var mp4, randomMp4SrcList, randomWebMSrcList, srcMp4, srcWebM, webM;
        randomMp4SrcList = [
            "files/random_movies/video1.mp4", 
            "files/random_movies/video2.mp4", 
            "files/random_movies/video3.mp4",
            "files/random_movies/video4.mp4",
            "files/random_movies/video5.mp4",
            "files/random_movies/video6.mp4",
        ];

              randomWebMSrcList = [
            "https://s3-us-west-2.amazonaws.com/nytimesvideos/bokeh1.webm", 
            "https://s3-us-west-2.amazonaws.com/nytimesvideos/bokeh2.webm"];

              mp4 = randomMp4SrcList[Math.floor(Math.random() * randomMp4SrcList.length)];
              webM = randomWebMSrcList[Math.floor(Math.random() * randomWebMSrcList.length)];
              srcMp4 = document.querySelectorAll("#bgvideo > source")[0];
              srcWebM = document.querySelectorAll("#bgvideo > source")[1];
              srcMp4.src=mp4;
              srcWebM.src=webM;
              return;
            };
    </script>

        <div class="background-video-holder">
            <video id="bgvideo" class="background-video hidden-xs" preload="auto" autoplay="autoplay" loop="loop">
                <source src=" " type="video/mp4">
                    <source src=" " type="video/webm">
                        <script>
                            randomVid();
                        </script>
            </video>

有什么想法吗？

要在任何浏览器中查看随机视频，我必须进行哪些更改？

【问题讨论】：

您可以使用document.querySelector 与选择器"#bgvideo > source[type=video/mp4]" 和"#bgvideo > source[type=video/webm]" 一起使用，而不是使用来自document.querySelectorAll 的索引0 和1，以避免在文档中它们的顺序发生变化时出现任何混淆.

标签： javascript html google-chrome video

【解决方案1】：

海德米安，

感谢您的信息。我必须删除这个链接（“https://s3-us-west-2.amazonaws.com/nytimesvideos/bokeh1.webm”）

MP4 正在运行。

视频只能播放一次。如果我用“导航栏”更改站点并返回，视频不会显示。我必须重新加载浏览器（但只能加载到 Google Chrom）

有什么想法吗？

非常感谢。问候

【讨论】：

嗨 Reto，欢迎来到 stackoverflow。这是一个问答网站，而不是论坛。因此，像您在这里所做的后续问题在这种格式下并不能很好地工作。如果您用新数据提出一个新问题并从这个问题中引用它，那会更好。祝你好运！

【解决方案2】：

首先，我在 webm 视频链接上被拒绝访问 "https://s3-us-west-2.amazonaws.com/nytimesvideos/bokeh1.webm"

但除此之外，我的代码在 Chrome 中运行。我确实使用了自己的mp4。它应该用 AVC(H264) 编码视频和 AAC 音频。我已经尝试将 MPEG4(DivX) 用于视频，但这只会产生声音。

根据MDN，Chrome 应该支持 mp4，但我发现了一些与此相矛盾的其他来源（s1、s2）。这可能取决于您的 Chrome 版本。

然后我测试了一个 webM 视频，效果也很好。

因此，如果 mp4 在您的 chrome 中不起作用，并且 webM url 的访问被拒绝，则没有视频。

【讨论】：