如何使用相同的触发器播放音频和视频

Posted 2023-05-09

技术标签:

【中文标题】如何使用相同的触发器播放音频和视频【英文标题】：How to play audio and video with same trigger 【发布时间】：2021-10-20 20:38:10 【问题描述】：

我想为两个标签使用一个播放暂停按钮。如果您检查代码，我尝试使用相同的播放暂停按钮播放视频和音频。但我只能用它播放音频，不能播放视频。

如果可以的话怎么办？

当我们在选项卡之间切换时，我尝试过更新 id。但问题是它没有更新 DOM。

$(document).ready(function () 
            $("#audio_play").on("click", function () 
                $("#audio").get(0).play();
            )
            $("#audio_pause").on("click", function () 
                $("#audio").get(0).pause();
            )
            $('.menu ul li:nth(1)').on("click", function () 

                $("#audio_play").attr('id', 'video_play');
                $("#audio_pause").attr('id', 'video_pause');

            )
            $("#video_play").on("click", function () 
                $("#video").get(0).play();
            )
            $("#video_pause").on("click", function () 
                $("#video").get(0).pause();
            )
        )

.con
 text-align:center;
 width:156px;
 margin:0 auto;

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full h-screen inset-x-0 mx-auto">
        <!--actual component start-->
        <div class="menu" x-data="setup()">
            <ul class="flex justify-center items-center my-4">
                <template x-for="(tab, index) in tabs" :key="index">
                    <li class="cursor-pointer py-2 px-4 text-gray-500 border-b-8"
                        :class="activeTab===index ? 'text-green-500 border-green-500' : ''" @click="activeTab = index"
                        x-text="tab"></li>
                </template>
            </ul>

            <div class="w-full bg-white p-16 text-center mx-auto border">
                <div x-show="activeTab===0">
                <h1>Audio Player</h1>
                    <audio id="audio"
                        src="https://res.cloudinary.com/foxyplays989/video/upload/v1558369838/LetsGo.mp3"></audio>
                </div>
                <div x-show="activeTab===1">
                <video id="video"   controls src="move.mp4">
                Your browser does not support the video tag.
              </video>
                </div>
                <div x-show="activeTab===2">Content 3</div>
                <div x-show="activeTab===3">Content 4</div>
            </div>
        </div>
        <!--actual component end-->
    </div>
        <div class="flex con">
            <button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none" id="audio_play">play</button>
            <button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-red-500 rounded shadow ripple hover:shadow-lg hover:bg-red-600 focus:outline-none" id="audio_pause">Pause</button>
        </div>
    <script>
        function setup() 
            return 
                activeTab: 0,
                tabs: [
                    "Tab No.1",
                    "Tab No.2",
                ]
            ;
        ;
    </script>

【问题讨论】：

任何人来帮助我视频无法播放，因为找不到文件。你能用实际的视频更新你的代码吗？无需视频尝试使用简单的控制台日志。 @José A. Zapata 【参考方案1】：

您当前正在尝试在 iframe 上使用 .play() 函数，这根本不可能，因为错误状态为 .play is not a function。

您想要的是使用提供此功能的 html video element。

您的代码还有更多问题，请参阅此列表：

绑定到按钮只发生在您的$(document).ready() 函数上。一旦绑定，动作就不会改变，所以改变元素的 id 也没关系。一个解决方案是重新绑定点击事件，如下所示：

$("#video_play").unbind("click").on("click", function () 
  $("#video").get(0).play();
)

如上所述，您的绑定需要在选项卡更改时发生，因此您应该执行以下操作以在每次选项卡单击时重新绑定您的按钮：

function setupButtons()

  $("#video_play").unbind("click").on("click", function () 
      $("#video").get(0).play();
  )
  $("#video_pause").unbind("click").on("click", function () 
      $("#video").get(0).pause();
  )
  $("#audio_play").unbind("click").on("click", function () 
      $("#audio").get(0).play();
  )
  $("#audio_pause").unbind("click").on("click", function () 
      $("#audio").get(0).pause();
  )
  



$(document).ready(function () 

      setupButtons();

  $('.menu ul li:nth(1)').on("click", function () 

      setupButtons();
  )
)

最后一个问题是您的标签点击仅检查从音频到视频的单个切换。我想您希望每次单击都发生这种情况，以便在正确的选项卡上绑定正确的事件。所以你需要重新绑定每个标签点击。因此您可以将选择器更改为 '.menu ul li' 并向您的点击处理程序添加一些逻辑来切换按钮：

  $('.menu ul li').on("click", function () 

  if ($("#video_play").length)
          $("#video_play").attr('id', 'audio_play');
          $("#video_pause").attr('id', 'audio_pause');
       else if ($("#audio_play").length)
          $("#audio_play").attr('id', 'video_play');
          $("#audio_pause").attr('id', 'video_pause');
      

      setupButtons();
  )

【讨论】：

我已根据您的信息修改了代码，但它不起作用。它只播放音频文件而不是视频文件。 @Flo 请更新您问题中的代码，我猜您仍在尝试播放 vimeo 视频。这可能根本不可能，因为他们可能会阻止它。尝试改用以.mp4 结尾的网址。但首先请更新上面的代码。我更新了我的帖子来回答你所有的问题【参考方案2】：

更改按钮的 ID 没有任何作用，因为它是同一个元素，附加了同一个点击事件。您需要在切换选项卡时更改按钮的行为。取消绑定单击，然后使用新行为再次重新绑定。检查更新的代码：

$(document).ready(function () 
            $("#audio_play").on("click", function () 
                $("#audio").get(0).play();
            )
            $("#audio_pause").on("click", function () 
                $("#audio").get(0).pause();
            )
            $('.menu ul li:nth(0)').on("click", function () 

                $("#audio_play").unbind("click");
                $("#audio_pause").unbind("click");
                $("#audio_play").on("click", function () 
                    $("#audio").get(0).play();
                )
                $("#audio_pause").on("click", function () 
                    $("#audio").get(0).pause();
                )
            )
            $('.menu ul li:nth(1)').on("click", function () 

                $("#audio_play").unbind("click");
                $("#audio_pause").unbind("click");
                $("#audio_play").on("click", function () 
                    $("#video").get(0).play();
                )
                $("#audio_pause").on("click", function () 
                    $("#video").get(0).pause();
                )
            )

        )

.con
 text-align:center;
 width:156px;
 margin:0 auto;

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full h-screen inset-x-0 mx-auto">
        <!--actual component start-->
        <div class="menu" x-data="setup()">
            <ul class="flex justify-center items-center my-4">
                <template x-for="(tab, index) in tabs" :key="index">
                    <li class="cursor-pointer py-2 px-4 text-gray-500 border-b-8"
                        :class="activeTab===index ? 'text-green-500 border-green-500' : ''" @click="activeTab = index"
                        x-text="tab"></li>
                </template>
            </ul>

            <div class="w-full bg-white p-16 text-center mx-auto border">
                <div x-show="activeTab===0">
                <h1>Audio Player</h1>
                    <audio id="audio"
                        src="https://res.cloudinary.com/foxyplays989/video/upload/v1558369838/LetsGo.mp3"></audio>
                </div>
                <div x-show="activeTab===1">
                <video id="video"   controls src="video.mp4">
                Your browser does not support the video tag.
              </video>
                </div>
                <div x-show="activeTab===2">Content 3</div>
                <div x-show="activeTab===3">Content 4</div>
            </div>
        </div>
        <!--actual component end-->
    </div>
        <div class="flex con">
            <button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none" id="audio_play">play</button>
            <button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-red-500 rounded shadow ripple hover:shadow-lg hover:bg-red-600 focus:outline-none" id="audio_pause">Pause</button>
        </div>
    <script>
        function setup() 
            return 
                activeTab: 0,
                tabs: [
                    "Tab No.1",
                    "Tab No.2",
                ]
            ;
        ;
    </script>

【讨论】：

是的，你是对的，但我已经使用 jquery 委托函数 $('body').on('click', '#addButton', function() // code here ); 解决了这个问题【参考方案3】：

要使用像$("#video").get(0).play(); 这样的代码，元素"#video" 应该是<video> HTML 标记。您插入了 iframe，这意味着您加载的不是您可以控制的视频，而是包含视频的其他网站的页面。

您无法在 javascript 中修改 iframe 的内容，因此您必须下载一些视频并将其插入为<video> HTML 元素 (https://www.w3schools.com/html/html5_video.asp)。

【讨论】：

我已根据您的信息修改了代码，但它不起作用。它只播放音频文件而不是视频文件。 @dragomirik 您更新为src="move.mp4"，这意味着名称为move.mp4 的文件应与HTML 代码位于同一文件夹中（尝试插入以下链接：https://www.w3schools.com/html/mov_bbb.mp4）

以上是关于如何使用相同的触发器播放音频和视频的主要内容，如果未能解决你的问题，请参考以下文章

GTK3.0中如何使用gstreamer同时播放视频和音频

如何停止从另一个 ViewModel 按钮播放音频