我正在尝试创建一个用户可以点击的按钮，它将强制页面上所有嵌入的youtube视频同时开始播放，静音和循环。
这是我试图实现按钮上的页面-www.missingnewyork.com/last-seen
要嵌入每个视频我使用以下代码，现在包括？enablejsapi=1 after each url -

<div id="horizontalcontainer">
        <div id="scrolling-wrapper-video">
            <div class="videocard1">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/1i3x82LoQ1M?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/UrJmZ57EHwg?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/kgcB41C9i94?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/qB5ityfsboU?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/RM0nrCooQic?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>               
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/wqobN25apx4?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/4niCIE9xca4?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/MGWwy_zt6KU?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/JheP24KKaYo?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/8LuzXamIyjE?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_jv9TQlrru8?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/0TBYVXG1css?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/KqQqxC7aGhw?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/VUzoFhqYbo8?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/ypQjjIoO1Mc?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>                  
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/lzY70qA2Tr4?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/x-UprcCZIX0?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>               
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/DH-TFgizhxw?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/bme8Aa_Z1X0?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>  
            <div class="videocard">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/kw3SAx4Hsd8?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
            <div class="videocardlast">
                <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/86DRzKe69i8?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            </div>              
        </div>
    </div>

我试过使用下面的功能，这是在这篇文章的答案提供-

function playAllVideos() {
    var videos = document.querySelectorAll('iframe[src^="https://www.youtube.com/embed/"]');
    videos.forEach(function(video) {
        video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        video.contentWindow.postMessage('{"event":"command","func":"mute","args":""}', '*');
        video.contentWindow.postMessage('{"event":"command","func":"setLoop","args":"1"}', '*');
    });
}

这是我正在使用的按钮

<button id="play-all" style="position: fixed; top: 20px; left: 20px;">PLAY ALL</button>

这是我必须让按钮和功能有关系的东西

var playAllButton = document.getElementById('play-all');

playAllButton.addEventListener('click', playAllVideos);

不幸的是，当我点击按钮时，什么也没有发生。我想最后这段代码可能有什么问题。有人知道我哪里做错了吗
为了澄清，我只希望视频自动播放/循环/静音，如果，用户点击播放所有按钮。如果用户不点击播放所有按钮，我需要的网页，以完全按照它目前的行为。
谢谢你的帮助！

1条答案

按热度按时间

lymgl2op1#

这里有两个解决问题的方法;

第一种解决方案，你应该在url中添加?enablejsapi=1，在iframe标签中添加allow="autoplay"（你已经在iframe中允许自动播放），这样你的函数就可以工作了。

<iframe src="https://www.youtube.com/embed/x-UprcCZIX0?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Reference

第二个解决方案，（不是最好的） 是修改iframe源代码，在它们的src中包含?autoplay=1&mute=1&loop=1选项。它不能给予最流畅的体验，一次播放所有视频，因为它需要第二次加载所有视频，由于改变来源，但它工作正常。我在你的网站上试过linked here。

如果你想停止所有的视频，只需从源中删除选项。

function playAllVideos() {
    var videos = document.querySelectorAll('iframe[src^="https://www.youtube.com/embed/"]');

    videos.forEach(function(video) {
        video.src = video.src + "?autoplay=1&mute=1&loop=1";
    });
}

赞(0）回复(0）举报 2023-05-02

css 强制页面上所有嵌入的YouTube视频同时播放、静音和循环播放的按钮

1条答案

相关问题

热门标签

最新问答