最近太忙，没及时更新教程，加了私人微信号的同学也问，下一章节讲什么，怎么不更新了，不好意思，让大家久等了。

还有同学反馈：上两章节的篇幅太长了。我也觉得确实有点长了，不适合碎片化时间去阅读。以后我会控制一下文章内容量，非常感谢大家的反馈。

 

让我们继续投入到学习吧！

 

今天的章节也不难，我们要讲video元素，相信大家对它不会陌生。

 

以前的网页视频

过去还没有HTML5的时候，我们处理网页视频的时候，都是通过Flash插件来实现的，然而，并非所有浏览器都有同样的插件。

现在有了HTML5带来的video元素，开发者能够很方便地将视频资源嵌入到HTML文档中。

video标签的用法

<video>标签：定义视频，比如电影片段或其他视频。

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

就这么简单的一行代码，你就可以将你的视频文件引入到了HTML文档中。其中属性src跟img标签的src作用一致：指定资源的文件路径。

不支持video标签的浏览器

也许你会问，<video> 标签怎么说也是HTML5的新特性，老的浏览器不支持的情况下要怎么处理？也很简单：

<video src="movie.mp4">
        浏览器太老啦，该换了！
    </video>

可以在标签之间放置一句话，这样老的浏览器就可以显示出不支持该标签的信息。

ios 下 video标签 脱标后一点播放就消失_控件

（IE8就不支持video）

当然，除了可以是文本内容，也可以是其他的html代码。

 

如何处理3种视频格式

<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。但是，不同的浏览器对视频格式的支持也不一致。如何能更好地处理这种情况呢？看：

<video>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        浏览器太老啦，该换了！
    </video>

我们利用<source>标签为<video>标签定义视频文件资源，这样浏览器会自动选择一个它所支持的视频格式类型来展示，忽略其他类型，是不是觉得浏览器相当的机智。

ios 下 video标签 脱标后一点播放就消失_ide_02

 

而<source>标签的type属性是用于规定媒体资源的 MIME 类型。它的值有：

  • video/ogg
  • video/mp4
  • video/webm

video标签的属性

接下来，我们继续学习<video>标签几个很实用的属性。

autoplay 属性：规定视频加载完毕后就开始播放。

<video autoplay></video>

给<video>标签添加autoplay属性即可，这种写法是简写。你可以这样写：

<video autoplay="autoplay"></video>

但是我们建议用简写，更加简洁，下面的属性介绍，我们都会用简写的形式表示。

 

controls属性:向用户显示控件，比如播放按钮。

<video controls></video>

加上了controls属性，我们看看效果：

ios 下 video标签 脱标后一点播放就消失_控件_03

可以看到，视频下方出来了一些控件栏，点击控件可以对视频进行操作：播放/暂停、进度、声音、全屏显示等，十分方便。 

loop 属性: 使视频自动重复播放。

<video loop></video>

这个好理解，视频播放结束后会自动重新播放。

 

muted属性：规定视频静音播放。

<video muted></video>

 

poster 属性：视频播放之前显示的图片。

<video poster="poster.png"></video>

poster属性的值是该图片的所在路径。我们来看看效果：

ios 下 video标签 脱标后一点播放就消失_控件_04

（我是个gif图，加载慢，怪我咯）

在视频加载和播放之前，我们显示的都是poster图片（我放了“web前端教程”公众号的logo）的内容。直到用户点击播放的时候，才会显示视频的内容。

 

preload 属性：规定是否在页面加载后载入视频。

<video preload="auto"></video>

它的值有：

  • auto - 当页面加载后载入整个视频
  • metadata - 当页面加载后只载入元数据
  • none - 当页面加载后不载入视频

 

height属性：设置视频播放器的高度。

<video height="100"></video>

width属性：设置视频播放器的宽度。

<video width="100"></video>

利用height和width属性，可以模拟全屏展示效果。

JavaScript中的video对象

除了通过标签属性来控制视频文件以外， HTML5的 video 对象提供可以用于通过JavaScript 控制播放的方法、属性以及事件。

播放 / 暂停

video 对象提供了paused属性、play( )方法和pause()方法供我们使用。

paused属性可以获取当前视频是否处于暂停状态，如果是，返回true。如果正在播放，则返回false。

var v = document.getElementById('video');
    //当前是否暂停
    v.paused;

 

调用pause( )方法，会使视频立即处于暂停状态。

//暂停
    v.pause();

 

调用play( )方法，视频则会继续播放，十分简单。

//播放
    v.play();

音量控制

通过video对象的volume属性来控制音量。

v.volume += 0.1;

volume的值范围在0~1之间，值越大，声音越大，反之，声音越小。

seekable 属性

video对象还有一个seekable 属性，它会返回用户在视频中可寻址的时间范围。什么意思呢？我们来试一下看。

ios 下 video标签 脱标后一点播放就消失_控件_05

获取视频开始播放的时间位置，默认是0秒位置。

v.seekable.start(0);

 

获取视频播放结束的时间点，一般来说也就是这个视频的播放时长。

v.seekable.end(0);

利用这两个特性，就可以计算出视频的总播放时长是多少了。也就是上面说的可寻址的时间范围（很简单的一个概念，硬是说成可寻址时间范围这么陌生抽象）。

获取和控制播放时间

获取视频已播放了的时间长度。

v.played.end(0)

如果视频从0秒处开始播放，播放了4秒，那么上面得到的结果就是：4 。

 

设置视频当前的播放时间。

v.currentTime = 5;

这样，视频的播放时间就会跳至5秒的位置，然后继续播放。倘若你设置的时间大于视频的总时长，就会被跳到视频的最后位置。

URL控制播放范围

除了通过属性和JavaScript来控制视频之外，我们还有一种方式来操控视频。是什么呢？比较有趣。

 

在<video>指定视频文件的URI的时候，可以选择性地加入一些额外信息来指定视频播放的起始时间和结束时间。比如：我们要设置视频的播放开始时间在3秒的位置，结束时间在7秒的位置，那么，我们可以这样做：

<video src="movie.mp4#t=3,7"></video>

格式为： #t=startTime,endTime。这样，视频就会在3秒的位置开始播放，播放至7秒处就会停止。

<audio>标签和<video>标签很相似，本来想在这一章节一并讲解，但是这样做的话篇幅太长，只好留在下一章节再一起学习。

本节收获

  1. 使用<video>实现网页视频播放
  2. 旧版浏览器不支持<video>标签的处理方式
  3. 自定义一个视频的控件，实现播放/暂停、重播、静音、音量调节、播放进度调节、全屏显示等。