想要在视频设置为暂停时显示暂停图标

Question

我希望在电影暂停时显示暂停图标。目前它只显示播放图标。我不知道如何使用javascript帮助做到这一点！

我的HTML：

    <video id="video" height="100%" width="100%" autoplay muted>
      <source src="video/google.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>
    <i class="fa fa-play fa-5x" onclick="playPause()"></i>

    <!-- currently its showing <i class="fa fa-play fa-5x"></i> on play pause both -->
    <!-- want to show <i class="fa fa-pause fa-5x"></i>  on pause -->

我的js：

var myVideo = document.getElementById("video");
 function playPause() { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
 } 

正如您在此图片中看到的那样

Answer 1

我目前无法对此进行测试，但假设您的功能有效，我建议您使用fa-play类名来切换fa-pause类名，这是对您当前职能的简单修改：

var myVideo = document.getElementById("video");

function playPause() { 
    if (myVideo.paused) {
        myVideo.play();

        // removes the 'fa-pause' class from
        // the element:
        myVideo.classList.remove('fa-pause');

        // adds the 'fa-play' class to
        // the element:
        myVideo.classList.add('fa-play');
    }
    else {
        myVideo.pause();
        myVideo.play();
        myVideo.classList.remove('fa-play');
        myVideo.classList.add('fa-pause');
    }
}

参考文献：

• Element.classList API。

Answer 2

为自己制作一个雕文暂停图标，并根据您的目的显示：阻止或不显示。

你可以在Icomoon上免费制作一个