Question

我在点击时将视频元素注入div。

但是，之后我无法在该视频上播放任何事件。

具体来说，我想要一个暂停按钮，并在结束时淡出。

如果我只是正确地输入html，我可以让它工作 - 所以它必须是它在注入时不知道它在那里吗？

$('#play-video').on( 'click', function() {

  $(this).fadeOut();

  $("#video-container").html("<video controls class='fillWidth' style='width:100%;' id='full-video'><source src='http://brightcove.vo.llnwd.net/yaddayadda'/><source src='http://sitedsfa.com/yaddayadda' type='video/webm' /></video>");

  $('#close-video').fadeIn();

});

$('#close-video').on('click', function() {
  $('#full-video').pause();
});

$('#full-video').bind('ended', function(){
  alert('video is over');
});

在codepen中：HERE

有这方面的经验吗？感谢。

Answer 1

您无法在video - 包装元素上执行$元素方法。

 var $video = $('#some-video');
 //**NOT OK**
 $video.play();
 //**OK** - executing the method on the base html video element
 var video = $video[0];
 video.play();

这是working example

Answer 2

试试这个。

$('#play-video').on( 'click', function() {

  $("#video-container").html("<video controls class='fillWidth' style='width:100%;' id='full-video'><source src='http://brightcove.vo.llnwd.net/yaddayadda'/><source src='http://sitedsfa.com/yaddayadda' type='video/webm' /></video>");

  $(this).fadeOut('fast' , function() { 
                  $("#full-video")[0].play();
                   $('#close-video').fadeIn();
    });

});


$('#close-video').on('click', function() {   $('#full-video')[0].pause(); });

$('#full-video').bind('ended', function(){   alert('video is over'); });

动态注入时的html5视频事件

2 个答案:

这是working example