javascript - 随机视频在 Chrome 中不起作用

Question

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

它在 Firefox 中完美运行。

但在 Google Chrome 中它不起作用。

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

有什么想法吗？

我需要更改什么才能在任何浏览器中观看随机视频？

Answer 1

首先，我的 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 的访问被拒绝，那么就没有视频。