我有3个滑块,每个滑块有1个Youtube视频。
每个视频都有自定义的START/STOP javascript按钮。
当第一次加载页面时,我的脚本运行得很好。刷新后,javascript按钮不再工作。事实上,在我清除缓存之前,它们不会起作用,通常我甚至需要重新启动浏览器。
谢谢你的小费!
// START STOP YOUTUBE VIDEO
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Set global variable for the player
var playerA;
var playerB;
var playerC;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
// for Slider 1
playerA = new YT.Player('player1', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
// for Slider 2
playerB = new YT.Player('player2', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
// for Slider 3
playerC = new YT.Player('player3', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
};
// Bind Events
function onPlayerReady(event) {
// bind Slider 1 events
var playButton = document.getElementById("VideoPlayBtn1");
playButton.addEventListener("click", function() {
playerA.playVideo();
});
var pauseButton = document.getElementById("VideoPauseBtn1");
pauseButton.addEventListener("click", function() {
playerA.pauseVideo();
});
// bind Slider 2 events
var playButton = document.getElementById("VideoPlayBtn2");
playButton.addEventListener("click", function() {
playerB.playVideo();
});
var pauseButton = document.getElementById("VideoPauseBtn2");
pauseButton.addEventListener("click", function() {
playerB.pauseVideo();
});
// bind Slider 3 events
var playButton = document.getElementById("VideoPlayBtn3");
playButton.addEventListener("click", function() {
playerB.playVideo();
});
var pauseButton = document.getElementById("VideoPauseBtn3");
pauseButton.addEventListener("click", function() {
playerB.pauseVideo();
});
};
<iframe id="player1" class="VideoA" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen="0"></iframe>
<button id="VideoPlayBtn1" >Play</button></div>
<button id="VideoPauseBtn1">Pause</button></div>
<iframe id="player1" class="VideoA" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen="0"></iframe>
<button id="VideoPlayBtn2" >Play2</button></div>
<button id="VideoPauseBtn2">Pause2</button></div>
<iframe id="player3" class="VideoA" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&showinfo=0" frameborder="0" allowfullscreen="0"></iframe>
<button id="VideoPlayBtn3" >Play3</button></div>
<button id="VideoPauseBtn3">Pause3</button></div>
您可以通过在java脚本中实现以下代码来刷新页面
使用location.reload();方法
有关更多信息,请参阅此