3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

Can anyone recommend a video player with a timed information panel?

by ronrule
2 replies
  • WEB DESIGN
    • |
Hey guys, was wondering if anyone could recommend a video player that can fire a Javascript event at specific times to load a page in an iframe on a site?

I have a client that needs this functionality. They have a video that showcases different products, and wants to have an information panel appear next to the video with some text, still photos, a buy button, etc.

Lets say the video has 10 products... one product is shown for the first 3 minutes, another for 30 seconds, another for 2 minutes 41 seconds, etc. We need to be able to queue what page loads in the iframe based on where they are within the video.

This can't be a simple javascript timer, since if the user pauses the video or it runs slowly the website would be out of sync with the video. They all need to work together.

I'm certain I've seen this done before, but I don't know what player was used. It needs to be embedded in the client's website, not hosted on YouTube or other sites, and naturally this needs to work on non-flash-enabled devices like iPad and the newest Android OS.
#information #panel #player #recommend #timed #video
  • Profile picture of the author Brandon Tanner
    Ron,

    I had this exact need for a little side project 3 or 4 months ago, and after much testing, I settled on jPlayer. Before that, I tried getting it to work with JWPlayer, Flowplayer, and a few others, but none of them would fire the Javascript events based on the video time correctly, 100% of the time, except for jPlayer.

    A few notes @ jPlayer...

    For the best cross-browser solution, use HTML5 video format (mp4, webm, ogv), with Flash fallback.

    Once you have the player set up, triggering an event to happen at a specific point in the video just requires a little bit of jQuery. In the following example, a div named "myIframe" is shown when the video hits the 20 second mark, and is then hidden at the 50 second mark...

    HTML Code:
    $("#jplayer_div").bind($.jPlayer.event.timeupdate, function(event) { 
var currentTime = Math.floor(event.jPlayer.status.currentTime)
        
    if (currentTime == 20){
        $("#myIframe").show();  
        }

    if (currentTime == 50){
        $("#myIframe").hide();  
        }

 });
    ^^ For .show() to work in the example above, you would obviously need to hide the "myIframe" div at the beginning of the video, via CSS or jQuery.

    jPlayer has a vast API with several demos, so as long as you're comfortable with jQuery, you shouldn't have any problem setting it up.
    Signature

    {{ DiscussionBoard.errors[7846130].message }}
  • Profile picture of the author ronrule
    Brandon this sounds perfect, thanks!
    Signature

    -
    Ron Rule
    http://ronrule.com

    {{ DiscussionBoard.errors[7846316].message }}

Trending Topics