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?
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:
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?
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:
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).
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).
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! 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.
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?
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.
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.
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?
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.