我爱自学网 > HTML/CSS > HTML 教程 > HTML 教程 > HTML 视频 访问量:

HTML 视频

<上一篇:HTML 音频 下一篇:没有了 >
HTML 视频(Videos) 在 HTML 中播放视频的方法有很多种。

HTML视频(Videos)播放

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
 
<video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="movie.swf">
  </object>
</video>
 
</body>
</html>

问题以及解决方法

在 HTML 中播放视频并不容易!

您需要谙熟大量技巧,以确保您的视频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。

在本章,菜鸟教程为您总结了问题和解决方法。

使用 <embed> 标签

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

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
 
<h2>Playing the Object</h2>
 
<embed src="intro.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>
 
</body>
</html>

问题

  • HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
  • 如果浏览器不支持 Flash,那么视频将无法播放
  • iPad 和 iPhone 不能显示 Flash 视频。
  • 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

使用 <object> 标签

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

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
 
<object height="200" width="200" data="intro.swf"></object>
 
</body>
</html>

问题:

  • 如果浏览器不支持 Flash,将无法播放视频。
  • iPad 和 iPhone 不能显示 Flash 视频。
  • 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

使用 HTML5 <video> 元素

HTML5 <video> 标签定义了一个视频或者影片.

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

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
 
<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持 video 属性。
</video>
 
</body>
</html>

问题:

  • 您必须把视频转换为很多不同的格式。
  • <video> 元素在老式浏览器中无效。

最好的 HTML 解决方法

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
 
<video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="movie.swf">
  </object>
</video>
 
</body>
</html>

问题:

  • 您必须把视频转换为很多不同的格式

优酷解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

如果您希望在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频。

你可以在各大视频网站的分享入口,找到嵌入的 HTML 代码。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
 
<embed src='https://player.youku.com/player.php/sid/XMTQ3MjM5Mjc0MA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
 
</body>
</html>

使用超链接

如果网页包含指向媒体文件的超链接,大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动"辅助应用程序",比如 Windows Media Player 来播放这个 AVI 文件:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
 
<h2>点击这个链接打开查看</h2>
 
<a href="intro.swf">播放视频文件</a> 
 
</body>
</html>

关于内联视频的说明

当视频被包含在网页中时,它被称为内联视频。

如果您打算在 web 应用程序中使用内联视频,您需要意识到很多人都觉得内联视频令人恼火。

同时请注意,用户可能已经关闭了浏览器中的内联视频选项。

我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是,在用户需要看到视频并点击某个链接时,会打开页面然后播放视频。

HTML 多媒体标签

New : HTML5新标签.

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio>New 定义了声音内容
<video>New 定义一个视频或者影片
<source>New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track>New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)
<上一篇:HTML 音频 下一篇:没有了 >
本章内容:
1. HTML 简介
2. HTML 编辑器
3. HTML 基础
4. HTML 元素
5. HTML 属性
6. HTML 标题
7. HTML 段落
8. HTML 文本格式化
9. HTML 链接
10. HTML 头部<head>
11. HTML CSS样式
12. HTML 图像
13. HTML 表格
14. HTML 列表
15. HTML 区块
16. HTML 布局
17. HTML 表单
18. HTML 框架
19. HTML 颜色
20. HTML 颜色名
21. HTML 颜色值
22. HTML 脚本
23. HTML 字符实体
24. HTML URL
25. HTML 速查列表
26. HTML 总结
27. HTML - XHTML
28. HTML 多媒体
29. HTML 插件
30. HTML 音频
31. HTML 视频