KUNKKA » wmv http://www.kunkka.cn 活着就是折腾 Tue, 01 Jun 2010 07:38:00 +0000 http://wordpress.org/?v=2.8.2 en hourly 1 使用object在web中嵌入视频文件 http://www.kunkka.cn/2010/02/02/how-to-embed-video/ http://www.kunkka.cn/2010/02/02/how-to-embed-video/#comments Tue, 02 Feb 2010 09:54:52 +0000 kunkka http://www.kunkka.cn:81/?p=287 使用object在web中嵌入视频文件

如何在web中嵌入视频文件，用什么方式嵌入既符合标准又能兼容主流浏览器？

在web中嵌入视频的方式有两种，使用古老的embed标签或者object标签，古老的embed标签是由传说中Netscape所创建，它虽然广泛存在，但依然没有被W3c收录，是不被W3c推荐的，取而代之的是object标签，object标签在未来的web应用中不仅用于视频媒体的嵌入，还包括images,text,audio,applets,Flash animations等等各式各样格式的文件，现在大多数主流浏览器也都支持object标签的很多类型调用，要测试你的浏览器支持那些object类型，可以查看 OBJECT test suite

那如何嵌入一段视频到web中(以wmv为例)，代码如下：

1
2
3
4
5

<object data="xx.wmv" type="video/x-ms-wmv" width="320" height="255">
  <param name="src" value="xx.wmv">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
</object>

以上这段代码可以正常运行在绝大多数浏览器中，如果你要插入其他格式的视频，你可以更改object标签的type属性，就比如你需要插入mpg格式的视频，type就应该为”video/mpeg”；avi格式相对应的type为”video/avi”

但在嵌入QuickTime文件时，IE7以下版本和标准浏览器还有分歧，它需要一个非标准的classid属性值，一个标识去加载一个相关联activeX，详细查看Bye Bye Embed。解决方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab"
        width="320" height="255">
  <param name="src" value="data/test.mov" >
  <param name="controller" value="true" >
  <param name="autoplay" value="false">
  <!--[if gte IE 7]> <!-->
  <object type="video/quicktime" data="data/test.mov" width="320" height="255">
    <param name="controller" value="true" >
    <param name="autoplay" value="false">
  </object>
  <!--<![endif]-->
</object>

在实际应用中，如果我按标准方式插入一个wmv视频到IE中，播放器需要等待wmv文件完全载入成功后才会显现出来（非流媒体播放），也就是说视频没有载入完成的时候，是不会出现播放界面的，这样对于k数比较大的视频文件，就是个悲剧。但经过尝试如果去掉object的data属性，只是使用<param name=”src” value=”xx.wmv”>来调用wmv文件，不仅IE正常了，而且其他主流浏览器也能正常播放…… 最终代码如下：

1
2
3
4
5

<object type="video/x-ms-wmv" width="320" height="255">
  <param name="src" value="xx.wmv">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
</object>
]]> http://www.kunkka.cn/2010/02/02/how-to-embed-video/feed/ 4