Displaying Poster After Video

[mista_sage]

Hi all,

Just implemented a single video with a poster. Want to display the poster again after video is finished playing (back to the state before the video played).

I tried adding this:

ended: function (event) {

  $('.blahblah img').css('display','inline');

  $('.blahblah video').css({'width':'0','height':'0'}); 

},

 

And it works.... somewhat. It hides the video, and displays the poster. But if I want to play again, the video doesn't show anymore and the poster doesn't go away.... Though, I can hear the sound.

Seems that the play button trigger doesn't re-initialize the player (remove poster and display/fit video)... anyone know where I can fix this?

I've been working all night and it's 7:00am now, so I'm quite beat right now... If it's an in-my-face solution, please forgive... otherwise any help is greatly appreciated!

Thanks,

Sage

[Mark Panaghiston]

Erm... The easiest way would be to setMedia again to the same thing.

I made the poster image behave as it does for the <video poster="url"> attribute. The poster is displayed until the video is played. After that, the current frame of the video is displayed and the poster is never shown again.

You could probably do it similar to how you do it now...

Pseudo-code...

ended event:
$(poster).show()
$(video).css(size zero by zero)

play event:
$(poster).hide()
$(video).css( size 640px by 360px)

Getting the video play button to display again would be another issue, but you did not ask for that...
I raise it since I have been thinking about making it display again when the video is paused, as that is a more common operation of a play button over the video area.

[mista_sage]

wonder if these features will be included in the next/future release? one would think these common behaviors should be built in.

oh well.. i'll play around with it a little more and post my results in case someone else is trying to accomplish the same task.

or if someone has any other suggestions, please advise.

thanks!

[Mark Panaghiston]

To be fair, you are the first person to ask for such a feature.

Neither has the W3C accommodated any such feature in their media spec. Also, I have recently noticed that some mobile devices do not even show the video poster image at all after the video has been played once... Even when you change the SRC to new media along with a new poster, you just get the first frame of the video.

I'll consider adding the feature, but it will not be there for the next release. I have 1 huge thing to do and then a few minor tweaks, then I want to launch it.

[mista_sage]

If that's the case- totally understandable. I'm just happy jPlayer exists at all =P

[George Lucian Andreiu]

This can be done similar with below code.

I make some improvment to simulate HTML 5 player design, ofcourse you will need to edit css for design.

the js from below will make:

- show poster after video is ended

- replay video on play button click

- mouseover action to show or hide the control from player

for show/hide control interface you need to set display: none; for div.jp-video div.jp-interface  (line 87 or similar).

code:

$(document).ready(function(){

$("#jquery_jplayer_1").jPlayer({

ready: function () {

$(this).jPlayer("setMedia", {

m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",

ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",

webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",

poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"

}).jPlayer("play");;

},

ended: function() { // The $.jPlayer.event.ended event

  

   $('#jquery_jplayer_1 img').css('display','inline'); // show poster at end of video

   $('#jquery_jplayer_1 video').css({'width':'0','height':'0'}); // hide video div

   

   $("#jp_container_1").mouseover(function(){

$("#jp-interface").show(); // show control interface at mouse hover

});

$("#jp_container_1").mouseout(function(){

$("#jp-interface").hide();  // hide control interface at mouse hover

});

 },

 play: function(){

  $('#jquery_jplayer_1 img').css('display','none'); // hide poster at end of video  

        $('#jquery_jplayer_1 video').css({'width':'640px','height':'360px'}); // show video div

   

   $("#jp_container_1").mouseover(function(){

$("#jp-interface").show(); // show control interface at mouse hover

});

$("#jp_container_1").mouseout(function(){

$("#jp-interface").hide(); // hide control interface at mouse hover

});

 },

swfPath: "js",

supplied: "webmv, ogv, m4v",

size: {

width: "640px",

height: "360px",

cssClass: "jp-video-360p"

}

});

});

[Tim G]

Hi,

I noticed that poster image for the flash solution also needed to be accommodated for at the end of the video. This is my code to show the poster:

$(document).ready(function(){
    $("#occVideoPlayer").jPlayer({

        ready: function () {
            $(this).jPlayer("setMedia", {
                m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
                webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"

            });
       
        },
        ended: function () {
            $(this).find('img').css({'display':'inline'});
            $(this).find('video').css({'height':'0',"width":"0"});
            $(this).find('object').css({'height':'0',"width":"0"});
        },
        play: function () {
            $(this).find('img').css({'display':'none'});
            $(this).find('video').css({'height':'100%',"width":"100%"});
            $(this).find('object').css({'height':'100%',"width":"100%"});
        },
        swfPath: "js",
        solution: "html,flash",

        supplied: "webmv, ogv, m4v",
        size: {

            width: "480px",
            height: "270px",
            cssClass: "occVideoSkin"
        }
    });
   
Tim