Bonjour à tous,

Je suis actuellement en train de réaliser une landing page.
Je souhaiterais avoir une vidéo d'intro au site en html5.
J'ai trouvé ce jQuery qui a l'air très bien :

http://syddev.com/jquery.videoBG/index.html

J'ai pu le configurer pour qu'il ne joue la vidéo qu'une seule fois.
Mais comment puis-je faire pour qu'une fois la vidéo terminée
je sois renvoyé vers ma home page ?
Ya t-il une action à ajouter ?

Merci de votre aide.

ps : le code du jquery est joint à mon message si ça peut aider.

[code]

/**

  • @preserve Copyright 2011 Syd Lawrence ( www.sydlawrence.com ).
  • Version: 0.2
  • Licensed under MIT and GPLv2.
  • Usage: $('body').videoBG(options);
  • */

(function( $ ){

$.fn.videoBG = function( selector, options ) { 

    var options = {};
    if (typeof selector == "object") {
        options = $.extend({}, $.fn.videoBG.defaults, selector);
    }
    else if (!selector) {
        options = $.fn.videoBG.defaults;
    }
    else {
        return $(selector).videoBG(options);        
    }

    var container = $(this);

    // check if elements available otherwise it will cause issues
    if (!container.length)
        return;

    // container to be at least relative
    if (container.css('position') == 'static' || !container.css('position'))
        container.css('position','relative');

    // we need a width
    if (options.width == 0)
        options.width = container.width();

    // we need a height
    if (options.height == 0)
        options.height = container.height();    

    // get the wrapper
    var wrap = $.fn.videoBG.wrapper();
    wrap.height(options.height)
        .width(options.width);

    // if is a text replacement
    if (options.textReplacement) {

        // force sizes
        options.scale = true;

        // set sizes and forcing text out
        container.width(options.width)
            .height(options.height)
            .css('text-indent','-9999px');
    }
    else {

        // set the wrapper above the video
        wrap.css('z-index',options.zIndex+1);
    }

    // move the contents into the wrapper
    wrap.html(container.html());

    // get the video
    var video = $.fn.videoBG.video(options);

    // if we are forcing width / height
    if (options.scale) {

        // overlay wrapper
        wrap.height(options.height)
            .width(options.width);

        // video
        video.height(options.height)
            .width(options.width);
    }

    // add it all to the container
    container.html(wrap);
    container.append(video);

    return this;
}

// set to fullscreen
$.fn.videoBG.setFullscreen = function($el) {
    var windowWidth = $(window).width(),
        windowHeight = $(window).height();

    $el.css('min-height',0).css('min-width',0);
    $el.parent().width(windowWidth).height(windowHeight);
    // if by width 
    if (windowWidth / windowHeight > $el.aspectRatio) {
        $el.width(windowWidth).height('auto');
        // shift the element up
        var height = $el.height();
        var shift = (height - windowHeight) / 2;
        if (shift < 0) shift = 0;
        $el.css("top",-shift);
    } else {
        $el.width('auto').height(windowHeight);         
        // shift the element left
        var width = $el.width();
        var shift = (width - windowWidth) / 2;
        if (shift < 0) shift = 0;
        $el.css("left",-shift);

        // this is a hack mainly due to the iphone
        if (shift === 0) {
            var t = setTimeout(function() {
                $.fn.videoBG.setFullscreen($el);
            },500);
        }
    }

    $('body > .videoBG_wrapper').width(windowWidth).height(windowHeight);

}

// get the formatted video element
$.fn.videoBG.video = function(options) {

    $('html, body').scrollTop(-1);

    // video container
    var $div = $('<div/>');
    $div.addClass('videoBG')
        .css('position',options.position)
        .css('z-index',options.zIndex)
        .css('top',0)
        .css('left',0)
        .css('height',options.height)
        .css('width',options.width)
        .css('opacity',options.opacity)
        .css('overflow','hidden');

    // video element
    var $video = $('<video/>');
    $video.css('position','absolute')
        .css('z-index',options.zIndex)
        .attr('poster',options.poster)
        .css('top',0)
        .css('left',0)
        .css('min-width','100%')
        .css('min-height','100%');

    if (options.autoplay) {
        $video.attr('autoplay',options.autoplay);
    }

    // if fullscreen
    if (options.fullscreen) {
        $video.bind('canplay',function() {
            // set the aspect ratio
            $video.aspectRatio = $video.width() / $video.height();
            $.fn.videoBG.setFullscreen($video);
        })

        // listen out for screenresize
        var resizeTimeout;
        $(window).resize(function() {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function() {
                $.fn.videoBG.setFullscreen($video);
            },100); 
        });
        $.fn.videoBG.setFullscreen($video);
    }

    // video standard element
    var v = $video[0];

    // if meant to loop
    if (options.loop) {
        loops_left = options.loop;

        // cant use the loop attribute as firefox doesnt support it
        $video.bind('ended', function(){

            // if we have some loops to throw
            if (loops_left)
                // replay that bad boy
                v.play();

            // if not forever
            if (loops_left !== true)
                // one less loop
                loops_left--;
        });
    }

    // when can play, play
    $video.bind('canplay', function(){

        if (options.autoplay)
            // replay that bad boy
            v.play();

    });

    // if supports video
    if ($.fn.videoBG.supportsVideo()) {

        // supports webm
        if ($.fn.videoBG.supportType('webm')){

            // play webm
            $video.attr('src',options.webm);
        }
        // supports mp4
        else if ($.fn.videoBG.supportType('mp4')) {     

            // play mp4
            $video.attr('src',options.mp4);

        //  $video.html('<source src="'.options.mp4.'" />');

        }
        // throw ogv at it then
        else {

            // play ogv
            $video.attr('src',options.ogv);
        }

    }

    // image for those that dont support the video  
    var $img = $('<img/>');
    $img.attr('src',options.poster)
        .css('position','absolute')
        .css('z-index',options.zIndex)
        .css('top',0)
        .css('left',0)
        .css('min-width','100%')
        .css('min-height','100%');

    // add the image to the video
    // if suuports video
    if ($.fn.videoBG.supportsVideo()) {
        // add the video to the wrapper
        $div.html($video);
    }

    // nope - whoa old skool
    else {

        // add the image instead
        $div.html($img);
    }

    // if text replacement
    if (options.textReplacement) {

        // force the heights and widths
        $div.css('min-height',1).css('min-width',1);
        $video.css('min-height',1).css('min-width',1);
        $img.css('min-height',1).css('min-width',1);

        $div.height(options.height).width(options.width);
        $video.height(options.height).width(options.width);
        $img.height(options.height).width(options.width);   
    }

    if ($.fn.videoBG.supportsVideo()) {
        v.play();
    }
    return $div;
}

// check if suuports video
$.fn.videoBG.supportsVideo = function() {
    return (document.createElement('video').canPlayType);
}

// check which type is supported
$.fn.videoBG.supportType = function(str) {

    // if not at all supported
    if (!$.fn.videoBG.supportsVideo())
        return false;

    // create video
    var v = document.createElement('video');

    // check which?
    switch (str) {
        case 'webm' :
            return (v.canPlayType('video/webm; codecs="vp8, vorbis"'));
            break;
        case 'mp4' :
            return (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
            break;
        case 'ogv' :
            return (v.canPlayType('video/ogg; codecs="theora, vorbis"'));
            break;          
    }
    // nope
    return false;   
}

// get the overlay wrapper
$.fn.videoBG.wrapper = function() {
    var $wrap = $('<div/>');
    $wrap.addClass('videoBG_wrapper')
        .css('position','absolute')
        .css('top',0)
        .css('left',0);
    return $wrap;
}

// these are the defaults
$.fn.videoBG.defaults = {
        mp4:'',
        ogv:'',
        webm:'',
        poster:'',
        autoplay:true,
        loop:true,
        scale:false,
        position:"absolute",
        opacity:1,
        textReplacement:false,
        zIndex:0,
        width:0,
        height:0,
        fullscreen:false,
        imgFallback:true
    }

})( jQuery );
[/code]

Aucune réponse