如何检测 iframe 视频何时结束？没有 API

Posted 2023-05-09

【中文标题】如何检测 iframe 视频何时结束？没有 API

【英文标题】：How to detect when Iframe video ends? No API

【发布时间】：2018-06-28 16:14:22

【问题描述】：

我的网站上生成了一个 iframe。 iframe 的 src 是数据库中的视频 ID。我想知道，我怎样才能检测到视频播放完毕。 我嵌入的 youtube 视频：

echo "<iframe width='50%' height='60%' id='cc' src='https://www.youtube.com/embed/" . $data_song[0] . "' frameborder='1' allowfullscreen></iframe><br>";

感谢您的建议。

【问题讨论】：

你必须去前端区域。看看iframe访问和视频监听器......也许Q太板了。

【参考方案1】：

好的，既然你是用 iframe 来串流 youtube 视频的，那么你想要的就可以通过这个来实现了，

当 Player.Status = 0 时，表示视频已停止。我已经评论了这些，以便您轻松理解。

    <script type="text/javascript">

 var player;

$(document).ready(function () 
    onYouTubePlayerAPIReady();
);


 function onYouTubePlayerAPIReady() 
  player = new YT.Player('ytplayer', 
    events: 
        'onStateChange': getStatus
       
    );
 

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

    function getStatus() 

    var sStatus;
    sStatus = player.getPlayerState();

      if (sStatus == -1)   //Video has not started yet

      else if (sStatus == 0)   

      // video has stopped. This is the event that you want

     
     else if (sStatus == 1)   //Video is playing
     else if (sStatus == 2)   //Video is paused
     else if (sStatus == 3)   //video is buffering 
     else if (sStatus == 5)   //Video is cued.
   

  </script>

【讨论】：

这似乎对我不起作用..我在 php 类中生成 <iframe> 并从我的表中获取 src。您认为在 javascript 中创建 <iframe> 更好吗？无论如何，感谢您的帮助。

FirstTag 的事情是愚蠢的。如果页面中有任何其他内容或页面中有其他 javascript，则此操作将不起作用 :-) 如果页面仅包含此视频，则此操作将起作用。

【参考方案2】：

如果你使用标签<video>更好。

例如：

你的 html

<video id="videoplayer">.

你的 JS

var myvideo = document.getElementById('videoplayer'); myvideo.addEventListener('ended',function() // The video's callback ,false);

【讨论】：

这对 iframe 中显示的 any 视频有何作用？

您无法将视频控制到 iframe 中。 <video> 标签就是为此而生的。

好的，那么请举例说明如何使用<video>嵌入Youtube视频