Ste*_*unn 5 javascript youtube user-controls html5-audio
我在网站上有背景噪音,客户想要在整个网站上循环播放,所以我设置了一个<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"作为单人游戏.
| 归档时间： |
|
| 查看次数： |
3261 次 |
| 最近记录： |