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

问：

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

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

1st. Ajax 调用的代码片段 2nd. 播放后取消静音视频的代码片段 3rd. 代码片段在网页上的任何位置首次初始单击或触摸手势后播放视频。

第一个代码片段以下代码片段用于在用户滚动页面后通过 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);
});

第 3 个代码片段（用于通过单击或触摸手势在网页上播放 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);
    }
}

更新：

我在 ajax 中添加的附加功能将成功工作者称为我的魅力。我现在遇到的唯一问题是在上面列出的第 3 个代码片段中，有一个附加到事件侦听器的布尔属性，该属性仅触发并调用该函数一次。 如果我删除 Boolean 属性，则事件侦听器会在每次单击或触摸启动事件时触发，并连续调用分配的函数。{ once: true}

我需要事件侦听器触发一次，并且“在每次ajax调用之后”只调用分配的函数一次