Nhận nhiều Video Youtube nhúng để phát tự động theo trình tự

Question

Có cách nào đơn giản để có nhiều video YouTube được nhúng trên một trang và yêu cầu chúng bắt đầu phát ngay khi trang được mở và khi trang đầu tiên kết thúc có lần bắt đầu thứ hai ?

Tôi đã hy vọng một cái gì đó như thế này sẽ làm việc:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425" height="350"></embed></object> 
<br> 
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2"></param><embed src="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2" type="application/x-shockwave-flash" width="425" height="350"></embed></object> 

Và nó cho là người đầu tiên nhưng không phải là thứ hai. Tôi sẽ tưởng tượng rằng tôi có thể cần phải đi sâu vào API. Bất cứ ai có bất cứ đề nghị?

Answer 1

Sử dụng API IFrame của Youtube, bạn có thể thực hiện việc này dễ dàng.

Phần duy nhất bạn cần định cấu hình ở đây là mảng ID youtube. Bạn có thể truy xuất các phần đó từ phần sau/v/trong URL (Nếu cần, bạn có thể sửa đổi javascript để tải URL thay vì ID. Tôi chỉ thích cách này tốt hơn.

<div id="player"></div> 
<script src="//www.youtube.com/iframe_api"></script> 

<script> 
    /** 
    * Put your video IDs in this array 
    */ 
    var videoIDs = [ 
     'OdT9z-JjtJk', 
     'NlXTv5Ondgs' 
    ]; 

    var player, currentVideoId = 0; 

    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '350', 
      width: '425', 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    function onPlayerReady(event) { 
     event.target.loadVideoById(videoIDs[currentVideoId]); 
    } 

    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.ENDED) { 
      currentVideoId++; 
      if (currentVideoId < videoIDs.length) { 
       player.loadVideoById(videoIDs[currentVideoId]); 
      } 
     } 
    } 
</script> 

Answer 2

Tôi không giỏi javascript. Nhưng tôi có một số câu hỏi tương tự trước đây.

you could referece

án video đầu tiên được hoàn thành sau đó chạy thứ hai. bạn có thể đặt 2 chức năng.

<div id="player1"></div> 
<br> 
<object width="425" height="350"><param name="movie" id="player2-param" value="http://www.youtube.com/v/OdT9z-JjtJk"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk" type="application/x-shockwave-flash" width="425" height="350" id="player2-embed"></embed></object> 

sau đó

function onPlayerStateChange(event) {   
      if(event.data === 0) {   
       $('#player2-param').attr('value','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery 
       $('#player2-embed').attr('src','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery 

      } 
     } 

hy vọng điều này có thể giúp bạn và viết một số mã đẹp hơn, cảm ơn.

Answer 3

Đây là ví dụ sử dụng YouTube Iframe Player API

Có hai nhúng riêng biệt (player1 và player2) tự động phát video khi player1 đã được nạp, và nó bắt đầu player2 khi nó hoàn thành

Here is the jfiddle if you want to play around with it.

và mã:...

<div id="player1"></div> 
<div id="player2"></div> 
<script> 
    var tag = document.createElement('script'); 
    tag.src = "//www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    var player1; 
    var player2; 

    function onYouTubeIframeAPIReady() { 
     player1 = new YT.Player('player1', { 
      height: '350', 
      width: '425', 
      videoId: 'OdT9z-JjtJk', 
      events: { 
       'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
      } 
     }); 
     player2 = new YT.Player('player2', { 
      height: '350', 
      width: '425', 
      videoId: 'NlXTv5Ondgs' 
     }); 
    } 

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

    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.ENDED) { 
      player2.playVideo(); 
     } 
    } 
</script> 

Answer 4

Sử dụng API youtube và đặt tự động phát đúng, tạo danh sách phát trên youtube và cung cấp liên kết đến điều đó.

Answer 5

Dựa trên mã mẫu trước. Tôi đã tạo Trình phát Youtube Cơ bản của Vanilla JavaScript- Với danh sách phát. Thanh toán Youtube Player- With playlist

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title>Basic Vanilla JavaScript Youtube Player- With playlist</title> 
 
</head> 
 
<body> 
 
<div class="player" style="width: 480px;height:360px;max-width: 50%;margin: 0 auto;"> 
 
    <div id="youtube" style="width: 100%;height: 100%"></div> 
 
    <div class="controls" style="text-align: center;margin: 0 auto;"> 
 
     <button style="padding: 10px;width: 100px;background-color: #167AC6;" 
 
       onclick="YouTubePlayer.playPrevious()">Prev 
 
     </button> 
 
     <button style="padding: 10px;width: 100px;background-color: #167AC6;margin-left: 30px;" 
 
       onclick="YouTubePlayer.playNext()">Next 
 
     </button> 
 
    </div> 
 
</div> 
 
<script src="//www.youtube.com/iframe_api"></script> 
 
<script> 
 
    var YouTubePlayer = { 
 
     current: 0, 
 
     player: null, 
 
     /** 
 
     * Tracks ids here... 
 
     */ 
 
     videos: [ 
 
      'vQMnaDNw5FQ', 
 
      'Dp6lbdoprZ0', 
 
      'OulN7vTDq1I' 
 
     ], 
 
     currentlyPlaying:function(){ 
 
      console.info('Current Track id', YouTubePlayer.videos[YouTubePlayer.current]); 
 
      return YouTubePlayer.videos[YouTubePlayer.current]; 
 
     }, 
 
     playNext: function() { 
 
      YouTubePlayer.increaseTrack() 
 
      if (YouTubePlayer.player) { 
 
       YouTubePlayer.currentlyPlaying(); 
 
       YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]); 
 
      } else { 
 
       alert('Please Wait! Player is loading'); 
 
      } 
 
     }, 
 
     playPrevious: function() { 
 
      YouTubePlayer.decreaseTrack() 
 
      if (YouTubePlayer.player) { 
 
       YouTubePlayer.currentlyPlaying(); 
 
       YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]); 
 
      } else { 
 
       alert('Please Wait! Player is loading'); 
 
      } 
 

 
     }, 
 
     increaseTrack: function() { 
 
      YouTubePlayer.current = YouTubePlayer.current + 1; 
 
      if (YouTubePlayer.current >= YouTubePlayer.videos.length) { 
 
       YouTubePlayer.current = 0; 
 
      } 
 
     }, 
 
     decreaseTrack: function() { 
 
      YouTubePlayer.current = Math.max(YouTubePlayer.current - 1, 0); 
 
     }, 
 
     onReady: function (event) { 
 
      event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]); 
 
     }, 
 
     onStateChange: function (event) { 
 
      if (event.data == YT.PlayerState.ENDED) { 
 
       YouTubePlayer.playNext(); 
 
      } 
 
     } 
 
    } 
 
    function onYouTubeIframeAPIReady() { 
 
     YouTubePlayer.player = new YT.Player('youtube', { 
 
      height: '350', 
 
      width: '425', 
 
      events: { 
 
       'onReady': YouTubePlayer.onReady, 
 
       'onStateChange': YouTubePlayer.onStateChange 
 
      } 
 
     }); 
 
    } 
 
</script> 
 
</body> 
 
</html>