Question

我一直在寻找在图片上添加叠加播放按钮，所以当我点击它时我就可以播放视频。我的问题是每个类似的问题都需要添加一个单独的叠加播放按钮在源头。

但是，如果我无法在服务器中保留单独的图像，那么无论如何我可以使用javaScript实现相同的结果。如果可以，那么有人可以为此提供示例代码。

我不想使用单独的播放图像..那么我有什么方法可以做到吗？

Answer 1

扩展克里斯蒂安的答案，您可以使用CSS三角形作为播放按钮，并将它们绝对放置在相对定位的容器中。

参见： http://css-tricks.com/snippets/css/css-triangle/

Answer 2

这是一个小的CSS片段，包括一个JSBin示例（http://jsbin.com/tarexami/1/edit?html,css,output）：

.play-button {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: rgba(0,0,0,0.25);
  border-radius: 100%;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
  cursor: pointer;
}

.play-button:after {
  content: '';
  display: block;
  position: absolute;
  left: 22px;
  top: 10px;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent transparent white;
}

如何使用javaScript在图像上叠加播放按钮

2 个答案: