刷新页面后Javascript不起作用 - 为什么?



我有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();方法

有关更多信息,请参阅此

相关内容

  • 没有找到相关文章