How can I have the user click on the screen of my HTML5 video and be taken to a link in a new window?

Question

2.00/5 (1 vote)

See more:

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:

XML

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

XML

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

Posted 20-Mar-13 10:14am

John A Carter

Updated 20-Mar-13 10:23am

André Kraak

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 20-Mar-13 16:31pm

You can, but why? The same click is used to stop/pause the video...
—SA

2 solutions

Solution 1

You can try this:

XML

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

Posted 20-Mar-13 10:29am

Zoltán Zörgő

Comments

Sergey Alexandrovich Kryukov 20-Mar-13 16:44pm

Interesting, but not really working as would be expected: it navigates and starts video at the same time. Besides, this is not well-formed XML, which is always bad.
The problem is different: the whole OP's idea is bad.
Please see my answer.
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-03-20T10:41:00

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:

XML

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

XML

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

XML

<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