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

Question

我通过脚本附加video标签及其控件。我已成功绑定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对象。在调用本机元素之前，您需要先检索它们。试试这个：

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

另请注意，您是通过类名而不是 id 将视频元素附加到div 的，因此如果您以后有两个带有类 ayztd 的div，您可能会遇到麻烦。