Как остановить/воспроизвести видео, которое было динамически добавлено в 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

Рори и Джуниор оба правильные; комбинированное решение может выглядеть примерно так:

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

Также обратите внимание, что вы присоединяя элемент видео в DIV по имени класса, а не идентификатор, так что вы можете столкнуться с проблемами, если вы позже две дивы с классом ayztd ,