草庐IT

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

coder 2024-07-28 原文

我需要一些关于 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" width="385" height="230" 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" width="385" height="230" 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" width="385" height="230" 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>

更新

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

最佳答案

你可以这样做......

给每个 iframe 一个类，以便它可以被识别为 iframe for youtube player。 这里我给了“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/

关于javascript - 播放新视频时停止所有视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14890267/

javascript播放34ltgtapiyoutubeyoutube-api

有关javascript - 播放新视频时停止所有视频的更多相关文章

  1. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  2. ruby-on-rails - 跳过状态机方法的所有验证 - 2

    当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

  3. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  4. ruby - 获取模块中定义的所有常量的值 - 2

    我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？ 最佳答案 为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

  5. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  6. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  7. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  8. ruby - 如何遍历 Ruby 中所有正则表达式匹配的字符串？ - 2

    我们有一个字符串:“”这个正则表达式://i如何从当前字符串中获取所有匹配项？ 最佳答案 "".scan(//)参见scan在ruby​​-docs上 关于ruby-如何遍历Ruby中所有正则表达式匹配的字符串？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6857852/

  9. ruby-on-rails - 在所有延迟的作业之前 Hook - 2

    是否可以在所有delayed_job任务之前运行一个方法？基本上，我们试图确保每个运行delayed_job的服务器都有我们代码的最新实例，所以我们想运行一个方法来在每个作业运行之前检查它。(我们已经有了“check”方法并在别处使用它。问题只是关于如何从delayed_job中调用它。) 最佳答案 现在有一种官方方法可以通过插件来做到这一点。这篇博文通过示例清楚地描述了如何执行此操作http://www.salsify.com/blog/delayed-jobs-callbacks-and-hooks-in-rails(本文中描述

  10. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

随机推荐