正文 

当前位置： 首页 > 问答 >

播放新视频时停止所有视频

     2023-02-24     139

关键词：

【中文标题】播放新视频时停止所有视频【英文标题】：stop all videos when a new video is played 【发布时间】：2013-01-31 03:59:30 【问题描述】：

我需要一些有关 Youtube API 和嵌入视频的帮助。当单击新的 youtube 视频时，我想停止在当前页面上运行的所有 iframe 视频（这里我只拍摄了 3 个，但有几个视频）。在某个时间点，只能运行一个 iframe youtube 视频。我已经阅读了文档 [https://developers.google.com/youtube/js_api_reference][1] 并且能够写到这里......

更新：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://www.youtube.com/player_api"></script>
        <script type="text/javascript">
            var player;
             function onYouTubeIframeAPIReady() 
                player = new YT.Player('player', 
                    events: 
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    
                );
            

            var done = false;
              function onPlayerStateChange(event) 
                if (event.data == YT.PlayerState.PLAYING && !done) 
                    alert("hi5");
                    player1.stopVideo();
                    player2.stopVideo();
                    done = true;
                
               
        </script>
    </head>
    <body>
        <div>TODO write content</div>
        <ul class="image-grid" id="list"> 
            <li>
                <iframe id="player"   src="http://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe> 
            </li>
            <li>
                <iframe id="player1"   src="http://www.youtube.com/embed/wSrA5iQGlDc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
            </li>
            <li>
                <iframe id="player2"   src="http://www.youtube.com/embed/c7b_WLkztXc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
            </li>
        </ul>
    </body>
</html>

更新

    onStateChange 事件未触发（工作） 在这个例子中，我有 3 个视频，实际上它有更多视频，而不是为每个视频编写 onPlayerStateChange..是否可以为所有视频使用数组..在函数 onPlayerStateChange 中，编写 player[] .stopVideo() 和 this.playvideo().. 这类东西..（需要帮助） 请看这个小提琴http://jsfiddle.net/LakshmiV/kn5Sf/ 请帮忙。

【问题讨论】：

【参考方案1】：

你可以做这样的事情......

为每个 iframe 赋予一个类，以便可以将其识别为 youtube 播放器的 iframe。 这里我给了“yt_players”

现在你可以使用下面的代码了...

<script type="text/javascript">
    players = new Array();

    function onYouTubeIframeAPIReady() 
        var temp = $("iframe.yt_players");
        for (var i = 0; i < temp.length; i++) 
            var t = new YT.Player($(temp[i]).attr('id'), 
                events: 
                    'onStateChange': onPlayerStateChange
                
            );
            players.push(t);
        
    
    onYouTubeIframeAPIReady();

    function onPlayerStateChange(event) 
        if (event.data == YT.PlayerState.PLAYING) 
            var temp = event.target.a.src;
            var tempPlayers = $("iframe.yt_players");
            for (var i = 0; i < players.length; i++) 
                if (players[i].a.src != temp) 
                    players[i].stopVideo();
            
        
    
</script>

已更新代码...这应该对您有所帮助。

在这里查看...http://jsfiddle.net/anubhavranjan/Y8P7y/

【讨论】：

您可以做的是调试事件参数中的数据并检查您是否可以看到正在播放的播放器。视情况而定，您可以尝试关闭和打开视频。 错过了对 onYouTubeIframeAPIReady() 的调用。立即查看 嘿，它正在工作...您需要等待，看看视频何时开始...如果您愿意，您甚至可以检查事件 YT.PlayerState.BUFFERING 并停止其他视频。是的，您可以将对象存储在数组中并获取 iframe 的 id 并相应地停止视频 现在看一下代码......它应该可以帮助你......还更新了链接jsfiddle.net/anubhavranjan/Y8P7y希望它有帮助 非常感谢阿努巴夫！它的工作就像一个魅力..我只能投票一次:(如果不是，我会给你 100 票..你的迅速反应和技术技能非常感谢！【参考方案2】：

Coby 对https://***.com/a/13260520/835822 的类似问题的出色回答

使用 an attribute selector 您可以定位来自 Youtube 的任何 iframe，然后使用 jQuery's each 您可以遍历所有这些 iframe。

$(function()
  $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) 
  this.contentWindow.postMessage('"event":"command","func":"pauseVideo","args":""', '*');
);

);

【讨论】：

很好的解决方案。我使用了'iframe[src*="//www.youtube.com/embed/"]'，这样 http 或 https 都可以工作。【参考方案3】：

好概念，但 event.target.a.src 不起作用！将其更改为 event.target.getVideoUrl() 并且工作正常。看看这里

function onPlayerStateChange(event) 

if (event.data == YT.PlayerState.PLAYING) 
    var temp = event.target.getVideoUrl();
    var tempPlayers = $("iframe.yt_players");
    for (var i = 0; i < players.length; i++) 
        if (players[i].getVideoUrl() != temp) players[i].stopVideo();

http://jsfiddle.net/Y8P7y/82/

【讨论】：

退出引导模式时停止播放视频

】退出引导模式时停止播放视频【英文标题】：Stoppingvideofromplayingwhenexitingabootstrapmodal【发布时间】：2016-06-2707:54:14【问题描述】：我对bootstrap很陌生，我似乎无法找到我的问题的答案。我正在使用视频标签嵌入我的网站中播放... 查看详情

使用 swift 我无法弄清楚视频停止后如何进入新屏幕

...：我有一个初始屏幕，上面有一个按钮，当您按下它时会播放视频。然后，一旦电影结束，我希望视频关闭并转到另一个屏幕。目前我可以让按钮播放视频，然后在视频结束时关闭视频，但它会返回到初始屏幕。可以帮忙 查看详情

切换到另一个视频时如何使视频停止播放？

】切换到另一个视频时如何使视频停止播放？【英文标题】：Howtomakethevideotostopplayingwhenchangingtoanothervideo?【发布时间】：2021-09-1318:01:59【问题描述】：在我的网站中，我有一个视频播放器和一些视频，当我播放另一个视频时，我... 查看详情

视频播放停止时如何切换到活动

】视频播放停止时如何切换到活动【英文标题】：Howtoswitchtoactivitywhenvideoplaystop【发布时间】：2011-10-1122:27:25【问题描述】：我对android编程很陌生。我正在VideoView中播放视频，我想在视频播放结束时切换到其他活动。代码如下：... 查看详情

当 onBindViewHolder 调用播放视频时，如果没有在 recyclerview 中停止视频

】当onBindViewHolder调用播放视频时，如果没有在recyclerview中停止视频【英文标题】：whenonBindViewHoldercalledplayvideoandifnotstopvideoinrecyclerview【发布时间】：2019-06-0700:06:56【问题描述】：我需要在调用onBindViewHolder()时播放视频，然后如... 查看详情

视频播放时停止轮播 - Bootstrap 4

】视频播放时停止轮播-Bootstrap4【英文标题】：Stopcarouselwhenvideoplaying-Bootstrap4【发布时间】：2019-08-2322:30:03【问题描述】：我正在创建带有一些视频（不仅是）的Bootstrap(4)轮播，我希望它在视频播放（自动播放）时停止并在视频... 查看详情

灯箱关闭时停止并播放 Iframe 视频

】灯箱关闭时停止并播放Iframe视频【英文标题】：StopandplayIframevideowhenlightboxcloses【发布时间】：2013-04-2209:22:08【问题描述】：我正在制作一个应该显示youtube视频的灯箱。我遇到的第一个问题是，当我关闭灯箱时，我的youtube视频... 查看详情

播放视频时停止播放的背景音乐

】播放视频时停止播放的背景音乐【英文标题】：BackgroundMusicthatstopsplayingwhenvideoisplayed【发布时间】：2013-02-2713:04:06【问题描述】：ツ嗨，我想知道如何将背景音乐添加到网页中结束了。我用来嵌入音频的代码是：&lt;embedsrc=&... 查看详情

关闭手风琴 div 时停止播放 YouTube 视频 [重复]

】关闭手风琴div时停止播放YouTube视频[重复]【英文标题】：StopYouTubevideofromplayingwhenclosingacoordiondiv[duplicate]【发布时间】：2012-08-0722:10:24【问题描述】：可能重复：HowtopauseaYouTubeplayerwhenhidingtheiframe?我有一个播放youtube视频的jquery... 查看详情

视频即使发布也不会停止播放

】视频即使发布也不会停止播放【英文标题】：Videoswon\'tstopplayingevenwhenreleased【发布时间】：2011-08-2310:07:55【问题描述】：这可能是一个相当简单的答案，但我无法自己解决。因此，在我的应用程序中，我有一个页面加载了3个... 查看详情

当背景视频停止时音频停止

...为背景（从头开始）。我添加了一个音频文件，它也开始播放，视频播放完毕后音频停止。<videoposter=""id="bgvid"autoplay><sourcesrc="video/background 查看详情

jQuery - 带有视频的标签...当我在标签之间切换时如何让视频停止播放？

...带有视频的标签...当我在标签之间切换时如何让视频停止播放？【英文标题】：jQuery-Tabwithvideos...howdoIgetvideostostopplayingwhenIswitchbetweentabs?【发布时间】：2012-02-0215:42:18【问题描述】：我是jQuery新手，我设法创建了一个选项卡界面... 查看详情

模态关闭时停止视频

...问题描述】：我正在尝试阻止模式中的视频在它们关闭时播放。问题是我的模态脚本将模态从其原始位置移动到关闭&lt;/body&gt;标记之前。因此，从技术上讲，在模态窗口上方停止视频脚本，在模态窗口关闭后视频永远不会... 查看详情

所有浏览器的 Html 视频自动播放问题

】所有浏览器的Html视频自动播放问题【英文标题】：Htmlvideoautoplayissueforallbrowsers【发布时间】：2018-08-2915:55:20【问题描述】：我在移动浏览器上自动播放html视频时遇到问题。起初，我使用autoplay和playinline属性来实现。它工作但... 查看详情

滚动 UITableView 停止视频播放

】滚动UITableView停止视频播放【英文标题】：ScrollingUITableViewstopsvideoplayback【发布时间】：2016-02-2407:41:23【问题描述】：我有一个UIViewController分为一个UIImage视图，它逐帧流式传输视频更新图像视图和一个加载推文的UITableView。但... 查看详情

为视频播放器启动新活动时，如何强制android视频播放器在视频播放后不退出

】为视频播放器启动新活动时，如何强制android视频播放器在视频播放后不退出【英文标题】：WhenstartinganewActivityforvideoplayer,howtoforceandroidvideoplayertonotexitafterthevideoisplayed【发布时间】：2021-12-0316:35:15【问题描述】：我正在使用以... 查看详情

android切换fragment时视频依旧在播放，没有正常的停止。

...ewPager菜单导航栏的效果。但是在其中某个Fragment界面进行播放视频，切换到其他几个Fragment时，视频还在播放。本以为在视频所在的Fragment中的某个生命周期中进行视频的pause()操作即可，但是将尝试了Fragment所有的声... 查看详情

android切换fragment时视频依旧在播放，没有正常的停止。

...ewPager菜单导航栏的效果。但是在其中某个Fragment界面进行播放视频，切换到其他几个Fragment时，视频还在播放。本以为在视频所在的Fragment中的某个生命周期中进行视频的pause()操作即可，但是将尝试了Fragment所有的声... 查看详情