Question

我已将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>';

Answer 1

请参阅此歌剧开发文章：

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

您可以将play（）函数绑定到js中，以便在幻灯片加载时启动视频。

Answer 2

设置video代码Attribute preload="auto"

preload属性指定作者是否以及如何在页面加载时认为应该加载视频。默认值preload为none，您可以将其设置为metadata或auto

滑块问题中的HTML5视频自动播放

2 个答案: