YouTube APIが準備できていない場合があります

私は自分のAPIを使用してYouTube Vidを追加しようとしています。YouTube APIが準備できていない場合があります

var player; 
 

 
function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('video-intro', { 
 
     width: 100, 
 
     height: 100, 
 
     videoId: '<id>', 
 
     playerVars: { 
 
      color: 'white', 
 
      controls: 0, 
 
      showinfo: 0 
 
     } 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#play-intro').click(function() { 
 
     player.playVideo(); 
 
     $('#video-intro').addClass('showvid'); 
 
    }); 
 
});

#video-intro { 
 
    display: none; 
 
    &.showvid { 
 
    display: block; 
 
    } 
 
}

<head> 
 
    <script src="https://www.youtube.com/iframe_api"></script> 
 
</head> 
 

 
<body> 
 
    <div id="video-intro"></div> 
 
    <a id="play-intro">Play</a> 
 
</body>

出典

2017-07-03 Cake

：

Cannot read property 'playVideo' of undefined

これは私がAPIを含ん方法です。しかし、時々私は私の再生ボタンをクリックしたときに、私はエラーを取得（。本当にランダムほとんどの時間、それは動作します）

イベントを呼び出してプレイヤーを開始する必要があります。また、ロードする前にビデオを再生することはできません。なぜあなたは未定義のエラーを得ているのですか？イベントや機能を追加しました。より良い例では、残念ながら、それはSOスニペットに動作していないここでenter link description here

var player; 
 

 
function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('video-intro', { 
 
     width: 100, 
 
     height: 100, 
 
     videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short) 
 
     playerVars: { 
 
      color: 'white', 
 
      controls: 0, 
 
      showinfo: 0 
 
     }, 
 
     events: { 
 
      'onReady': onPlayerReady, 
 
      'onStateChange': onPlayerStateChange 
 
      } 
 
    }); 
 
    
 
} 
 
function onPlayerReady(event) { 
 
     event.target.playVideo(); 
 
     } 
 
var done = false; 
 
function onPlayerStateChange(event) { 
 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
 
     setTimeout(stopVideo, 6000); 
 
      done = true; 
 
     } 
 
} 
 
function stopVideo() { 
 
     player.stopVideo(); 
 
}  
 
     
 
     
 
     
 
$(document).ready(function() { 
 
    $('#play-intro').click(function() { 
 
     onYouTubeIframeAPIReady(); 
 
     
 
     $('#video-intro').addClass('showvid'); 
 
    }); 
 
});

#video-intro { 
 
    display: none; 
 
    &.showvid { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head> 
 
    <script src="https://www.youtube.com/iframe_api"></script> 
 
</head> 
 

 
<body> 
 
    <div id="video-intro"></div> 
 
    <a id="play-intro">Play</a> 
 
</body>

出典

2017-07-03 11:38:30

うーん、今、私のビデオは（すでにバックグラウンドで再生を開始6秒間音が聞こえます）。私はボタンを押すだけでそれを再生したい。また、私の '閉じる/停止'ボタンはもう動作しません。私の閉じるボタンは、以下の関数を呼び出します：player.pauseVideo（）; player.seekTo（0）;.しかし、stopVideoとpauseVideoが存在しないというエラーが返されます。 – Cake

あなたはプレイヤーのpaly/pauseボタンが必要な場合や、再生するために外部ボタンが必要な場合はどうですか？ @Cake –

この例を確認するhttp://jsfiddle.net/BeUFb/326/ @Cake –

を見つけることができます。最初に要素を表示しようとすると（あなたのCSSは機能していません）、player.playVideo()を呼び出すと、質問に示されているエラーが発生します。

、あなたのiFrameを表示するにはCSS下記の使用

#video-intro { 
    display: none; 
} 
#video-intro.showvid { 
    display: block !important; 
}

HTML：

<div id="video-intro"></div> 
<a id="play-intro">Play</a> 
<script src="https://www.youtube.com/iframe_api"></script> 
<script> 
    var player; 

    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('video-intro', { 
     width: 100, 
     height: 100, 
     videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short) 
     playerVars: { 
     color: 'white', 
     controls: 0, 
     showinfo: 0 
     } 
    }); 
    } 
    document.getElementById("play-intro").addEventListener("click", function() { 
    document.getElementById('video-intro').className = 'showvid'; 
    player.playVideo(); 
    }); 
</script>

Fiddle

出典

2017-07-03 12:00:20

YouTube APIが準備できていない場合があります

答えて

関連する問題