javascript - 如何停止/播放在 DOM 中动态添加的视频

Question

我通过脚本附加 video 标记及其控件。我成功绑定(bind) div 元素，但无法播放/停止视频。代码如下:

$ad = $(".ayztd");
$ad.append($("<video controls='controls' id='ayztvideoplayer' autoplay><source src='" + data.ad.url + "' type='video/mp4'></video>"));
$ad.append('<div id="pbutton" class="player-buttons"></div>');

$(document).on( 'click','#pbutton', function()  {
    $('#ayztvideoplayer').paused 
        ? $('#ayztvideoplayer').play() 
        : $('#ayztvideoplayer').pause(); //Not working
});

Answer 1

paused、play() 和 pause() 是原生 video DOMElement 的属性和方法，不是 jQuery 对象。在调用它们之前，您需要先检索 native 元素。试试这个:

$(document).on('click','#pbutton', function() {
    var player = $('#ayztvideoplayer')[0];
    player.paused ? player.play() : player.pause();
});