HTML5 学习笔记（一）- video

 直到现在，仍然没有一项可以让网页上显示视频的标准。大多数的视频都是通过插件（如Flash）来实现播放的，但是并不是所有的浏览器拥有同样的插件。

而伟大的HTML5规定了一个元素<video>来实现这种功能。

<video>支持Ogg、MPEG4、WebM三种视频格式。

我们可以通过下图来看下各种浏览器对这三种格式的支持情况。

（在这里我要代表大部分做前端开发的童鞋们强烈的鄙视下IE，尤其是IE6）

这个属性使用起来很简单，就跟平时我们写其他标签一样。

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

这个是最基本的写法了。

但是想IE这种傻X浏览器不支持怎么办，不急我们可以在开始标签和结束标签之间放置文本内容，这样不支持该标签的浏览器就可以显示出不支持该标签的信息。

<video src="somevideo.wmv">您的浏览器不支持 video 标签。</video>

有的时候我们不知道该浏览器是否支持这个格式的时候怎么办呢，不要急，video支持多个source元素，我们可以写多个不用的链接文件，浏览器将识别第一个可识别链接。

<video width="320" height="240">
  <source src="movie.ogg" mce_src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" mce_src="movie.mp4" type="video/mp4">
你的浏览器不支持video标签。
</video>

下个我们来看下video的各种属性：

<video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop">
  <source src="movie.ogg" mce_src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" mce_src="movie.mp4" type="video/mp4" />
你的浏览器不支持video标签。
</video>

下面我们来看下controls 属性：

controls 属性规定浏览器应该为视频提供播放控件。

如果设置了该属性，则规定不存在作者设置的脚本控件。

浏览器控件应该包括：

• 播放

• 暂停

• 定位

• 音量

• 全屏切换

• 字幕（如果可用）

• 音轨（如果可用）

在上面例子中我们没有用到preload 属性，下面我们来了解下为什么没有用。

首先preload 属性规定是否在页面加载后载入视频，它有三个值来控制他的功能：auto、meta、none。

 

• auto - 当页面加载后载入整个视频

• meta - 当页面加载后只载入元数据

• none - 当页面加载后不载入视频

下面的纯属扯淡了。。。

在学习的时候发现的一个功能，顺便记录下面。这个JS主要是用来检测浏览器是否支持HTML5中的video标签。

<script type="text/javascript">

function checkVideo()
{
if(!!document.createElement('video').canPlayType)
  {
  var vidTest=document.createElement("video");
  oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
  if (!oggTest)
    {
    h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    if (!h264Test)
      {
      document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
      }
    else
      {
      if (h264Test=="probably")
        {
        document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
        }
      else
        {
        document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
        }
      }
    }
  else
    {
    if (oggTest=="probably")
      {
      document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
      }
    else
      {
      document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
      }
    }
  }
else
  {
  document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  }
}
</script>

然后在页面里面添加如下代码，样式自己定义：

<div id="checkVideoResult">
<button onclick="checkVideo()">Check</button>
</div>

噢啦，HTML5还是很强大滴，继续学习，哈哈