Question

Are there any jQuery plugins for html5 video to insert instream ads into the video?

Most of the flash ones work by pausing the video at a particular timestamp, and playing an ad stream, then resuming the original video stream. The jquery captions plugin for html5 seems very similar, but different.

Was it helpful?

Solution

I didn't find any plugins, but I've patched jCap to provide a callback and made an add example: http://github.com/irae/jCaps/blob/master/addsexample.html

$("#myVid").jCaps({
    language: 'en',
    languageChooser: false,
    toggleButton: false,
    onButton: false,
    offButton: false,
    interfaceImg: false,
    transcriptButton:false,
    showCaptions: true,
    transcriptType: 'html',
    transcriptsDiv: $('#transcripts'),
    subtitleChangeCallback:function(oldV,newV) {
        if(!addShown) {
            addShown = true;
            $('#myVid').get(0).pause();
            setTimeout(function(){
                $('#captions').text('');
                $('#myVid').get(0).play();
            },5*1000); // time to show add (5 seconds)
        }
    }
});

This is not ideal. If I were you, I've started a new plugin from scratch just for that. It's not difficult to build on top of what's jCap already does.

OTHER TIPS

HTML5 definitely starts and loads the video much faster compared to its flash counterpart. However, the sounds of some of the videos tend to either be delayed or they (the sounds) would not play at all. It still needs work.

Here is quick example of how to put any HTML element on top of a video and show it at a specific time! http://blog.app-solut.com/2011/03/display-additional-overlay-elements-on-top-of-an-html5-video-element-with-javascript/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top