如何让用户点击我的 HTML5 视频屏幕并转到新窗口中的链接？答案

【问题标题】：How can I have the user click on the screen of my HTML5 video and be taken to a link in a new window?如何让用户点击我的 HTML5 视频屏幕并转到新窗口中的链接？
【发布时间】：2013-03-10 03:32:39
【问题描述】：

如何让用户点击我的 HTML5 视频屏幕并转到新窗口中的链接？我环顾四周，找不到太多文字。与您在 YouTube 等上获得的功能基本相似。用户点击视频并在新窗口中链接。

使用这样的代码：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
</video>

我想它看起来像这样，但我无法让它工作：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
<a href='http://www.google.com'> test link</a>
</video>

【问题讨论】：

你想让视频在当前页面上播放吗？
是的，但是如果用户单击屏幕位，他们将被导航到新窗口中的另一个页面。就像新电影的广告一样，您观看然后最后可能会说点击我被带到我们的网站。

标签： javascript jquery html video video-player

【解决方案1】：

这是一个工作示例：http://jsfiddle.net/ysttd/

不要将<a> 标签粘贴在<video> 中，而是将<a> 和<video> 标签包装在父元素中：

<div class="videoContainer">
    <video width="320" height="240" controls>
      <source src="http://snapshot.opera.com/resources/BigBuckBunny.ogv" type="video/ogg">
    </video>
    <a href='http://www.google.com'> test link</a>
</div>

【讨论】：

【解决方案2】：

理论上，您应该能够在链接中放置<video> 来实现这一点。

但是，由于您已指定 controls，该视频是交互式内容，因此不允许这样做。

相反，您可以使用 JavaScript：

document.querySelector('video').addEventListener('click', function () {
    open("http://example.com", "_blank");
});

【讨论】：

【解决方案3】：

如果我发现你的问题是正确的，这个解决方案可以帮助你

<a href="http://google.com" target="_blank">
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4" />
        <source src="movie.ogg" type="video/ogg" />
        <source src="movie.webm" type="video/webm" />
    </video>
    </a>

http://jsfiddle.net/bXrPL/

【讨论】：

你的方法效果很好，但是有没有一种方法只制作屏幕区域（电影所在的位置）而不是任务栏（暂停、倒带等）
遗憾，但我不知道如何以简单的方式做到这一点。无论如何，如果您找不到更好的方法，我建议您创建自己的控件。这是一篇关于它的文章：dev.opera.com/articles/view/introduction-html5-video/#scripting

【解决方案4】：

你也可以试试这个：

<video width="320" height="240" onclick="window.open('http://google.com')" controls>
    <source src="movie.mp4" type="video/mp4"/>
    <source src="movie.ogg" type="video/ogg"/>
    <source src="movie.webm" type="video/webm"/>
</video>

【讨论】：