:playing和:paused伪类使用示意实例页面

展示

// 如果浏览器支持 :playing、:paused伪类，点击播放按钮会切换显示，否则同时显示

代码

HTML：

<video id="video" width="180" height="314" src="sing-song.mp4"></video>
<button class="play" onclick="video.play();">播放</button>
<button class="pause" onclick="video.pause();">暂停</button>

CSS：

:playing ~ .play,
:paused ~ .pause {
    display: none;
}