您的位置:首页> 前端教程> HTML教程
文章导航

HTML 视频

2018-10-22 17:24| 作者: admin| 查看: 766| 评论: 0|来自: 蚂蚁部落

在HTML中播放视频的方法有很多种;需要考虑到一定的兼容型问题。

一.使用<embed>标签:

此标签的作用是在HTML页面中嵌入多媒体元素。

下面的HTML代码显示嵌入网页的Flash视频:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<embed src="demo/html5/flash/antzone.swf" width="200" height="200">
</body>
</html>

特别说明:

(1).HTML4无法识别 <embed> 标签。您的页面无法通过验证。

(2).如果浏览器不支持 Flash,那么视频将无法播放。

(3).iPad 和 iPhone 不能显示 Flash 视频。

(4).如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

二.使用<object>标签:

此标签的作用是在HTML页面中嵌入多媒体元素。

下面的HTML片段显示嵌入网页的一段Flash视频:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<object height="200" width="200" data="demo/html5/flash/antzone.swf"></object>
</body>
</html>

特别说明:

(1).如果浏览器不支持 Flash,将无法播放视频。

(2).iPad 和 iPhone 不能显示 Flash 视频。

(3).如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

三.使用HTML5<video>元素:

此标签定义了一个视频或者影片.

<video>元素在所有现代浏览器中都支持。

以下HTML 片段会显示一段嵌入网页的ogg、mp4 或webm格式的视频:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<video id="video" width="420" style="margin-top:15px;">
  <source src="demo/html5/video/antzone.mp4" type="video/mp4" />
  <source src="demo/html5/video/softwhy.ogg" type="video/ogg" />
  <source src="demo/html5/video/softwhy.webm" type="video/webm" />
  浏览器不支持video标签
</video>
</body>
</html>

四.最好的HTML解决方法:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="demo/html5/video/antzone.mp4" type="video/mp4">
  <source src="demo/html5/video/softwhy.ogg" type="video/ogg">
  <source src="demo/html5/video/movie.webm" type="video/webm">
  <object data="demo/html5/video/movie.mp4" width="320" height="240">
    <embed src="demo/html5/video/movie.swf" width="320" height="240">
  </object> 
</video>
</body>
</html>

上面的代码能够解决当前的兼容性问题。


鲜花

握手

雷人

路过

鸡蛋
上一篇:HTML input url域下一篇:HTML 音频

最新评论

返回顶部