0
私は3つのスライダを持っていて、それぞれに1つのYoutubeビデオがあります。ページを更新した後にJavascriptが機能しない - なぜですか？
各ビデオにはカスタムのSTART/STOP JavaScriptボタンがあります。
ページが初めて読み込まれるときにスクリプトが完全に機能します。リフレッシュ後、javascriptボタンはもう機能しません。実際には、私はキャッシュをクリアしてブラウザを再起動する必要がある場合もあります。
ありがとうございました！
// START STOP YOUTUBE VIDEO
\t // Inject YouTube API script
\t var tag = document.createElement('script');
\t tag.src = "//www.youtube.com/player_api";
\t var firstScriptTag = document.getElementsByTagName('script')[0];
\t 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
\t function onYouTubePlayerAPIReady() {
\t
\t // create the global player from the specific iframe (#video)
\t
\t // for Slider 1
\t \t playerA = new YT.Player('player1', {
\t \t events: {
\t \t // call this function when player is ready to use
\t \t 'onReady': onPlayerReady
\t \t }
\t \t });
\t // for Slider 2
\t \t playerB = new YT.Player('player2', {
\t \t events: {
\t \t // call this function when player is ready to use
\t \t 'onReady': onPlayerReady
\t \t }
\t \t });
\t // for Slider 3
\t \t playerC = new YT.Player('player3', {
\t \t events: {
\t \t // call this function when player is ready to use
\t \t 'onReady': onPlayerReady
\t \t }
\t \t });
\t
\t };
\t // Bind Events
\t function onPlayerReady(event) {
\t
\t \t // bind Slider 1 events
\t \t var playButton = document.getElementById("VideoPlayBtn1");
\t \t playButton.addEventListener("click", function() {
\t \t playerA.playVideo();
\t \t });
\t \t
\t \t var pauseButton = document.getElementById("VideoPauseBtn1");
\t \t pauseButton.addEventListener("click", function() {
\t \t playerA.pauseVideo();
\t \t });
\t \t // bind Slider 2 events
\t \t
\t \t var playButton = document.getElementById("VideoPlayBtn2");
\t \t playButton.addEventListener("click", function() {
\t \t playerB.playVideo();
\t \t });
\t \t
\t \t var pauseButton = document.getElementById("VideoPauseBtn2");
\t \t pauseButton.addEventListener("click", function() {
\t \t playerB.pauseVideo();
\t \t });
\t \t // bind Slider 3 events
\t \t
\t \t var playButton = document.getElementById("VideoPlayBtn3");
\t \t playButton.addEventListener("click", function() {
\t \t playerB.playVideo();
\t \t });
\t \t
\t \t var pauseButton = document.getElementById("VideoPauseBtn3");
\t \t pauseButton.addEventListener("click", function() {
\t \t playerB.pauseVideo();
\t \t });
\t \t
\t \t };<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>
コードスニペットも機能していません。 –
私はこの問題を解決しました。 「// Inject YouTube APIスクリプト」ビットを別のスクリプトに配置し、後で読み込む必要がありました。 – James