如何成对随机化？

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）。不确定为什么要两次挂钩点击事件。一种方法是将路径的公共部分存储在数组中，然后连接文件结尾。另外，我不知道你想用 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

Answer 2

视频元素支持多个来源https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

一个非常简单的解决方案是在数组中存储视频对象列表：

var videos = [
    [{type:'mpg', 'src':'blah.mpg'}, {type:'webm', 'src':'blah.webm'}],
    [{type:'mpg', 'src':'blah2.mpg'}, {type:'webm', 'src':'blah2.webm'}],
];

...

var video = videos[randomIndex];

并使用它来输出源，例如：

<video controls>
  <source src="blah.mpg" type="video/ogg">
  <source src="blah.webm" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

如何成对随机化？

How to randomize in pairs?

html

javascript

video

jquery