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

Question

如何让用户点击我的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>

Answer 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>

Answer 2

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

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

相反，您可以使用JavaScript：

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

Answer 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/

Answer 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>