html5怎样播放swf格式的视频

假如swf文件名为demo.swf跟html页面在同一目录下，代码如下：

如果浏览器支持html5的video标签

<videosrc="demo.swf"controls/>

src属性 () 设备要播放视频的名称(可以多个), control的布尔值用来调整是否显示播放控制栏. 完整的属性列表如下所示:

下面是一使用了多个属性的示例，也包括一个备用(fallback)的错误信息(当浏览器不支持video标签时显示).

<videosrc="demo.swf" width="320" height="240" autoplaycontrolsloop>

Your browser does not support the video tag.

</video>

如果不支持的话可以用object加载，前提是浏览器安装了flash插件

<object data="videoplayer.swf" type="application/x-shockwave-flash">

<param name="movie" value="demo.swf"/>

<embed src="demo.swf"/>

</object>

由于Flash被苹果拒之门外，很多开发者在开发产品时都不得不在Flash和HTML5之间做出选择。今天Google发布的一个新工具让天平再次偏向HTML5这边，它就是Swiffy。

Swiffy可以把Flash文件转换成HTML5标准。该项目源于Google移动广告团队，开发动机就是有些设备不支持Adobe的格式，因此无法显示Flash动画。有了这个工具，你只需上传.swf文件，然后就可以将其转化为HTML5标准，显示效果和Flash一样（文件格式为JSON）。

Google称这个转换工具还不支持完全基于Flash的游戏，但是支持向量图形、嵌入式字体、图片、动画等。下面就是一个演示效果截图「上面为Flash动画，下面为经Swiffy转化后的动画」，你可以点击这个链接亲自体验。

Swiffy目前只是一个实验项目，但对开发者来说非常有用。与此同时，反Flash的苹果肯定在偷着乐吧。 除了这款Flash转化工具之外，Adobe今年3月份自己也推出一款转化工具Wallaby。

Flash 大红大紫的日子已经过去了，浏览器厂商们齐心协力整出了 HTML5 标准，抢 Flash 的饭碗；乔教主坚决不让 iPhone 支持 Flash，Adobe 心都挖凉了。现在 Google 也推出了 Swiffy，免费把 SWF 格式转换为 HTML5 代码，赤裸裸的挖墙脚啊。

Google Swiffy 目标用户是网络开发人员，它不能转换 Flash 视频，但对大多数 Action Script 交互型 Flash 支持良好。用户只需将 SWF 文件上传，转换非常快。输出的 HTML 代码会用到一些 SVG 特性，目前只有 webkit 内核浏览器支持；这意味着输出的代码仅仅在 Safari/Chrome 上可用，自然，iOS 自带浏览器也会支持。

1、<video src="hangge.mp4" controls></video>1

2，通过width和height设置视频窗口大小

<video src="hangge.mp4" controls width="400" height="300"></video>1

3，预加载媒体文件

设置preload不同的属性值，可以告诉浏览器应该怎样加载一个媒体文件：

（1）值为auto：让浏览器自动下载整个文件

（2）值为none：让浏览器不必预先下载文件

（3）值为metadata：让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）

<!-- 用户点击播放才开始下载 --><video src="hangge.mp4" controls preload="none"></video>12

4，自动播放

（1）使用autoplay属性可以让浏览器加载完视频文件后立即播放。

<video src="hangge.mp4" controls autoplay></video>1

（2）如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。

<video src="hangge.mp4" controls autoplay muted></video>1

5，循环播放

使用loop属性让视频播放结束时，再从头开始播放。

<video src="hangge.mp4" controls loop></video>1

6，设置替换视频的图片（封面图片）

通过poster属性可以设置，浏览器在下面三种情况下会使用这个图片：

（1）视频第一帧未加载完毕

（2）把preload属性设置为none

（3）没有找到指定的视频文件

<video src="hangge.mp4" controls poster="hangge.png"></video>1

7，浏览器兼容，如何让每一个浏览器都能顺利播放视频

现在大部分浏览器都能支持H.264格式的视频，但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案：

（1）使用多种视频格式

<video>和<audio>元素有个内置的格式后备系统。我们不使用src属性，而是在其内部嵌套一组<source>元素，浏览器会选择播放第一个它所支持的文件。

我们可以添加WebM格式的视频提供对Opera的支持。

<video controls>

<source src="hangge.mp4" type="video/mp4">

<source src="hangge.webm" type="video/webm">

</video>1234

（2）添加Flash后备措施（推荐）

上面那个方法不推荐，应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种连<video>元素都不支持的老浏览器。

这里使用Flowplayer Flash作为备用播放器（本地下载 ：flowplayer-3.2.18.zip）

<video controls>

<source src="hangge.mp4" type="video/mp4">

<source src="hangge.webm" type="video/webm">

<object id="flowplayer" width="400" height="300"

data="flowplayer-3.2.18.swf"

type="application/x-shockwave-flash">

<param name="movie" value="flowplayer-3.2.18.swf">

<param name="flashvars" value='config={"clip":"hangge.mp4"}'>

</object>

</video>1234567891011

（3）也有人优先使用Flash，而HTML5作为后备措施。

这么做是因为Flash普及率比较高，而HTML5作为后备可以扩展iPad和iPhone用户

<object id="flowplayer" width="400" height="300"data="flowplayer-3.2.18.swf"type="application/x-shockwave-flash">

<param name="movie" value="flowplayer-3.2.18.swf">

<param name="flashvars" value='config={"clip":"hangge.mp4"}'>

<video controls>

<source src="hangge.mp4" type="video/mp4">

<source src="hangge.webm" type="video/webm">

</video>

</object>

---