0

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

如果有可能那怎么办？

当我们在选项卡之间切换时，我尝试过更新 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>

4

3 回答 3

1

您当前正在尝试在错误状态下使用根本不可能的.play()功能。iframe.play is not a function

您想要的是使用提供此功能的 htmlvideo元素。

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

  • 绑定到按钮仅发生在您的$(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();
  })
于 2021-08-19T07:30:00.773 回答
1

更改按钮的 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>

于 2021-08-19T09:04:28.457 回答
0

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

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

于 2021-08-19T07:34:33.730 回答