当前位置 : IT培训网 > Web前端 > Web教程 > 如何让HTML视频(Videos)动起来

如何让HTML视频(Videos)动起来

时间:2016-12-13 16:00:15  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
在 HTML 中播放视频并不容易!您需要谙熟大量技巧,以确保您的视频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。

在HTML中插入视频并不是一件容易的事情,不仅需要网页设计人员有很好的代码功底,而且还要有视频制作的经验,如此才能在网页中展现畅快淋漓的视频效果来,如果你想要学习这方面知识,赶紧与IT培训网小编联系吧!

HTML 视频(Videos

在 HTML 中播放视频的方法有很多种。

HTML 多媒体标签

New : HTML5新标签.

标签

描述

<embed>

定义内嵌对象。HTML4 中不赞成,HTML5 中允许。

<object>

定义内嵌对象。

<param>

定义对象的参数。

<audio>New

定义了声音内容

<video>New

定义一个视频或者影片

<source>New

定义了media元素的多媒体资源(<video> 和 <audio>)

<track>New

规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

 

HTML视频(Videos)播放

实例

<video width="320" height="240" controls>

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

  <source src="chhch20161213001.ogg" type="video/ogg">

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

  <object data="chhch20161213001.mp4" width="320" height="240">

    <embed src="chhch20161213001.swf" width="320" height="240">

  </object>

</video>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.alisonhorn.com)</title> 

</head>

<body>

 

<video width="320" height="240" controls autoplay>

  <source src="chhch20161213001.ogg" type="video/ogg">

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

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

  <object data="chhch20161213001.mp4" width="320" height="240">

    <embed width="320" height="240" src="chhch20161213001.swf">

  </object>

</video>

 

</body>

</html>

运行结果:

点击播放视频

问题以及解决方法

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

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

在本章,W3CSchool 为您总结了问题和解决方法。

使用 <embed> 标签

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

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

实例

<embed src="chhch20161213003.swf" height="200" width="200">

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.alisonhorn.com)</title> 

</head>

<body>

 

<h2>Playing the Object</h2>

 

<embed src="chhch20161213003.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>

 

</body>

</html>

运行结果:

Playing the Object

如果你无法看到该视频,那么可能你的电脑不支持该文件格式。

问题

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

如果浏览器不支持 Flash,那么视频将无法播放

iPad 和 iPhone 不能显示 Flash 视频。

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

使用 <object> 标签

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

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

实例

<object data="chhch20161213003.swf" height="200" width="200"></object>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.alisonhorn.com)</title> 

</head>

<body>

 

<object height="200" width="200" data="chhch20161213003.swf"></object>

 

</body>

</html>

运行结果:

点击播放视频

问题:

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

iPad 和 iPhone 不能显示 Flash 视频。

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

使用 HTML5 <video> 元素

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

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

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

实例

<video width="320" height="240" controls>

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

  <source src="chhch20161213001.ogg" type="video/ogg">

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

您的浏览器不支持 video 标签。

</video>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.alisonhorn.com)</title> 

</head>

<body>

 

<video width="320" height="240" controls autoplay>

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

  <source src="chhch20161213001.ogg" type="video/ogg">

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

  您的浏览器不支持 video 属性。

</video>

 

</body>

</html>

运行结果:

点击播放视频

问题:

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

<video> 元素在老式浏览器中无效。

最好的 HTML 解决方法

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

HTML 5 + <object> + <embed>

<video width="320" height="240" controls>

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

  <source src="chhch20161213001.ogg" type="video/ogg">

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

  <object data="chhch20161213001.mp4" width="320" height="240">

    <embed src="chhch20161213001.swf" width="320" height="240">

  </object>

</video>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.alisonhorn.com)</title> 

</head>

<body>

 

<video width="320" height="240" controls autoplay>

  <source src="chhch20161213001.ogg" type="video/ogg">

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

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

  <object data="chhch20161213001.mp4" width="320" height="240">

    <embed width="320" height="240" src="chhch20161213001.swf">

  </object>

</video>

 

</body>

</html>

运行结果:

点击播放视频

问题:

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

优酷解决方案

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

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

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>

使用超链接

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

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

实例

<a href="chhch20161213003.swf">Play a video file</a>

源代码:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培训网(www.alisonhorn.com)</title> 

</head>

<body>

 

<h2>点击这个链接打开查看</h2>

 

<a href="chhch20161213003.swf">播放视频文件</a>

 

</body>

</html>

运行结果:

点击这个链接打开查看

播放视频文件

关于内联视频的说明

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

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

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

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

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放