Javascript - 如何在视频结束时更改 iframe 的 src

Posted 2023-05-09

【中文标题】Javascript - 如何在视频结束时更改 iframe 的 src

【英文标题】：Javascript - How to change src of iframe when video ends

【发布时间】：2018-07-12 06:15:10

【问题描述】：

我想知道如何在视频结束时自动更改 iframe 的来源。 我正在使用这个脚本来生成 iframe 和函数 onPlayerStateChange 来检测视频何时结束。视频播放完毕后，我基本上需要更改videoID。 我的 JS：

    <script src="http://www.youtube.com/player_api"></script>
<script>
    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() 
        player = new YT.Player('player', 
          width: '640',
          height: '390',
          videoId: 'gPDcwjJ8pLg',
          events: 
            onStateChange: onPlayerStateChange
          
        );
    

    // when video ends
    function onPlayerStateChange(event)         
        if(event.data === 0) 

        
    

</script>

感谢您的建议。

【问题讨论】：

立即想到的是一个播放列表。有没有在这种情况下不起作用的原因？能不能详细一点？

好吧，我正在开发一个网站，您可以在其中使用嵌入式 youtube 视频链接创建自己的播放列表。所以我想在视频结束时更改数据库中的视频 ID。

Don't use Iframes. They're "evil". 此外，Youtube 提供了自己的视频嵌入代码。如果这对您不起作用，您可能会使用 html5 video 标签和 JS 来安装一些东西。

【参考方案1】：

如果您想对多个视频执行此操作，则需要对其进行概括。但我认为这个例子（index.html 文件）应该可以工作：

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>

<script>

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() 
        player = new YT.Player('player', 
          height: '390',
          width: '640',
          videoId: '0Bmhjf0rKe8',
          events: 
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          
        );
    

    // autoplay video
    function onPlayerReady(event) 
        event.target.playVideo();
    

    // when video ends
    function onPlayerStateChange(event)         
        if(event.data === 0)             
            player.loadVideoById('iRXJXaLV0n4');
        
    

</script>

这里是 jsFiddle：http://jsfiddle.net/lukeschlangen/dbrhgdkb/1/