在播放YouTube播放列表时，当新视频开始时触发事件

Triggering an event when a new video starts while playing a YouTube playlist

本文关键字：视频 开始时 事件 新视频 YouTube 播放 播放列表      更新时间：2023-09-26

我有一个YouTube播放列表;一切都很好。下面是代码:

<div id="player"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            width: '100%',
            height: window.innerHeight-120+'px',
            vq: 'hd720',
            videoId: 'ZnToyoZus74',
            playerVars: {
                'autoplay': 1,
                'loop': 1,
                'showinfo': 0,
                'controls': 0,
                'playlist': [
                    'Glr36uh7Uls,Mx-cOLPqieg,C9uA-LFJS3Q,mKB4j3Lqa3w,tLmLXEShHT8'
                ]
            }
        });
    }
</script>

然而，我想显示与当前正在播放的视频相关的自定义信息，就在它的下面(在一个单独的<div>中，但不覆盖视频)。一旦视频开始，将显示包含第一个视频信息的<div>，一旦视频结束，该div将消失。当第二个视频开始播放时，将显示包含第二个视频信息的不同<div>。

<div>元素将包含一个HTML文件，使用视频的id作为文件名:ZnToyoZus74.html .

在这个例子中，我使用了以下id:

  • ZnToyoZus74
  • Glr36uh7Uls
  • Mx-cOLPqieg
  • C9uA-LFJS3Q
  • mKB4j3Lqa3w
  • tLmLXEShHT8

解决!

这是最后的代码，以防有人正在寻找相同的答案:

<div id="player" style="float:right;"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player;
    function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
    width: '100%',
    height: window.innerHeight-110+'px',
    vq: 'hd720',
    videoId: 'K7XbJ0XLXPY',
    playerVars: { 'autoplay': 1, 'loop': 1, 'showinfo': 0, 'controls': 0, 'playlist':['UiUZOo1b6m0,w0Sm9tRJDDA']},
    events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        evt.target.playVideo();
    }
    function onPlayerStateChange(evt) {
        if (evt.data == YT.PlayerState.PLAYING) {
            var url = evt.target.getVideoUrl();
            var match = url.match(/[?&]v=([^&]+)/);
            var videoId = match[1];
            document.getElementById("myiframe").src='videosinfo/'+videoId+'.html';
        }
    }
</script>
<iframe  name="myiframe" id="myiframe" width="100%" height="200px" allowtransparency=true frameborder="0" ></iframe>
相关文章：