adding image at the end of vimeo video when video is stopped

[sweetysweety]

hi,

<div id="videoContent" style="display:none"></div>               <img src="imajlar/PlayerPlay.png" id="playerPic" style="margin-top:52px; margin-left:322px;"/>

my structure is like above.my jquery is:

$("#playerPic").on("click",function(){$("#videoContent").append('<iframe width="900" height="350" id="vimeo" src="http://player.vimeo.com/video/41763950?api=1&player_id=player&force_embed=1&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00adef&fullscreen=1&autoplay=1&loop=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>');$("#playerPic").hide();$("iframe#vimeo").remove();$("#playerPic").show(); });

i'm trying to do that when video is stopped or paused,the image that i identified before will take place above the video.actually when video is stopped or paused,iframe should be hidden and image should be seen.how can i do this?

[justsomeguy]

I don't think you can do that, since the iframe URL is a different domain I don't think you can interact with it via Javascript to capture something like an even that the video ended.

[sweetysweety]

but apple did this.

i just want to show the image,that i putted before the video is also should be seen after the video ended.i mean when video is stopped,iframe should be hidden and img should be visible.

[Ingolme]

Due to security limitations, Javascript is not capable of retrieving any information from within an iframe that loads data from another domain.

[justsomeguy]

 

 

but apple did this.

Apple embedded a video from Vimeo in an iframe and they were able to use Javascript to detect when the video in that iframe ended? Why don't you just copy their code, then? Because as far as I know, you can't use Javascript to interact with a page from a different domain inside an iframe. If you know better than I do then I would like to see an example though.

[sweetysweety]

i tried to control the video is ended and show image at the end of video but it did not work.

besides dont mad on me please:)

for a big probability i used wrong code at the wrong place.i'm always doing this:)

[justsomeguy]

Maybe your code is wrong, but as a rule you cannot use Javascript to interact with content inside an iframe that is on another domain. If the page inside the iframe is on your domain then Javascript can work with it, but Javascript will not be able to interact with a page that is on vimeo.com. That means that Javascript on your site will not be able to tell when the video ends.

[sweetysweety]

is there any other way to do this?

maybe i can count seconds of video and append image after that seconds.

can i do it like this?

[davej]

Why can't you delete the iframe and insert an image?

 

http://www.w3schools.com/jsref/met_node_replacechild.asp

 

I'm guessing the jQuery equivalent might be...

 

http://api.jquery.com/replaceWith/

Edited September 16, 2013 by davej

[justsomeguy]

 

 

maybe i can count seconds of video and append image after that seconds.

You can use a timer to replace the element after a certain amount of time, but that's not going to guarantee that they watched the video. Maybe they had it paused, or maybe it took a while for the video to start.

[sweetysweety]

Why can't you delete the iframe and insert an image?

 

http://www.w3schools.com/jsref/met_node_replacechild.asp

 

I'm guessing the jQuery equivalent might be...

 

http://api.jquery.com/replaceWith/

cause i have to use vimeo video.

my main purpose is to show video.

but when video is ended,a black screen appearing and it looks not good for some people.

that's why i want to put image at the end of video.

[sweetysweety]

 

You can use a timer to replace the element after a certain amount of time, but that's not going to guarantee that they watched the video. Maybe they had it paused, or maybe it took a while for the video to start.

 

yes.you're right.