如何用同一个触发器播放音频和视频

Question

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

如果可能，那怎么做？

当我们在选项卡之间切换时，我尝试更新 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" width="320" height="240" 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>

Answer 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();
  })
})

最后一个问题是您的 Tab 键点击仅检查从音频到视频的一次切换。我想您希望它在每次点击时发生，以便在正确的选项卡上绑定正确的事件。所以你需要重新绑定每个标签点击。所以您可以将选择器更改为 '.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();
  })

Answer 2

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

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

Answer 3

更改按钮的 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" width="320" height="240" 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>

如何用同一个触发器播放音频和视频

How to play audio and video with same trigger

javascript

jquery

dom

jquery-events