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，则可能会遇到麻烦。

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

3 个答案: