其他

1、页面引入Vimeo视频实现JS控制关闭和播放

Vimeo文档：https://developer.vimeo.com/player/sdk/embed

（1）、在网页中引入视频

<div style="padding:56.25% 0 0 0;position:relative;" class="iframe-parent">
    <iframe 
    src="https://player.vimeo.com/video/xxxxx?h=xxxx&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=xxxxx"
    frameborder="0" 
    allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
    style="position:absolute;top:0;left:0;width:100%;height:100%;"
    title="xxxxx">
    </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

（2）、在js中控制视频播放、暂停：

let iframe = document.querySelector('#iframeId');
let player = new Vimeo.Player(iframe);
//播放视频
player.play();
//暂停视频
player.pause()

2、页面引入Youtube视频实现JS控制关闭和播放

文档：https://developers.google.com/youtube/iframe_api_reference

（1）、在网页中引入视频：

<iframe id="youtubePlayer" 
src="https://www.youtube.com/embed/xxxxxxx?si=YLcmaMzUo_89Y_bD&controls=1&modestbranding=1&rel=0&enablejsapi=1" 
title="YouTube video player" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin" 
allowfullscreen>
</iframe>

（2）、在页面中引入iframe_api ：

<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>

（3）、在js中控制视频播放、关闭

<script>
//点击.watch-video打开modal（我的youtube视频嵌入在modal中）
$('.watch-video').click(function () {
     $('#VideoModal').modal('show');
});

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtubePlayer', {
        events: {
            'onReady': function(event) {
                //当modal被打开的时候，视频自动播放
                $('#VideoModal').on('shown.bs.modal', function () {
                     player.playVideo();
                });
            }
        }
    });
}
//当modal被关闭，视频停止播放
$('#VideoModal').on('hidden.bs.modal', function () {
   player.stopVideo();
});
//视频暂停播放：
player.pauseVideo()
</script>