javascript - 如何成对随机化？

Question

我正在尝试随机化一些既是 .webm 又是 .mp4 的视频。

我有两个视频，例如 vid1.webm 和 vid1.mp4

我想让视频随机化并将它们同时拉入视频标签。

safari 不支持 .webm，所以这就是为什么我想将 .mp4 作为备份，并且需要两者都在点击时随机进入浏览器。

我正在从一个数组中加载它们，也不知道应该如何列出文件夹结构，我真的很想将它们保存在一个数组中，因为我要加载数百个

var randomImage = new Array();

randomVideo[0] = "videos/1.webm/ or mp4"; //not sure how to do the file structure
randomVideo[1] = "videos/2.webm/ or mp4"; //
randomVideo[2] = "videos/3.webm/ or mp4"; //

//trying to figure out this part

$(function() {
    $('a.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random()*randomVideo.length);
        $(this).html('<source src="'+randomVideo[number]+'" />');
    });
});

$(function() {
    $('a.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random()*randomVideo.length);
        $(this).html('<source src="'+randomVideo[number]+'" type="video/mp4" /> )
    }
})

html

<a href="#" class="click">
    <section> 
        <video controls autoplay>
            <script>
               randomVideo()
            </script>
        </video>    
    </section>
</a>

如果有人能帮我解决这个问题，将不胜感激! 想不通，还在学习中。

Answer 1

您有多个问题。首先，您的数组名称不匹配(randomImage 和 randomVideo)。不确定为什么要两次 Hook 点击事件。一种方法是将路径的公共(public)部分存储在数组中，然后连接文件结尾。另外，我不知道你想用 img 标签做什么......

无论如何，如果我理解了您正在尝试正确执行的操作，下面的代码应该对您有所帮助。

var randomVideo = new Array();
// define your common video paths here
randomVideo[0] = "videos/1";
randomVideo[1] = "videos/2";
randomVideo[2] = "videos/3";

function randomiseVideos() {
        var number = Math.floor(Math.random() * randomVideo.length);
        $('#myvid').empty(); // clean up from last time
        // now add 2 sources (will fall back appropriately depending on client support)
        $('#myvid').append('<source src="' + randomVideo[number] + '.webm" type="video/webm">');
        $('#myvid').append('<source src="' + randomVideo[number] + '.mp4" type="video/mp4">');
}

$(function () {
    // Randomise on page load
    randomiseVideos();
    // handle click on test link
    $('a.click').click(function (e) {
        e.preventDefault();
        randomiseVideos();
    });
});

HTML:

<a href="#" class="click">Test Link</a>
<section>
    <video id="myvid" width="320" height="240" controls autoplay></video>
</section>

JS fiddle demo