第二章 1 HTML 5 视频

 

检测浏览器是否支持 HTML5 视频：

function checkVideo()

{

if(!!document.createElement('video').canPlayType)

  {

  varvidTest=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."

  }

}

 

 

当前，video 元素支持三种视频格式：

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

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

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

 

control属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

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

video 元素允许多个 source元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

 

Demo:

<videowidth="320" height="240" controls="controls">

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

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

Your browser doesnot support the video tag.

</video>

 

<video>标签的属性  HTML 5<video> 标签