Javascript 视频标签上的播放/暂停图标

我想在播放视频前显示

，在暂停视频时显示

var video=document.getElementsByClassName（'vid'）；
video.addEventListener（'click'，function（）{
video.play（）；
}，假）

您的浏览器不支持视频标记。

记住加载样式表
使用切换按钮的类别
fa play
和
fa pause
避免使用内联事件处理程序使用
我故意将按钮与视频标签分开，因为它很大，会遮挡视频


var playPause=document.getElementById（'btn'）；
var vid=document.querySelector（'.vid'）；
playPause.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
如果（！vid.暂停）{
参阅暂停（）；
}否则{
视频播放（）；
}
playPause.classList.toggle（'fa-play'）；
playPause.classList.toggle（'fa-pause'）；
返回false；
}，假）
#btn{
指针事件：自动；
光标：指针；
}

您的浏览器不支持视频标记。