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中设置的。

＆＃13;

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);
  }
}

＆＃13;

<video id="myVideo" controls>

</video>

＆＃13;

点击播放视频，点击匹配元素

1 个答案: