Question

我有一个创建视频标签的按钮：

$("#btn").click(function() {
  var video = $('<video />', {
    id: 'myVid',
    src: "vid1.mp4",
    type: 'video/mp4',
    controls: false
  });
  $('body').append(video);
  var btn = $('<button id="btnPP">Play Video</button>');
  $('body').append(btn);
});
$(document).on('ended', "#myVid", function() {
  alert("fini");
});

我的代码似乎没问题，但是当视频结束时，它不会在ended函数中执行任何代码。

Answer 1

问题是该视频在页面上不存在，即使在.ready()上也是如此。因此，即使使用冒泡，您也无法使用$(document).on()进行定位。相反，您需要添加event listener。我已经为ended事件添加了一个事件监听器，并确保目标是以下示例中的视频。我还添加了一个autoplay来显示视频一旦结束就会触发事件：

$("#btn").click(function() {
  var video = $('<video />', {
    id: 'myVid',
    src: "https://www.w3schools.com/html/mov_bbb.mp4",
    type: 'video/mp4',
    controls: false,
    autoplay: true
  });
  $('body').append(video);
  var btn = $('<button id="btnPP">Play Video</button>');
  $('body').append(btn);
});

document.addEventListener('ended', function(e){
    if($(e.target).is('video')){
        alert('fini');
    }
}, true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">Test</button>

希望这有帮助！：）

动态创建的视频代码

1 个答案: