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>

如何成对随机化？

2 个答案: