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

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

为自己制作一个字形暂停图标并使其显示：块或 none 取决于您的目的。

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

Answer 2

我目前无法对此进行测试，但假设您的功能有效，我建议切换 fa-play class-name 与 fa-pause class-name，这是对你当前函数的简单修改：

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.

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

Want to show pause icon when video set to pause

html

javascript

css

jquery

font-awesome