javascript - play/pause icon on video video tag -

i want display <i class="fa fa-play fa-5x"></i>before video played , <i class="fa fa-pause fa-5x"></i> when video paused.

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">      browser not support video tag.  </video>

how can achieve above?

• remember load font awesome stylesheet.
• use classlist switch button's classes fa-play , fa-pause.
• avoid using inline event handlers use addeventlistener
• i intentionally separated button video tag because it's huge , obscure video.

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">      browser not support video tag.  </video>  <i id="btn" class="fa fa-play fa-5x"></i>