html - 为 HTML 视频添加动态播放按钮

Question

我想向 HTML 视频添加一个动态播放按钮，当鼠标悬停在视频上时该按钮会改变颜色，如下所示:

https://imgur.com/a/FzJ0i1C

并在视频开始播放后消失。

知道如何设置吗？

Answer 1

使用 :hover css 属性:

.container{margin:50px;}
.fa-youtube-play{transform: scale(5);color:black;opacity:0.7;}
.fa-youtube-play:hover{transform: scale(5);color:dodgerblue;}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="container">
  <i class="fa fa-youtube-play"></i>
</div>

...并使其在点击时消失...

$('.fa-youtube-play').click(function(){
  $(this).hide();
});

.container{margin:50px;}
.fa-youtube-play{transform: scale(5);color:black;opacity:0.7;}
.fa-youtube-play:hover{transform: scale(5);color:dodgerblue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="container">
  <i class="fa fa-youtube-play"></i>
</div>