Question

我已经用这个问题抓了几天。只是想在javascript上做得更好，但似乎没有人能够弄清楚我在做错了什么。

我想要的是创建一个包含视频的数据结构或数组

在页面加载时，我想要加载随机视频并开始播放

在此之后，我希望用户能够单击视频以启动math.random并在其位置生成新视频。

问题 - 1 - 使用我随机点击随机化视频的代码，只是消失了没有控制台错误或任何东西。

2 - 页面不会在加载时随机化

3 - 就数据结构而言，我不确定这是否是最佳方式？

这在逻辑上似乎不是一个难以解决的问题，但对我而言，这是一个真正的头脑。非常感谢任何帮助!!

HTML

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

JavaScript

//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]+'" />');      
    });
});

//onLoad Randomize 
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

这是工作笔http://codepen.io/easingthemes/pen/PwWRdx

<a>标记会在block个元素周围的某些浏览器上中断。您不需要<a>。

您需要videos[number][index].src，因为videos[number]是一个对象。您还需要在更改src

时重新加载视频

$('video').load();
$('video').play();

HTML

<section>

  <div>
    <video loop autoplay>

      <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/ogg">
      Your browser does not support the <code>video</code> element.
    </video>
  </div> 

</section>

JS

var videos = [
    [{type:'mp4', 'src':'http://techslides.com/demos/sample-videos/small.mp4'}, {type:'webm', 'src':'http://techslides.com/demos/sample-videos/small.webm'}],
    [{type:'mp4', 'src':'http://html5demos.com/assets/dizzy.mp4'}, {type:'webm', 'src':'http://html5demos.com/assets/dizzy.webm'}],  
];


$(function() {
    $('section').on('click', 'div', function(e) {
    var number = Math.floor(Math.random()*videos.length);
    $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
    });
});

Answer 2

好的，这是一个对象数组的数组，这是一个更改第一个和第二个src并输入的函数

function getRandomVideo(videos) { 
var number = Math.floor(Math.random()*videos.length);
$('.click video source').eq(0).attr('type',videos[number][0].type).attr('src',videos[number][0].src);
$('.click video source').eq(1).attr('type',videos[number][1].type).attr('src',videos[number][1].src);
$('.click video').load();
$('.click video').play();
    }

DEMO在您想要的任何情况下使用此功能

如何在点击和页面加载时随机化视频

2 个答案: