javascript - 在其他页面播放的视频播放器缩略图

Question

我的网站上有图形动画(超过 200 个并且还在增加)。文件格式为 .ogv、.avi、.mov。

我有一个摘要页面，其中包含所有视频动画的缩略图，用户可以看到带有每个动画的 HTML5 视频播放器。是否可以将带有我的动画的 HTML5 视频播放器保留在摘要页面上，但是当用户单击视频时，会打开另一个可以播放视频的页面？

我知道我可以使用视频缩略图 .png 并在其上添加一个“视频播放按钮”图像作为水印，并在单击时链接到其他页面，但这不是我想要的超过 200 个视频的解决方案。我尝试了悬停效果，但当您单击它时，视频仍会立即在摘要页面中播放。

基本上，我希望视频播放器显示，但禁用控件。并允许单击将用户引导至可以播放全屏视频的另一个页面的视频。这可能吗？

这是我的代码:

.videofile:hover {
  opacity:.3
}

<div class="videofile">
  <video controls="">
    <source src="https://commons.wikimedia.org/wiki/File%3AAnimaci%C3%B3n_de_escanciar.ogv" type="video/ogv" />
  </video>
</div>

Answer 1

这是一个使用 ::after 伪元素的选项:

.videofile {
  display:inline-block;
  position:relative;
}
.videofile:hover::after {
  content:"";
  background:rgba(255,255,255,0.5);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

<a href="http://www.stackoverflow.com">
  <div class="videofile">
    <video controls="" preload="metadata">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
    </video>
  </div>
</a>

此解决方案的工作原理:

• 链接包裹视频容器；
• ::after 伪元素被添加到包含视频的 div 中。它将覆盖其父级的整个区域；
• 只有当鼠标悬停在视频上时才会显示伪元素(这样按钮将被覆盖并且无法点击)。

此解决方案的一个好处是您可以使用 CSS 对其进行自定义:以简单的方式添加图片、文本或任何您想要的内容。例如，上面的代码是为了尽可能匹配您发布的演示，但您可以将其更改为在没有控件的情况下在视频上显示播放按钮:

.videofile {
  display:inline-block;
  position:relative;
}
.videofile:hover::after {
  content:"\25BA";
  font-size:64px;
  color:rgba(0,0,0,0.7);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(255,255,255,0.5);
  text-align:center;
  line-height:176px;
}

<a href="http://www.google.com">
  <div class="videofile">
    <video preload="metadata">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
    </video>
  </div>
</a>