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

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>

Answer 2

试试这个

1. 创建视频的图像/图片缩略图：

2. 创建一个带有标签的链接，并将上面的图片作为内容，类似于下面：

   <a href="..." target="_blank"> <img ...  /> </a> 
   

_blank 目标会将您带到标签的 href url。

JSFiddle here上有一个示例示例

祝你好运。

（如果这符合您的需要，请将其标记为答案。）