gpt4 book ai didi

javascript - Youtube JavaScript API - 播放任何一个 youtube 视频时暂停音频

转载 作者:数据小太阳 更新时间:2023-10-29 05:55:19 25 4
gpt4 key购买 nike

我的网站上有背景噪音,客户希望在整个网站上循环播放,所以我设置了一个 <audio>自动播放和循环播放的标签。

在几个页面上,我有多个 Youtube 嵌入式 iframe,它们是使用来自 youtube 视频页面的嵌入式代码声明的,例如:

<iframe width="420" height="315" src="http://www.youtube.com/embed/Y3OR9HnB14I?rel=0" frameborder="0" allowfullscreen></iframe>

他们想要的是,当播放/恢复播放 YouTube 视频时,音频暂停,当停止/暂停 YouTube 视频时,恢复音频。

有没有人知道如何使用 Youtube Javascript API 执行此操作?

最佳答案

您应该能够使用 Youtube Javascript Player API 来执行此操作。您可以在所有嵌入式播放器上收听 onStateChange 事件,当“1”(播放)来自其中任何一个时,您暂停 .当“2”(暂停)或“0”(结束)出现时,您可以再次恢复。

这对我有用:

<html>
<head>
<script language="javascript">
var player = null;
var lobbyAudio = null;

function onYouTubePlayerReady(playerapiid) {
player = document.getElementById(playerapiid);
lobbyAudio = document.getElementById('lobby-audio');
player.addEventListener("onStateChange", "onYouTubePlayerStateChange");
}

function onYouTubePlayerStateChange(state) {
switch (state) {
case 1: // playing
lobbyAudio.pause();
break;
case 0: // ended
case 2: // paused
lobbyAudio.play();
break;
}
}
</script>
<body>
<audio id="lobby-audio" src="lobby-audio.mp3" autoplay="True" controls="True" loop="True"></audio>

<object width="640" height="360">
<param name="movie"
value="https://www.youtube.com/v/t-aOvEweUEw?enablejsapi=1&playerapiid=ytplayer1&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed
id="ytplayer1"
src="https://www.youtube.com/v/t-aOvEweUEw?enablejsapi=1&playerapiid=ytplayer1&version=3"
type="application/x-shockwave-flash" allowfullscreen="true"
allowScriptAccess="always" width="640" height="360">
</embed>
</object>
</body>
</html>

我把它留作练习,让您了解如何跟踪多个视频的状态 =) 但提示是,页面上的每个播放器都会调用一次 onYouTubePlayerReady()。您可以为每个玩家指定不同的 playerapiid 以区分他们。 (在上面的示例中,我将“ytplayer1”用于单人游戏。

关于javascript - Youtube JavaScript API - 播放任何一个 youtube 视频时暂停音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16964509/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com