Asp Forum - click in mp4 - comp.lang.javascript

Andrew Poulos

12/9/2014 2:31:00 AM

Is it possible for an mp4 video that is running natively in a HTML 5
capable browser to pass the coordinates of the cursor when the video is
clicked on? I want to use JavaScript to control what "chapters" in a
video are played and I don't want "external" buttons.

Andrew Poulos

9 Answers

Evertjan.

12/9/2014 9:04:00 AM

Andrew Poulos <ap_prog@hotmail.com> wrote on 09 dec 2014 in
comp.lang.javascript:

> Is it possible for an mp4 video that is running natively in a HTML 5
> capable browser to pass the coordinates of the cursor when the video is
> clicked on?

You cannot click on an mp4-video as it is a file or a stream,
and surely such stream cannot pass coordinates,
also as a stream "cursor" has only one dimension.

Even if I try to quess what you realy mean,
it seems to me that you should read the specs of HTML5 video playing.

> I want to use JavaScript to control what "chapters" in a
> video are played and I don't want "external" buttons.

It is nice to know what you want and don't want,
while trying to imagine what "internal" buttons are,
but even if that would impact on the top Q,
that does not make this top Q an on-topic Q for this NG.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Ben Bacarisse

12/9/2014 10:51:00 AM

Andrew Poulos <ap_prog@hotmail.com> writes:

> Is it possible for an mp4 video that is running natively in a HTML 5
> capable browser to pass the coordinates of the cursor when the video
> is clicked on? I want to use JavaScript to control what "chapters" in
> a video are played and I don't want "external" buttons.

I hope you won't mind my re-wording this. Do you mean you want a
client-side function to called, with the mouse position being passed,
every time the user clicks on an HTML5 video element? I ask this
because it works (as far as I know) the same as for any other element:
add an even listener for the element, and it will be called with the
event as an argument.

--
Ben.

Thomas 'PointedEars' Lahn

12/9/2014 5:50:00 PM

Andrew Poulos wrote:

> Is it possible for an mp4 video that is running natively in a HTML 5
> capable browser to pass the coordinates of the cursor when the video is
> clicked on?

No, but the event listener of a _HTML5_ â??videoâ? element that displays it
can. This is one of the advantages of the â??videoâ? element.

> I want to use JavaScript to control what "chapters" in a
> video are played and I don't want "external" buttons.

The better approach is to upload this to YouTube and embed chapter links.
Otherwise you need to consider video scaling and time index.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Thomas 'PointedEars' Lahn

12/9/2014 6:29:00 PM

Ben Bacarisse wrote:

> [â?¦] it works (as far as I know) the same as for any other element:
> add an [event] listener for the element, and it will be called with the
> event as an argument.

If you exclude software that uses MSHTML 8 or earlier, or MSHTML 9 in
Compatibility Mode, and similarly outdated software that does not implement
W3C DOM Level 2+ Events, then you are almost correct: one would add an event
listener _to_ the element *for* an event *type*, and it is a *reference* to
an event object that is passed as argument value.

AFAIK there is no remotely HTML5-compliant software (in this case: one that
supports the â??videoâ? element as specified) that does not implement W3C DOM
Level 2+ Events.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Andrew Poulos

12/9/2014 8:38:00 PM

On 9/12/2014 8:03 PM, Evertjan. wrote:
> Andrew Poulos <ap_prog@hotmail.com> wrote on 09 dec 2014 in
> comp.lang.javascript:
>
>> Is it possible for an mp4 video that is running natively in a HTML 5
>> capable browser to pass the coordinates of the cursor when the video is
>> clicked on?
>
> You cannot click on an mp4-video as it is a file or a stream,
> and surely such stream cannot pass coordinates,
> also as a stream "cursor" has only one dimension.
>
> Even if I try to guess what you really mean,
> it seems to me that you should read the specs of HTML5 video playing.
>
>> I want to use JavaScript to control what "chapters" in a
>> video are played and I don't want "external" buttons.
>
> It is nice to know what you want and don't want,
> while trying to imagine what "internal" buttons are,
> but even if that would impact on the top Q,
> that does not make this top Q an on-topic Q for this NG.
>
Sorry for being unclear but I didn't know how to word my question any
better. I want to be able to click a video and then, depending on what
part of the video was clicked, the video would jump to a different part
(a chapter).

Anyhow my question was answered and I'm now looking into using event
listeners with the video element.

Andrew Poulos

Evertjan.

12/9/2014 9:57:00 PM

Andrew Poulos <ap_prog@hotmail.com> wrote on 09 dec 2014 in
comp.lang.javascript:

> On 9/12/2014 8:03 PM, Evertjan. wrote:
>> Andrew Poulos <ap_prog@hotmail.com> wrote on 09 dec 2014 in
>> comp.lang.javascript:
>>
>>> Is it possible for an mp4 video that is running natively in a HTML 5
>>> capable browser to pass the coordinates of the cursor when the video is
>>> clicked on?
>>
>> You cannot click on an mp4-video as it is a file or a stream,
>> and surely such stream cannot pass coordinates,
>> also as a stream "cursor" has only one dimension.
>>
>> Even if I try to guess what you really mean,
>> it seems to me that you should read the specs of HTML5 video playing.
>>
>>> I want to use JavaScript to control what "chapters" in a
>>> video are played and I don't want "external" buttons.
>>
>> It is nice to know what you want and don't want,
>> while trying to imagine what "internal" buttons are,
>> but even if that would impact on the top Q,
>> that does not make this top Q an on-topic Q for this NG.
>>
> Sorry for being unclear but I didn't know how to word my question any
> better. I want to be able to click a video and then, depending on what
> part of the video was clicked, the video would jump to a different part
> (a chapter).
>
> Anyhow my question was answered

I doubt that.

> and I'm now looking into using event
> listeners with the video element.

The event-listeners will possibly give you the pixel-coordinates
of the mouse[-cursor], is that what you wanted?

What do those coordinates have to do with the "chapter" [your word]?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Andrew Poulos

12/9/2014 10:37:00 PM

On 10/12/2014 8:57 AM, Evertjan. wrote:
> Andrew Poulos <ap_prog@hotmail.com> wrote on 09 dec 2014 in
> comp.lang.javascript:
>
>> On 9/12/2014 8:03 PM, Evertjan. wrote:
>>> Andrew Poulos <ap_prog@hotmail.com> wrote on 09 dec 2014 in
>>> comp.lang.javascript:
>>>
>>>> Is it possible for an mp4 video that is running natively in a HTML 5
>>>> capable browser to pass the coordinates of the cursor when the video is
>>>> clicked on?
>>>
>>> You cannot click on an mp4-video as it is a file or a stream,
>>> and surely such stream cannot pass coordinates,
>>> also as a stream "cursor" has only one dimension.
>>>
>>> Even if I try to guess what you really mean,
>>> it seems to me that you should read the specs of HTML5 video playing.
>>>
>>>> I want to use JavaScript to control what "chapters" in a
>>>> video are played and I don't want "external" buttons.
>>>
>>> It is nice to know what you want and don't want,
>>> while trying to imagine what "internal" buttons are,
>>> but even if that would impact on the top Q,
>>> that does not make this top Q an on-topic Q for this NG.
>>>
>> Sorry for being unclear but I didn't know how to word my question any
>> better. I want to be able to click a video and then, depending on what
>> part of the video was clicked, the video would jump to a different part
>> (a chapter).
>>
>> Anyhow my question was answered
>
> I doubt that.

Well, any response to my question is an answer to it ;-)

>> and I'm now looking into using event
>> listeners with the video element.
>
> The event-listeners will possibly give you the pixel-coordinates
> of the mouse[-cursor], is that what you wanted?
>
> What do those coordinates have to do with the "chapter" [your word]?

I'd like to be able to click on an area of the video and jump to, and
play from, a specific chapter in the video itself. So in effect the
controller is itself the video (plus some js).

Andrew Poulos

Evertjan.

12/10/2014 9:00:00 AM

Andrew Poulos <ap_prog@hotmail.com> wrote on 09 dec 2014 in
comp.lang.javascript:

>> What do those coordinates have to do with the "chapter" [your word]?
>
> I'd like to be able to click on an area of the video and jump to, and
> play from, a specific chapter in the video itself. So in effect the
> controller is itself the video (plus some js).

The last controller that was himself in my storage memory,
intelligently designed in 1945 by Rev. Wilbert Vere Awdry
as the "Fat Director",
in 1948 to my illo tempore bewilderment renamed
to to "Fat Controller".

Even the he could not get things running during a shower.

However I cannot remember ever having clicked on him.

So please explain.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Bart Van der Donck

12/10/2014 11:40:00 AM

Andrew Poulos wrote:

> Is it possible for an mp4 video that is running natively in a
> HTML 5 capable browser to pass the coordinates of the cursor
> when the video is clicked on? I want to use JavaScript to
> control what "chapters" in a video are played and I don't
> want "external" buttons.

Sure, that's possible:
www.dotinternet.be/temp/video.html

A bit of playing around with the x/y values and the seconds should put you on the rails:

--------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h2>Click upper half to play from start,
click bottom half to play from second 4</h2>
<video id="vid1" width="420" height="230" style="cursor: pointer;">
<source src="http://www.w3schools.com/html/mov_bbb...
type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb...
type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
function playsec(sec) {
document.getElementById('vid1').currentTime = sec;
document.getElementById('vid1').play();
}
$("#vid1").click(function(event) {
var x = event.pageX - $("#vid1").offset().left;
var y = event.pageY - $("#vid1").offset().top;
if (y <= 115) playsec(0);
if (y > 115) playsec(4);
});
</script>
</body>
</html>

--------------------------------------

Further reading:

http://api.jquery.com/...
http://www.w3schools.com/tags/ref_...

Hope this helps,
--
Bart

comp.lang.javascript

click in mp4

Andrew Poulos

Evertjan.

Ben Bacarisse

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Andrew Poulos

Evertjan.

Andrew Poulos

Evertjan.

Bart Van der Donck

x Login to ForumsZone