javascript - 如何使用 javascript jquery 将具有多个 id 的数组制作为视频标签

Question

我正在使用自定义构建的 html5 视频。视频标签有一个唯一的ID。现在我想创建几个视频标签。

这就是仅 1 个视频的工作原理:

<video id="myVideo1" controls preload="auto" width="600" height="350" >
<source src="test.mp4" type="video/mp4" />
</video>

js:

$(document).ready(function(){
   var video = $('#myVideo1);
   // stuff goes her...

那么:我如何制作多个视频标签，每个标签都有自己的 id，并在这些 id 上使用 javascript 触发？

如何处理多个彼此独立的视频，如下所示？

 <video id="myVideo1" controls preload="auto" width="600" height="350" >
    <source src="test1.mp4" type="video/mp4" />
 </video>

 <video id="myVideo2" controls preload="auto" width="600" height="350" >
    <source src="test2.mp4" type="video/mp4" />
 </video>

 <video id="myVideo3" controls preload="auto" width="600" height="350" >
    <source src="test3.mp4" type="video/mp4" />
 </video>

启动视频的代码:

//bind video events
    $('.videoContainer')
    .append('<div id="init"></div>')
    .hover(function() {
        $('.control').stop().animate({'bottom':0}, 500);
        $('.caption').stop().animate({'top':0}, 500);
    }, function() {
        if(!volumeDrag && !timeDrag){
            $('.control').stop().animate({'bottom':-45}, 500);
            $('.caption').stop().animate({'top':-45}, 500);
        }
    })
    .on('click', function() {
        $('#init').remove();
        $('.btnPlay').addClass('paused');
        $(this).unbind('click');
        video[0].play();
    });
    $('#init').fadeIn(200);
});

Answer 1

您始终可以选择实际元素，而不是依赖 id。

$(document).ready(function(){
   $('video').each(function(){
       var video = $(this);

       // Do the rest of the instructions.
   });
});