标签的特性

之前的网页视频

 

过去尚未HTML5的时候，咱们处理网页视频的时候，都是经过Flash插件来实现的，然而，并不是全部浏览器都有一样的插件。

 

如今有了HTML5带来的video元素，开发者可以很方便地将视频资源嵌入到HTML文档中。

 

video标签的用法

 

<video>标签：定义视频，好比电影片断或其余视频。

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

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

 

不支持video标签的浏览器

 

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

    <video src="movie.mp4">
        浏览器太老啦，该换了！
    </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>标签订义视频文件资源，这样浏览器会自动选择一个它所支持的视频格式类型来展现，忽略其余类型，是否是以为浏览器至关的机智。

 

而<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属性，咱们看看效果：

 

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

 

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

    <video loop></video>

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

 

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

    <video muted></video>

 

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

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

 

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

 

（我是个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 属性，它会返回用户在视频中可寻址的时间范围。什么意思呢？咱们来试一下看。

 

获取视频开始播放的时间位置，默认是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秒处就会中止。