向视频标签添加HTML5 href链接

Question

我正试图将href链接添加到视频中，这样当您单击视频时，它会将您引导到另一个HTML页面。显然，这只能用jquery来完成，一个博客说，但不确定。

<video class="tutorial_vid" width="220" height="140" autoplay="autoplay" loop> //EDIT: loop="true" is deprecated nowadays
  <source src="vid/Rolling_Ice_x264.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

到目前为止的代码。如有任何帮助，我们将不胜感激。提前谢谢。

Answer 1

我认为，如果你想点击某个东西导航到另一个页面，你实际上需要一个anchor（）链接。当然，你可以设置链接的样式，使其看起来像视频（使用图像或其他东西）。

如果这不是你想要的，我想你可以在录像带周围加上一个链接：

<a href="yourpage.html">
   <video class="tutorial_vid" width="220" height="140" autoplay="autoplay" loop> 
      //EDIT: loop="true" is deprecated nowadays 
      <source src="vid/Rolling_Ice_x264.mp4" type="video/mp4" /> 
      <source src="movie.ogg" type="video/ogg" />
   </video>
</a>

Answer 2

Fiddle

jQuery//您可以使用jQuery添加一个简单的基于点击的重定向

$('.tutorial_vid').click(function(){
    window.location = 'http://google.com';
});

CSS//使用CSS使其在鼠标悬停时看起来可点击

.tutorial_vid {
    cursor: pointer;
}

如果您仍然想要一个href解决方案，那么这个jQuery方法应该添加该属性。

$('.tutorial_vid2').attr('href', 'http://google.com');

希望这能有所帮助！！

Answer 3

在Firefox中，链接似乎只覆盖视频和图片底部一个字符的高度，所以我的解决方案（需要JavaScript）是：

<div onclick="window.location.href = 'https://www.example.com/videos-page'">
    <video src="video.mp4" style="max-width:100%"></video>
</div>

点击视频中的任何位置，然后在每个视频的底部，你可以看到下面的原因（如果你在FF或任何其他浏览器中）：

<div>This is the video in a link:
    <a href="https://www.example.com/videos-page">
        <video src="https://www.lampe2020.de/videos/00f/video.mp4" controls style="max-width:100%;pointer-events:none;"></video>
    </a>
</div>
<div>This is the video with the faked link:
    <div onclick="window.location.href = 'https://www.example.com/videos-page';" style="cursor:pointer;">
        <video src="https://www.lampe2020.de/videos/00f/video.mp4" controls style="max-width:100%;pointer-events:none;"></video>
    </div>
</div>
<!-- The video above is a random video from my own website, lampe2020.de, the person in the video is me. -->

请注意，只有当您将视频的指针事件设置为none（在样式属性中）时，这种行为才是重要的。但我建议这样做，因为这会阻止用户激活视频控件。