人人皆可观看视频（HTML5 视频，含 Flash 备用）

<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
	<!-- MP4 must be first for iPad! -->
	<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
	<!-- fallback to Flash: -->
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<!-- fallback image. note the title field below, put the title of the video there -->
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>	<strong>Download Video:</strong>
	Closed Format:	<a href="__VIDEO__.MP4">"MP4"</a>
	Open Format:	<a href="__VIDEO__.OGV">"Ogg"</a>
</p>

完整解释在 Kroc Camen 的网站上，他是这项技术的创始者。

Chris

# 2012 年 7 月 16 日

谢谢！（

Daniel Jenkins

# 2012 年 7 月 23 日

非常好的实现，最容易忘记的是 HTML5 视频除了视频文件之外的其他编码格式，否则它非常简单！谢谢！

Steve Ralston

# 2012 年 8 月 16 日

我刚刚开始研究 html5 视频。是否有像 Flash 那样传递变量的方法？我常见的一种情况是在 .swf 中播放视频，并传递一个变量，比如客户的姓名，动态地传递，这样每个人在点击指向 PURL（个性化 URL）的链接后，视频中都会显示他们的名字。是否可以通过类似的方式将动态数据传递到 html5 视频？

John Spent

评论永久链接# 2012 年 9 月 27 日

Steve,

您是否找到了这个问题的答案？我正在尝试做与您完全相同的事情（即：将视频自定义变量传递过去），想知道 html5 视频是否可以做到这一点。
Andy Rose

评论永久链接# 2013 年 3 月 18 日

顶一下。我也想得到答案。
K

评论永久链接# 2016 年 10 月 18 日

您问错了问题。显示视频的页面可以获取参数并显示内容。视频播放器只用于播放视频。

legalstuff

# 2012 年 8 月 28 日

在手机（iPhone/Android/WinPhone）上，最佳的视频格式（文件）是什么？
不是为了下载，而是为了在浏览器中观看（例如 boat/firefox/opera）。

或者是否存在任何特殊的转换器或参数？

可以通过 CSS3 选择器在台式机/iPad 和 iPhone/Android 等设备上观看不同的视频。因此，有可能获取台式机上现有的正在运行的视频，以及另一个用于移动设备的视频。

有什么提示/帮助吗？

感谢您的解答。

Net Apparatus

# 2012 年 9 月 4 日

很棒……它在移动浏览器中也能正常工作。

Yoav Weiss

# 2012 年 11 月 1 日

要注意的一点是：<img> 标签的资源也会在现代浏览器中下载，即使它没有显示。
如果它也用作 poster 属性（在上面的例子中没有），那么就没有什么问题。如果它没有，那么它就是在无用地下载。

Paul

# 2012 年 11 月 18 日

您好,
非常感谢您的清晰解释。不过，我只有一个问题：player.swf 文件从哪里来？我知道这是一个播放电影的 Flash 文件。它是否需要为每个电影重新制作，或者是否存在通用版本？如果是的话，在哪里可以下载它，或者我是否需要购买一个 Flash 开发环境（对我来说不太有用……）？请您详细解释一下这方面的内容好吗？
感谢并致敬，Paul。

Atmos

评论永久链接# 2013 年 6 月 20 日

只需使用 jwplayer 的 player.swf 的旧版本（免费的时候？），或者找另一个版本。

Jag

# 2013 年 6 月 7 日

大家好,

我最近实现了以上内容，以便尝试学习 HTML5 视频。它在所有浏览器中都能正常工作，但不能在 iPad 上播放。MP4 文件排在第一位。如果有人能解释这个问题，我将不胜感激。

Jag

AdRog

# 2013 年 6 月 20 日

感谢您的代码，是否可以使电影“自动开始”？谢谢 AdRog

Ashley

评论永久链接# 2013 年 9 月 10 日

只需在 video 标签中，在“controls”的位置之后添加 autoplay。

laeeq

# 2013 年 6 月 20 日

太棒了……它在移动浏览器中也能正常工作。

Newtoid

# 2014 年 2 月 3 日

有没有办法让它在没有 ogg 文件的情况下工作？我需要从 Flash 回退到 html5 以用于 iPad 和 iPhone 等设备，并且不能使用框架。据我所知，Firefox 根本不会播放 Flash 视频。

Charlie

# 2014 年 8 月 11 日

感谢您的教程，你们也应该确保检查 video 元素的所有属性，那是与 jQuery 结合使用时真正有趣的地方。

roccons

# 2014 年 8 月 22 日

我只能提醒大家，video 标签中的对象回退在 Firefox 中无法正常工作。

我正在开发一个面向离线使用的项目，其中保持项目的总体大小尽可能小非常重要，因此我尝试了一个基于本文代码的解决方案，以避免加载 ogv 视频文件的必要性。

//dont' do this:
<video width="640" height="360" controls>
    <source src="__VIDEO__.MP4" type="video/mp4" />
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
    </object>
</video>

如果您想为任何支持 mp4 视频的浏览器显示 html5 视频，并在不支持 mp4 视频的浏览器（Firefox）中通过 Flash 播放相同的视频文件，请不要使用此代码！Firefox 不会显示 Flash 播放器。

最好检测 mp4 的支持情况（因为 Firefox 可能有一天会开始支持 mp4，就像 Opera 一样），然后根据需要提供 video 标签或 Flash 播放器回退。

canPlay = false;
var v = document.createElement('video');
if(v.canPlayType && v.canPlayType('video/mp4').replace(/no/, '')) {
    canPlay = true;
}

Zehra

# 2015 年 4 月 6 日

您好,
我只是想在网页中添加视频。我使用了 mp4 格式，但在 Safari 中没有显示。有趣的是，我没有收到任何错误。在我的页面中只有一个 video 元素，它在运行时似乎是空白的。（它在 Safari/Chrome/IE 中有效）。我的代码如下。
谢谢！

http://codepen.io/anon/pen/vEwgBK.html

Gabriel

# 2015 年 6 月 1 日

这个方法在 Safari 中不再有效，对吗？
Safari 浏览器是否有新的方法？
我的英语不好，我是西班牙语使用者。

Zehra

评论永久链接# 2015 年 6 月 1 日

您好 @Gabriel,
在我为 Safari 安装了 QuickTime 后，它就能正常工作了。对于 Windows 用户，Safari 支持带有 QuickTime 的 html5 video 标签。您可以在此处找到更多详细信息：http://superuser.com/questions/870133/html5-video-tag-not-supported-in-safari-5-1-on-windows-7

Mario

# 2016 年 5 月 25 日

您好，我正在使用以下代码播放一个 19 秒的片段。自动播放功能在电脑上完美执行，但在手机上，我有一个播放按钮，必须点击它才能开始播放片段。有没有什么方法可以在移动设备上自动播放？

提前感谢！

…

<!–

…

评论

发表评论 取消回复

发表评论取消回复