Question

当我运行代码时，我希望按钮从暂停变为播放，反之亦然。我该怎么做才能让按钮从暂停状态开始播放？我使用了本教程https://www.youtube.com/watch?v=V8_wEZD160g。谢谢！

    <style type="text/css">
        div#video_controls_bar {
            padding:10px;
        }
    </style>
         <script>
             function playPause(btn, vid){
                 var vid = document.getElementById(vid);
                 vid.load();
             }
             if(vid.paused){
                 vid.play();
                 btn.innerHTML = "Pause";
             }
             else{
                 vid.pause();
                 btn.innerHTML = "Play";
             }
         </script>
    <video id="ruqia_video1"  width="320" height="180" >
        <source src="videos/Rooqia01.mp4" />
    </video>
    <div id="video_controls_bar">
        <button id="playpausebtn" onclick="PlayPause(this, 'ruqia_video1' )">Pause</button>
    </div>

Answer 1

有一些错误，但我确实有效：https://jsfiddle.net/fu8eoofe/2/

你的功能实际上看起来像这样：

function playPause(btn, vid){
  var vid = document.getElementById(vid);
  vid.load();
}

在if语句之前关闭了。第二件事是，当函数的名称为PlayPause时，您正在调用名为playPause的函数。

为了演示目的，我用新变量替换了vid.paused（如果没有视频，它将无效）。

Answer 2

您的代码中有一些错误。纠正：

<style type="text/css">
        div#video_controls_bar {
            padding:10px;
        }
    </style>
         <script>
             function playPause(btn, vid){
                 var vid = document.getElementById(vid);
                 vid.load();

                 if(vid.paused){
                     vid.play();
                     btn.innerHTML = "Pause";
                 }
                 else{
                     vid.pause();
                     btn.innerHTML = "Play";
                 }
             }
         </script>
    <video id="ruqia_video1"  width="320" height="180" >
        <source src="videos/Rooqia01.mp4" />
    </video>
    <div id="video_controls_bar">
        <button id="playpausebtn" onclick="playPause(this, 'ruqia_video1' )">Pause</button>
    </div>

如何使按钮从暂停变为播放

2 个答案: