ビデオビデオタグの再生/一時停止アイコン

Question

ビデオが再生される前に<i class="fa fa-play fa-5x"></i>と表示し、ビデオが一時停止するときに<i class="fa fa-pause fa-5x"></i>と表示します。

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

<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>

どのように私は上記を達成することができますか？

Answer 1

• Font Awesomeスタイルシートをロードすることを忘れないでください。
• 使用classListボタンのクラスfa-playとfa-pauseを切り替えます。
• インラインイベントハンドラを使用することは避けてくださいそれは巨大だとビデオを不明瞭にするので、私は意図的にvideoタグからボタンを分離addEventListener
• を使用しています。

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);

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

<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>