Question

我希望在视频播放前显示<i class="fa fa-play fa-5x"></i>，并在视频暂停时显示<i class="fa fa-pause fa-5x"></i>。

＆＃13;

var video = document.getElementsByClassName('vid');
video.addEventListener('click', function() {
  video.play();
}, false);

＆＃13;

<video width="85%" height="auto" class="vid" poster="image/video1.jpg" onclick="this.paused?this.play():this.pause();">
  <source src="video2.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

＆＃13;

我如何实现上述目标？

Answer 1

请务必加载 Font Awesome 样式表。
使用 classList 切换按钮的课程fa-play和fa-pause。
避免使用内联事件处理程序使用 addEventListener
我故意将按钮与视频标签分开，因为它很大并且会遮挡视频。

＆＃13;

var playPause = document.getElementById('btn');
var vid = document.querySelector('.vid');

playPause.addEventListener('click', function(e) {
      e.preventDefault();
      if (!vid.paused) {
        vid.pause();
      } else {
        vid.play();
      }
      playPause.classList.toggle('fa-play');
      playPause.classList.toggle('fa-pause');
      return false;
    }, false);

＆＃13;

#btn {
  pointer-events: auto;
  cursor: pointer;
}

＆＃13;

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

<video width="85%" height="auto" class="vid" poster="https://glpjt.s3.amazonaws.com/so/av/vs34s3.png">
  <source src="https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
<i id="btn" class="fa fa-play fa-5x"></i>

＆＃13;

在视频视频标签上播放/暂停图标

1 个答案: