当前位置 : IT培训网 > Web前端 > Web教程 > 如何在HTML5网页中插入 Video（视频）

如何在HTML5网页中插入 Video（视频）

时间：2016-12-07 13:52:35  来源：web前端培训网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   html5(197)如何在网页中插入视频(1)Video(4)
如果想要制作一个漂亮好看的视频还需要我们有设计天赋，但学了这节课，一个简单的视频还是可以做出来的。好了，你知道如何在HTML5网页中植入视频了吧，如果还不懂，请咨询IT培训网小编吧，让我们一起学习，一起进步，共同

在一个网页中植入视频是最常见的事情了，比如优酷、土豆等等视频网站，哪一个网页没有视频呢，至于如何制作的，还需要参加培训班来学习下了，下面就先随着小编一起来看看在HTML5网页中如何植入Video（视频）吧！

HTML5 Video(视频)

很多站点都会使用到视频. HTML5 提供了展示视频的标准。

HTML5 Video 标签

标签

描述

<video>

定义一个视频

<source>

定义多种媒体资源,比如 <video> 和<audio>

<track>

定义在媒体播放器文本轨迹
 

Web站点上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

浏览器支持

如何在HTML5网页中插入 Video（视频）_www.itpxw.cn

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

HTML5 (视频)- 如何工作

如需在 HTML5 中显示视频，您所有需要的是：

实例

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

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

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

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

</video>

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

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

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

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

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

</video>

</body>

</html>

运行结果：

如何在HTML5网页中插入 Video（视频）_www.itpxw.cn

<video> 元素提供了 播放、暂停和音量控件来控制视频。

同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

视频格式与浏览器的支持

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

浏览器

MP4

WebM

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

NO

NO

Opera

YES (从 Opera 25 起)

YES

YES
 

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式

MIME-type

MP4

video/mp4

WebM

video/webm

Ogg

video/ogg

HTML5 <video> - 使用 DOM 进行控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。

实例 1

为视频创建简单的播放/暂停以及调整尺寸控件：

源代码：

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<div style="text-align:center">

  <button onclick="playPause()">播放/暂停</button>

  <button onclick="makeBig()">放大</button>

  <button onclick="makeSmall()">缩小</button>

  <button onclick="makeNormal()">普通</button>

  <br>

  <video id="video1" width="420">

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

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

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

  </video>

</div>

<script>

var myVideo=document.getElementById("video1");

function playPause()

{

         if (myVideo.paused)

           myVideo.play();

         else

           myVideo.pause();

}

         function makeBig()

{

         myVideo.width=560;

}

         function makeSmall()

{

         myVideo.width=320;

}

         function makeNormal()

{

         myVideo.width=420;

}

</script>

</body>

</html>

运行结果：

效果图：

如何在HTML5网页中插入 Video（视频）_www.itpxw.cn

上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。

植入视频的方式就这些了，如果想要制作一个漂亮好看的视频还需要我们有设计天赋，但学了这节课，一个简单的视频还是可以做出来的。好了，你知道如何在HTML5网页中植入视频了吧，如果还不懂，请咨询IT培训网小编吧，让我们一起学习，一起进步，共同学习HTML5方面的更多知识。

顶一下
(2)
66.7%
踩一下
(1)
33.3%
------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

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）播放