为通过 Ajax 附加的视频元素初始化 jQuery 和 JavaScript

Question

我正在使用 ajax 将视频元素附加到网页。附加新视频后，我注意到一些 JavaScript 和 jQuery 没有初始化。

我需要协同工作 3 个代码片段。

第一。 Ajax 调用的代码片段 第二。播放视频后取消静音的代码片段 第三。代码片段在网页上任意位置首次单击或触摸手势后播放视频。

*第一个代码片段 = 以下代码片段用于在用户滚动页面后通过 Ajax 调用附加视频。 **

var step = 1;
var loading = false;

$(window).scroll(function(){
    if ($(window).scrollTop() >= $(document).height()-$(window).height()-1900){
        if(loading === false){
            loading = true;
            $.ajax({
                url: 'HTTPS://ENTER URL HERE.COM'+step,
                success: function (data) { step++; $('main2').append(data); loading = false; },
                dataType: 'html'
            });
        }
    }
});

我希望附加的视频在点击或触摸网页后自动开始播放，并在视频开始播放后取消静音。

我尝试过一些小的调整，但没有成功地使其与“通过ajax附加的视频”一起使用，但是当视频在初始加载期间已经在页面上时，这些代码可以完美地协同工作。

我需要下面的两个代码片段才能在 ajax 之后工作。

第二个代码片段（用于在开始后取消具有自动播放属性的html视频的静音）

  $("video").on('play',function(){
          $("video").prop('muted', false);
           });

$("video").on('pause',function(){
     $("video").prop('muted', true);
});

$("video").on('ended',function(){
      $("video").prop('muted', true);
});

第三个代码片段（用于通过单击或触摸手势在网页上播放 Html 视频。）

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
});

document.body.addEventListener("click", playVideoOnLowPower,  { once: true });
document.body.addEventListener("touchstart", playVideoOnLowPower,  { once: true });
function playVideoOnLowPower(){
try{
const videoElements = document.querySelectorAll("video");
for (i = 0; i < videoElements.length; i++) {
if (videoElements[i].playing) {
// video is already playing so do nothing
console.log('Playing');
}
else {
// video is not playing so play video now
videoElements[i].play();
console.log('Not Playing');
  }
}
}
catch(err) {
console.log(err);
}
}

Answer 1

因为，您通过ajax绑定了视频，但是在ajax成功时，您只是将视频绑定到

$('main2')

并且没有重新绑定事件。它不会自动具有您之前绑定的事件侦听器。因此，您需要在ajax成功后重新绑定事件。