poster frame at end of html5 video

The poster frame image I’ve included before the video is played works fine, but is there a way to have a poster frame image appear at the end of a video (after it’s played) so that it doesn’t remain a black box?

Thank you,
Randi


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Only if you edit the video to have that frame be the last frame of the movie. Once the movie loads and starts playing, it “covers” the poster frame.

There may be a way with JavaScript, if you want to go down that road. Apply Protaculous 2 to the page, click on the DOM Loaded Observer button, and enter this:

document.on('ended', 'video', function(evt, elm){
	elm.src = elm.readAttribute('src');
});

That’s just typed blind after looking at someone else’s more tortured jQuery example, but it’s very similar to a function I wrote to “reload” a Flash animation (and force it to play again). Let me know if it works, and if not, post a link to the page where you tested it so I can look at it through a debugger.

Walter

On Dec 30, 2013, at 7:47 AM, qhrider wrote:

The poster frame image I’ve included before the video is played works fine, but is there a way to have a poster frame image appear at the end of a video (after it’s played) so that it doesn’t remain a black box?

Thank you,
Randi


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just took a moment and tried this, and it seems as though the ‘ended’ event doesn’t bubble up to the page, so this approach is hobbled at the gate. However, the following is tested and works in Safari. I leave the cross-browser testing to you. As before, in Protaculous 2:

$$('video').each(function(elm){
  elm.observe('ended', function(){
    elm.poster = elm.readAttribute('poster');
  });
});

Walter

On Dec 30, 2013, at 11:19 AM, Walter Lee Davis wrote:

document.on(‘ended’, ‘video’, function(evt, elm){
elm.src = elm.readAttribute(‘src’);
});


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Very cool…thanks!!! I appreciate it. It does work perfectly in Safari, but not in Fire Fox or on iPad. Haven’t tested any IEs yet (always dread those).

Here’s the link that includes the code you’ve given me.
http://www.examples.rsidentitydesign.com/video.html

Many thanks,
Randi


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, this works on all browsers I tested it with. Note that it takes a completely different tack – it makes a copy of the video before it plays, and then replaces the video with the copy once it’s played.

$$('video').each(function(elm){
  var wrapper = elm.wrap('span');
  var vid = elm.clone(true);
  elm.observe('ended', function(){
    wrapper.update(vid);
 });
});

Walter

On Dec 30, 2013, at 1:05 PM, qhrider wrote:

Very cool…thanks!!! I appreciate it. It does work perfectly in Safari, but not in Fire Fox or on iPad. Haven’t tested any IEs yet (always dread those).

Here’s the link that includes the code you’ve given me.
http://www.examples.rsidentitydesign.com/video.html

Many thanks,
Randi


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Brilliant mind! :slight_smile: I hope one day to understand and be able to code as you do.

Only glitch now is that the video doesn’t play at all on iPad. I just get a black box.

Thanks,
Randi


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It absolutely works here: Untitled

The issue on your end may have to do with the format of the video. Did you make an Ogg/Theora or WebM version for Firefox, and add it on the Export tab of the Inspector in the Source 2 or Source 3 picker? Remember – FF won’t play back MP4 video* no matter how nicely you ask it to.

Walter

*Just to be confusing, FF on Windows will play back MP4. Mozilla developers claim that the reason it won’t play back on the Mac is a platform bug, but see Safari and Chrome for the proof that that’s not the real issue.

On Dec 30, 2013, at 4:09 PM, qhrider wrote:

Brilliant mind! :slight_smile: I hope one day to understand and be able to code as you do.

Only glitch now is that the video doesn’t play at all on iPad. I just get a black box.

Thanks,
Randi


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi. Yes, I used the Ogg/Theora and WebM for the 2 sources. The video played on iPad until I added the last bit of code you gave me (the “clone” version). Let me fiddle with it a bit and see if I missed something.

In the mean time, I think I may have used an m4v rather than a mp4 for the main video. Is one format better to use than the other?

Thank you.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter.

Your 20th Century Fox link video works well on desktop browsers, as did mine, but shows up as a black rectangle on my iPad (no video). Mine did the same thing before.

Thanks,
Randi


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

but shows up as a black rectangle on my iPad (no video).

Same here (iPad original on iOS5) - however using the direct link to the file at scripty.walterdavisstudio.com/refresh/Resources/test.mp4 played fine

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I checked it on two different iPads (an Air and a Mini) and an iPhone – all running iOS 7 and using Safari. The movie worked on all of them.

Walter

On Dec 30, 2013, at 5:45 PM, qhrider wrote:

Hi Walter.

Your 20th Century Fox link video works well on desktop browsers, as did mine, but shows up as a black rectangle on my iPad (no video). Mine did the same thing before.

Thanks,
Randi


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

See if this makes any difference (slight variation on the clone idea):

$$('video').each(function(elm){
  var wrapper = elm.wrap('span');
  var vid = elm.outerHTML.toString();
  elm.observe('ended', function(){
    wrapper.update(vid);
 });
});

Walter

On Dec 30, 2013, at 4:41 PM, qhrider wrote:

Hi. Yes, I used the Ogg/Theora and WebM for the 2 sources. The video played on iPad until I added the last bit of code you gave me (the “clone” version). Let me fiddle with it a bit and see if I missed something.

In the mean time, I think I may have used an m4v rather than a mp4 for the main video. Is one format better to use than the other?

Thank you.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter. While the 3rd and 4th options show an end poster frame on both desktop Safari and FF, neither seems to allow the video to load on iPad, I still get a black rectangle.

Not giving up hope yet, but for now I’ll use the 2nd one so the video will view on iPad.

Thanks!
Randi


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options