CODEWITHSUNDEEP
jqueryvideohtmlsliderautoplay
GhostPool
GhostPool

Reputation: 173

HTML5 Video Autoplay In Slider Issue

I've integrated the JW HTML5 player into my jQuery Cycle slider. The problem is if I set the video to autoplay it plays when the page loads and not when that slide comes into view - which is what happens with Flash videos. Is there a way to prevent HTML5 videos from playing until their slide is shown?

This is the code I'm using:

 <video id="video-'.$video_name.'" width="'.$width.'" height="'.$height.'" poster="'.get_bloginfo('template_directory') .'/lib/scripts/timthumb.php?src='.$image.'&h='.$height.'&w='.$width.'&zc=1" controls="controls">
    <source src="'.$html5_1.'" type="video/mp4" />
    <source src="'.$html5_1.'" type="video/webm" />
    <source src="'.$html5_2.'" type="video/ogg" />
</video>

<script>
    jwplayer("video-'.$video_name.'").setup({
        file: "'.$url.'",   
        image: "'.get_bloginfo('template_directory') .'/lib/scripts/timthumb.php?src='.$image.'&h='.$height.'&w='.$width.'&zc=1",
        icons: "'.$icons.'",
        autostart: "'.$autostart.'",
        stretching: "'.$stretching.'",
        controlbar: "'.$controlbar.'",
        skin: "'.$skin.'",
        screencolor: "white",
        height: '.$height.',
        width: '.$width.',
        players: [';                    
        if($fallback == "flash") {
            $out .= '{type: "html5"}, {type: "flash", src: "'.get_bloginfo("template_directory").'/lib/scripts/mediaplayer/player.swf"}';
        } elseif($fallback == "html5") {
            $out .= '{type: "flash", src: "'.get_bloginfo("template_directory").'/lib/scripts/mediaplayer/player.swf"}, { type: "html5" },';
        }
        $out .= ']
    });
</script>';

Upvotes: 0

Views: 3601

Answers (2)

Chirag Gojaria
Chirag Gojaria

Reputation: 55

set video tag Attribute preload="auto"

preload attribute Specifies if and how the author thinks the video should be loaded when the page loads. default value of preload is none you can set it to the metadata or auto

Upvotes: 1

Gregg B
Gregg B

Reputation: 13717

See this opera dev article:

http://dev.opera.com/articles/view/introduction-html5-video/

You can tie the play() function into your js to start the video when that slide loads.

Upvotes: 0

Related Questions