Question

我的应用程序有播放列表来播放我正在使用的视频

<div class="thumbnail">
    <div class="video-container">
        <iframe width="100%" src="//www.youtube.com/embed/{{ media.src }}" frameborder="0 " allowfullscreen></iframe>
    </div>
</div>

所以现在如何添加播放列表视频。

Answer 1

src =“https://www.youtube.com/embed/videoseries?list=PL55713C70BA91BD6E”frameborder =“0”

fiddle

在您的情况下media.src="videoseries?list=PL55713C70BA91BD6E"

<强>更新

您可以使用IFrame Player API创建自己的播放列表：

下面是一个示例，不会在堆栈溢出上运行，将代码粘贴到本地html文件中并在浏览器中打开它。

  player = new YT.Player('player', {
            width: 600,
            height: 400,
            videoId: 'f4Mc-NYPHaQ',//start videos id's
            playerVars: {
                color: 'white',
                playlist: 'YR5ApYxkU-U,Tj75Arhq5ho'//next videos in playlist
            }
  });

index.html下一步

<!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', {
            width: 600,
            height: 400,
            videoId: 'f4Mc-NYPHaQ',
            playerVars: {
                color: 'white',
                playlist: 'YR5ApYxkU-U,Tj75Arhq5ho'
            },
            events: {
              'onReady': onPlayerReady
            }
        });
    }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
    </script>
  </body>
</html>

将播放列表添加到iframe标记

1 个答案: