单击播放具有匹配元素的视频单击

Question

我正在尝试使用 jQuery 播放 HTML5 视频。 我有两个视频。

• 当我点击第一个视频时，它可以工作。但是，所有类的标题视频隐藏。
• 当我点击第二个视频时，视频无法播放。

这是我的代码：

jQuery(document).ready(function(){
            var video = document.getElementById('video');
            video.addEventListener('click',function(){
                video.play();
                $('#video').attr('controls', true);
                $('.title-video').hide();
            },false);

            video.addEventListener('ended', function(){
                video.load();
                $('#video').attr('controls', false);
                $('.title-video').show();
            })
        })

我只想要我点击的视频。

任何建议都会很棒。 谢谢

Answer 1

我做了这个 - 它只是 javascript，但它会按顺序播放视频。我打开了控件，以便您可以跳到视频的末尾。 （您也可以添加尺寸）

可能不是你所追求的，但可能会给你一个开始。它使用 id，但只是因为只有一个视频容器 - src 是在 javascript 中设置的。

var videoArray = new Array();
videoArray[0] = 'http://www.html5videoplayer.net/videos/toystory.mp4';
videoArray[1] = 'http://www.rachelgallen.com/nature.mp4';
var i = 0; // define i
var videoCount = videoArray.length;

function videoPlay(videoNum) {
  document.getElementById("myVideo").setAttribute("src", videoArray[videoNum]);
  document.getElementById("myVideo").load();
  document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', playVid, false);
videoPlay(0); // play the video

function playVid() {
  i++;
  if (i == videoCount) {
    i = 0;
    videoPlay(i);
  } else {
    videoPlay(i);
  }
}

<video id="myVideo" controls>

</video>