yplayerに自動再生を追加する

以下のコードに自動再生を追加するにはどうすればよいですか？yplayerに自動再生を追加する

以下のHTMLとJavaScriptコードは、ytplayerのid値を持つページ要素にYouTubeプレーヤーを挿入する簡単な例を示しています。ここで指定されたonYouTubePlayerAPIReady（）関数は、IFrame Player APIコードが読み込まれると自動的に呼び出されます。このコードはプレーヤーのパラメータを定義するものではなく、他のイベントハンドラも定義しません。

<div id="ytplayer"></div> 

<script> 
// Load the IFrame Player API code asynchronously. 
var tag = document.createElement('script'); 
.src = "https://www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

// Replace the 'ytplayer' element with an <iframe> and 
// YouTube player after the API code downloads. 
var player; 
function onYouTubePlayerAPIReady() { 
player = new YT.Player('ytplayer', { 
    height: '360', 
    width: '640', 
    videoId: 'M7lc1UVf-VE' 
}); 
} 
</script>

出典

2017-02-18 user7583366

onPlayerReadyイベントでplayVideo()に電話する必要があります。次のように

function onPlayerReady(event) { 
    event.target.playVideo(); 
}

完全なコードは次のとおりです。

<!DOCTYPE html> 
<html> 
    <body> 
     <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
     <div id="player"></div> 

     <script> 
     // 2. This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 

     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // 3. This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 
      player = new YT.Player('player', { 
       height: '390', 
       width: '640', 
       videoId: 'M7lc1UVf-VE', 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
      event.target.playVideo(); 
     } 

     // 5. The API calls this function when the player's state changes. 
     // The function indicates that when playing a video (state=1), 
     // the player should play for six seconds and then stop. 
     var done = false; 
     function onPlayerStateChange(event) { 
      if (event.data == YT.PlayerState.PLAYING && !done) { 
       setTimeout(stopVideo, 6000); 
       done = true; 
      } 
     } 
     function stopVideo() { 
      player.stopVideo(); 
     } 
     </script> 
    </body> 
</html>

出典

2017-06-20 06:39:50 swapnilsm

この手順に従ってください

ステップ-1

の追加を行うにはので、私はすでに私のプロジェクトで前にこれを行って私たちのYouTubeビデオが読み込まれているiframe。このように

<iframe width="100%" height="378" id="youtube_url" allowfullscreen="1" class="vjs-default-skin" src="https://www.youtube.com/embed/Rk6_hdRtJOE?wmode=opaque&enablejsapi=1&version=3&autoplay=0&controls=0&playerapiid=youtube_player&rel=0&showinfo=0" frameborder="0"> 
     </iframe>

ステップ2

そしてYouTubeのiframeのAPIを追加し

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

ステップ-3

が続いてYouTubeのAPIオブジェクトを作成するには、このコードを使用してcotrollerするためにそれを使用自動再生などのビデオ。

var player = new YT.Player('youtube_videos_url', { 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 

     }); 
function onPlayerReady(event) { 
player.playVideo(); 
}

このコードは、ビデオがロードされてからplayer.playVideo();ビデオが自動的に再生されるときに実行されます。

お手数ですが、

出典

2017-06-20 06:59:55

yplayerに自動再生を追加する

答えて

関連する問題