如何让网页从硬盘上加载随机视频?

时间:2018-10-19 17:04:45

标签: javascript html

我正在尝试让我的网页在加载时随机加载6个视频中的1个。导致的错误是,网页在视频应出现的网络播放器框中显示“找不到文件”错误。其他所有内容均按应有的方式显示和工作。

我的文件结构如下:

Root Folder
    js Folder
        videos Folder
            ad1.mp4
            ad2.mp4
            ad3.mp4
            ad4.mp4
            ad5.mp4
            ad6.mp4
        random.js
    Home.html

这是我的Home.html代码:

<body>
...
    <div class="row">
    ...
        <div class="column">
            <div class="card">
                <div class="center">            
                    <iframe width="420" height="345" id="video" src="js/videos/">
                        <script src="js/random.js"></script>
                    </iframe>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer-distributed">
    ...
    </footer>
</body>

这是我的JavaScript:

var videoPlayer= document.getElementById('video');

function playIt(
{
    videoPlayer.play();
    var videos = [ "ad1", "ad2", "ad3", "ad4", "ad5", "ad6" ], videos = videos[Math.floor(Math.random() * videos.length)];
    videoPlayer.src = "videos/" + videos + ".mp4";
}

videoPlayer.addEventListener('ended', playIt, false);
playIt();

1 个答案:

答案 0 :(得分:0)

尝试替换:

videoPlayer.src = "../videos/" + videos + ".mp4";

收件人:

videoPlayer.src = "videos/" + videos + ".mp4";

因为其他路径中没有“ ../”

如前所述,函数应为:

function playIt(
{
var videos = [ "ad1", "ad2", "ad3", "ad4", "ad5", "ad6" ], videos = videos[Math.floor(Math.random() * videos.length)];
videoPlayer.src = "videos/" + videos + ".mp4";
videoPlayer.play();
}