Question

我只是想尝试一下我的javascript技巧，我正在尝试制作一个可以从数组中随机加载HTML5视频的页面。

加载视频后，我试图设置它，这样一旦点击视频，它将触发函数从数组中随机化新视频并将结果输出到HTML视频代码中。

因此，每次用户点击视频时，都会随机化并开始在页面上播放。

我相信我到目前为止所编写的代码非常接近，但在点击每次点击后我似乎无法将其随机化。

这是我的代码

HTML

<a href="#" class="click">
            <section> 
                <div>
                    <video loop autoplay>
                      <source src="videos/1.mpg" type="video/ogg">
                      <source src="videos/1.webm" type="video/mp4">
                      Your browser does not support the <code>video</code> element.
                    </video>
                </div>  
        </section>
</a>

JavaScript

// Loads in Notifier 
$(document).ready(function(){
    swal({   title: "Tap or Swipe to randomize",   
              confirmButtonColor: "#FF1D23",
              confirmButtonText: "Cool!", 
              imageUrl: "images/thumbs-up.jpg",
              timer: 4000
            });
});

//Array of Videos 
var videos = [
    [{type:'mp4', 'src':'videos/1.mp4'}, {type:'webm', 'src':'videos/1.webm'}],
    [{type:'mp4', 'src':'videos/2.mp4'}, {type:'webm', 'src':'videos/2.webm'}],  
];

//onClick + Action 
$(function() {
    $('a.click').click(function(e) {
        e.preventDefault();
        var randomIndex = parseInt(Math.random()*videos.length);
        $(this).find('videos').append('<source src="'+videos[randomIndex]+'" />');      
    });
});


function getRandomVideo() { 
var number = Math.floor(Math.random()*video.length);
document.write('<source src="'+videos[number]+'" />');
}

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

Answer 1

请参阅this fiddle

//onClick + Action
$('a.click').click(function(e) {
    e.preventDefault();
    var randomIndex = parseInt(Math.random()*videos.length);
    $(e.currentTarget).find('video').html('<source src="'+videos[randomIndex][0].src+'" type="video/ogg" /><source src="'+videos[randomIndex][1].src+'"  type="video/mp4" />');
});

我单独留下了你的数据结构，虽然结构更好。

一些问题。首先，您无法正确创建HTML字符串。你必须使用videos[randomIndex][0].src（注意src）。其次，当你.append()时，你是.html()。最后，您.find('videos')代替.find('video')。标签是一个视频（没有S）。

修改此外，您无法在该上下文中执行$(this).find(...)。 this指的是点击事件，而不是a标记。您需要获取事件$(e.currentTarget).find('video')的目标，而不是事件。

Answer 2

videos[number][0].src表示.mp4格式和 {。1}} .webm格式

并确保更正对象声明：

{type：＆＃39; mp4＆＃39;，＆＃39; src＆＃39;：＆＃39; videos / 2.mp4＆＃39;}

应为videos[number][1].src

如何将数学随机数组输出到HTML中

2 个答案: