html基础学习之视频播放

来源：互联网发布：server2012 mysql集群编辑：程序博客网时间：2024/05/08 04:30

html支持视频播放有很多种方式，包括html5和普通的html，在这里我做的总结是html支持的所有的方式。

使用到的标签：<video>(html5的新标签)<embed>(html5新标签)<object>

方式1：<embed>

demo:

标签的意义：embed是html的新标签，意思是可以插入任何类型的文档，前提是本地电脑上要有可以打开相应文档的程序，一般常用于网页插入多媒体，如swf（flash文件）、rm（RealAuto、RealVideo、RealFlash）、mid（音乐文件）、wav（音频文件，也可以当做视频文件）

优点：简单好写，只有一行代码就实现了视频播放。

缺点：

1、因为是html5的新标签，html4不支持，这个标签仅仅能在chrome，safari，opera、firefox等最新版浏览器中支持。

2、ipad和iphone不能显示flash。（苹果产品都不支持flash）

方式2：<object>

标签的意义：和embed类似，特别的有不需要专门突出width和height属性，即使是不写height和width属性，视频的大小会自动按照元素本身的大小制定。

优点：代码简单。

缺点：支持Active插件、html5的浏览器支持，其他的还有待试验。

如果embed和object同时出现呢：

同时出现的话，支持object的浏览器会自动忽略embed标签，老一些的浏览器会支持embed标签。

方式3：video

demo：

标签的意义：定义插入各种音乐，各种音频流。

优点：是html新标签，现在各大浏览器的最新版本已经普遍支持。

缺点：老的浏览器不支持。

解决方案：在video标签之间插入不同的视频格式和老浏览器支持的标签。

<video width="320" height="240" controls="controls">  <source src="movie.mp4" type="video/mp4" />  <source src="movie.ogg" type="video/ogg" />  <source src="movie.webm" type="video/webm" />  <object data="movie.mp4" width="320" height="240">    <embed src="movie.swf" width="320" height="240" />  </object></video>

上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

缺点：

问题

您必须把视频转换为很多不同的格式
<video> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法通过 HTML 4 和 XHTML 验证。

0 0