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" />开发者_JS百科;
<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>';
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
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.
精彩评论