如何让用户点击我的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视频屏幕并转到新窗口中的链接？

我环顾四周，找不到太多文字在它上面。



基本上类似于你在YouTube上获得的功能等。用户点击视频并在新窗口中链接。



使用如下代码：

 <   video     width   =   320    height   =  240   控件 >  
 <   source     src   =  movie.mp4    type   =  video / mp4 >  
 <   source     src   =  movie.ogg   < span class =code-attribute> type   =  video / ogg >  
 <   source  < span class =code-attribute>   src   =  movie.webm    type   =  video / webm >  
 <   / video  >  

我想它会看起来像这样，但我不能让它起作用：

 <   video     width   =  320    height   =  240   控件 >  
 <   source     src   =  movie.mp4   类型  =  video / mp4 >  
 <  来源    src   =  movie.ogg    type  < span class =code-keyword> =  video / ogg >  
 <   source     src   =  movie.webm    type   =  video / webm >  
 <   a     href   ='  http://www.google.com' > 测试链接<   / a  >  
 <   / video  >  

解决方案

这个想法非常糟糕，因为我在我的问题中描述了冲突上。您无法区分导航点击和视频点击。不要这样做。



但如果你愿意的话，那就简单了：

 <   a     href   =  http：// codeproject.com >  
 <   video     width   =   320    height  < span class =code-keyword> =  240   控件 >  
 <   source     src   =  movie.mp4    type   =  video / mp4 >  
 <   source    < span class =code-attribute> src   =  movie.ogg    type   =  video / ogg >  
 <   source     src   =  movie.webm    type   =  video / webm  >  
 <   / video  >  
 <   / a  >  

在这种情况下，只需单击一次导航，然后按Ctrl +单击即可可能依赖于浏览器）可用于控制视频。不是每个用户都能弄明白该怎么做。



双击不是更好：



< pre lang =xml> < div ondblclick = window.location.href =' http://codeproject.com' >
< < span class =code-leadattribute> video width = 320 height = 240 controls >
< source src = movie.mp4 类型 = video / mp4 >
< source src = movie.ogg type = video / ogg >
< source src = movie.webm 类型 = video / webm >
< / video >
< / div >

In在这种情况下，首次点击双击会移动视频，而不是导航。



所以，其他一些事件更好，例如，点击一下中键或右键，但是你需要更多的JavaScript。这是最好的使用jQuery，就像这里：

http://stackoverflow.com/questions/1795734/triggering-onclick-event-using-middle-click [ ^ ]。



但整个想法真的很糟糕。为什么不做一些简单合法的事情呢？类似于：

 <   a     href   =  http://codeproject.com > 不要滥用您的设计！听取CodeProject的友好建议！<   / a  >  <   br     /  >  
 <   video     width   =  320   高度  =  240   控件 >  
 < ;   source     src   =  movie.mp4 < span class =code-attribute>   type   =  video / mp4 >  
 <   source     src   =  movie.ogg   输入  =  video / ogg > ;  
 <   source     src   =  movie.webm    type   =  video / webm >  
 <   / video  >  

-SA

你可以试试这个：

 <   video     width   =  320    height   =  240    controls    的onclick  < span class =code-keyword> =  location.href ='http：//www.google.com'; >  
 <   source     src   =  movie.mp4    type   =   video / mp4 >  
 <   source     src   =  movie.ogg   类型  =  video / ogg >  
 <   source  < span class =code-attribute>   src   =  movie.webm    type   =  video / webm >  
 <   / video  >  

但是您可以将对象放在视频元素上方 - 而不是在您尝试的内部。

How can I have the user click on the screen of my HTML5 video and be taken to a link in a new window?
I''ve looked around and can''t find much text on it.

Basically similar function to what you get on YouTube etc. User clicks on video and taken to link in new window.

Using code like this:

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

I''d imagine it''d look something like this, but I can''t get it to work:

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

解决方案

The idea is pretty bad, because of the conflict I described in my question. You cannot make distinction between a click for navigation and a click for video. Don''t do it.

But if you want, it would be as simple as that:

<a href="http://codeproject.com">
<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>

In this case, a click only navigates, and something as Ctrl+Click (it may depend on the browser) may be used to control video. Not every user can figure out what to do.

Double click is not much better:

<div ondblclick="window.location.href='http://codeproject.com'">
<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>
</div>

In this case, first click of the double will move a video, than you will navigate.

So, better thing of some other event, for example, a click by a middle or right button, but then you will need more of JavaScript. It''s the best to use jQuery, like here:
http://stackoverflow.com/questions/1795734/triggering-onclick-event-using-middle-click[^].

But the whole idea is really bad. Why not doing some simple and legitimate thing? Something like:

<a href="http://codeproject.com">Don't abuse your design! Listen to a good friendly advice from CodeProject!</a><br />
<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>

—SA

You can try this:

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

But you can place objects above video element - not inside as you tried.

这篇关于如何让用户点击我的HTML5视频屏幕并转到新窗口中的链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！