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

【问题标题】：HTML5 Video Autoplay In Slider Issue滑块问题中的 HTML5 视频自动播放
【发布时间】：2011-05-19 23:15:04
【问题描述】：

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

【问题讨论】：

标签： jquery video html slider autoplay

【解决方案1】：

请参阅这篇歌剧开发文章：

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

您可以将 play() 函数绑定到您的 js 中，以便在幻灯片加载时开始播放视频。

【讨论】：

感谢格里兹。问题是我不确定如何将该功能绑定到滑块。
我需要查看您的 js，但我会将逻辑绑定到下一个/上一个按钮中，例如： if slideshow div ID == video div id then play()

【解决方案2】：

设置video标签Attributepreload="auto"

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

【讨论】：