如何 stop/play 在 DOM 中动态添加的视频

Question

我正在附加 video 标签及其通过脚本的控制。我成功绑定了 div 元素，但无法绑定 play/stop 视频。代码如下：

$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 对象。在调用它们之前，您需要先检索本机元素。试试这个：

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

Answer 2

问题是您在尝试设置均匀的侦听器后附加了视频标签。尝试在创建视频节点及其控件后立即将事件侦听器添加为回调。

在纯 JS 中更容易。

Answer 3

Rory 和 Junior 都正确；组合解决方案可能类似于：

$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>');
bindVideoEventHandler();;

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

另请注意，您是通过 class 名称而非 ID 将视频元素附加到 div，因此如果您以后有两个 divs 与 class ayztd。

如何 stop/play 在 DOM 中动态添加的视频

How to stop/play video which was dynamically added in DOM

javascript

video

jquery