HTML5 视频自动播放滑块问题
我已将 JW HTML5 播放器集成到我的 jQuery Cycle 滑块中。问题是，如果我将视频设置为自动播放，它会在页面加载时播放，而不是在幻灯片进入视图时播放 - 这就是 Flash 视频所发生的情况。有没有办法阻止 HTML5 视频在幻灯片显示之前播放？
这是我正在使用的代码：
<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>';
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>';
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
set
video标签Attributepreload="auto"preload 属性 指定作者认为在页面加载时是否应加载视频以及如何加载。
preload的默认值为none，您可以将其设置为metadata或autoset
videotagAttributepreload="auto"preload attribute Specifies if and how the author thinks the video should be loaded when the page loads. default value of
preloadisnoneyou can set it to themetadataorauto请参阅这篇 Opera 开发文章：
http://dev.opera.com/articles/ view/introduction-html5-video/
您可以将 play() 函数绑定到您的 js 中，以便在幻灯片加载时启动视频。
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.