Question

我的网站上有图形动画（超过200并且还在计算）。文件格式为.ogv，.avi，.mov。

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

我知道我可以使用缩略图视频图片.png并拥有一个＆＃34;视频播放按钮＆＃34;将图像作为水印，并在点击时链接到其他页面，但它不是我想要的超过200个视频的解决方案。我尝试了悬停效果，但是当你点击它时，视频仍会立即在摘要页面中播放。

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

这是我的代码：

＆＃13;

.videofile:hover {
  opacity:.3
}

＆＃13;

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

＆＃13;

Answer 1

试试这个

制作视频的图片/图片缩略图：
使用标记创建链接，并将上述图像作为内容，类似于以下内容：
```
<a href="..." target="_blank"> <img ...  /> </a> 
```

_blank目标将您带到标记的href url。

示例示例位于JSFiddle here

祝你好运。

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

Answer 2

以下是使用::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>

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

2 个答案: