如何在laravel中使用javascript在模式弹出窗口中播放动态视频？

<!-- 在需要触发弹窗的页面中 -->
<button id="playVideoBtn">播放视频</button>

<!-- 引入jQuery和Bootstrap -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script>
$(document).ready(function() {
    // 触发按钮或链接点击事件
    $("#playVideoBtn").click(function() {
        // 创建模态弹出窗口的HTML结构
        var modalHtml = '<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">' +
            '<div class="modal-dialog modal-dialog-centered modal-lg" role="document">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<h5 class="modal-title" id="videoModalLabel">视频播放</h5>' +
            '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
            '<span aria-hidden="true">&times;</span>' +
            '</button>' +
            '</div>' +
            '<div class="modal-body">' +
            '<video id="videoPlayer" src="/videos/video.mp4" controls autoplay></video>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>';

        // 将模态弹出窗口的HTML添加到页面中
        $('body').append(modalHtml);

        // 播放视频
        document.getElementById('videoPlayer').play();

        // 关闭模态弹出窗口时移除HTML结构
        $('#videoModal').on('hidden.bs.modal', function() {
            $(this).remove();
        });
    });
});
</script>