• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • html5 视频

    版本:HTML5

    HTML5 提供了播放视频文件的标准,即使用 <video> 元素,在一个支持HTML5的浏览器中,不需要安装任何插件就能播放视频,原生的支持视频。

    HTML5未出来之前,在线的音频和视频都是借助Flash或者第三方工具实现的,现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中,不需要安装任何插件就能播放音频和视频。原生的支持音频和视频,为HTML5注入了巨大的发展潜力。

    html实现音频嵌入(传统方式):这种方式虽然可以实现,但是要浏览器支持Flash而且并不能实现控制,所以要实现起来很麻烦。

    <object height="200" width="200" data="2_1.swf"></object>
    <embed src="2_1.mp4" type="">
    

    在HTML5中使用<video>和<video>播放视频

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

    <video>

    • <video>标签可以插入视频,用来设置视频内容。
    • controls属性,则向用户显示控件,提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停,如 play() 和 pause() 方法。。
    • autoplay属性规定一旦视频就绪马上开始播放,如果设置了该属性,视频将自动播放。且所有主流浏览器都支持 autoplay 属性。
    • loop属性,则当媒介文件完成播放后再次开始播放。。
    • poster属性,如果出现该属性,则向用户显示视频封面图片。
    • width宽度和height高度属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
    • 与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

    <source>

    • <source>标签用于设置音频的资源。video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式( MP4, WebM, 和 Ogg)
    • src属性,要播放的视频的 URL。
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
    </video
    

    效果

    • HTML5的视频: ogg (ogv), H.264 (mp4)
    • 需要留意一下 Google 的 VP8 视频解码,这个将被作为一个开源格式来结束(格式选择的)纷争。
    • 对于 低于IE9 和旧浏览器,你将需要一个折衷的解决方案。
    • 当你第一次尝试 HTML5 的音频/视频,你的服务器必须支持你打算提供的音频/视频的 MIME 格式。你将需要检查一下其在本地服务器上是否被支持。
    • 如果你使用 Safari 来检测 HTML5 的音频/视频支持,需要安装 QuickTime Player,没有QuickTime Player 的 Safari 什么都不能播放。

    浏览器支持

    Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillStyle 属性。
    注意:Internet Explorer 9之前的版本不支持<audio>标签。

    存在的问题:您必须把视频转换为很多不同的格式。<video> 元素在老式浏览器中无效。

    视频格式

    • ogg[oga]。ogv影片格式需要由ogg容器格式说起,Ogg是一个自由且开放标准的容器格式,由Xiph Org 基金会所维护。Ogg格式并不受到软体专利的限制,并设计用 於有效率地串流媒体和处理高品质的数位多媒体。「Ogg」意指一种档案格式,可以纳入各式各样自由和开放原始码的编解码器,包含音效、视讯、文字(像字幕)与後设资料的处理。在Ogg的多媒体框架下,Theora提供有损的影像层面,而通常用音乐导向的Vorbis编解码器作为音效层面。人类演说的压缩编解码器Speex、无损的音 效压缩编解码器FLAC和OggPCM也可能作为音效层面使用。「Ogg」这个词汇通常意指Ogg Vorbis此一音讯档案格式,也就是将Vorbis编码的音效包含在Ogg的容器中所成的格式。在以往,.ogg此一副档名曾经 被用在任何Ogg支援格式下的内容,但在2007年,Xiph Org基金会为了向後相容的考量,提出请求,将.ogg只留给Vorbis格式来使用。 Xiph Org基金会 决定创造一些新的副档名和媒体格式来描述不同类型的内容,像是只包含音效所用的.oga,包含或不含声音的影片(涵盖Theora)所用的.ogv和程式所用 的.ogx。Xiph Org基金会对Ogg的参照实装,目前最新的版本是2005年11月27日释出的libogg 1.1.3。[2]另一个版本libogg2也可以在Xiph Org基金会的SVN 套件库中找到。这两个函式库都是在新BSD许可证下释出的自由软体。因为其格式自由,和其参照实装并非Copyleft形式,无论自由或专有、商业或非商业的媒体播放器,甚至部分制造商的可携式媒体播放器和全球定位系 统接收器都采用了Ogg下的各种编解码器。
    • H.264[mp4]。H.264,同时也是MPEG-4第十部分,是由ITU-T视频编码专家组(VCEG)和ISO/IEC动态图像专家组(MPEG)联合组成的联合视频组(JVT,Joint Video Team)提出的高度压缩数字视频编解码器标准。H.264是ITU-T以H.26x系列为名称命名的标准之一,同时AVC是ISO/IEC MPEG一方的称呼。这个标准通常 被称之为H.264/AVC(或者AVC/H.264或者H.264/MPEG-4 AVC或MPEG-4/H.264 AVC)而明确的说明它两方面的开发者。该标准最早来自于ITU-T的称之 为H.26L的项目的开发。H.26L这个名称虽然不太常见,但是一直被使用着。该标准第一版的最终草案于2003年5月完成。MP4,全称MPEG-4 Part 14,是一种使用MPEG-4的多媒体电脑档案格式,副档名为.mp4,以储存数码音讯及数码视讯为主。另外,MP4又可理解为MP4 播放器,MP4播放器是一种集音频、视频、图片浏览、电子书、收音机等于一体的多功能播放器。

    在HTML4中播放视频

    HTML5未出来之前,在线的音频和视频都是借助Flash或者第三方工具实现的。插件的功能是扩展 HTML 浏览器的功能。辅助应用程序(helper application)是可由浏览器启动的程序。辅助应用程序也称为插件。辅助程序可用于播放音频和视频(以及其他)。辅助程序是使用<object>标签来加载的。

    • 不同的浏览器对音频格式的支持也不同。
    • 如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
    • 如果用户的计算机未安装插件,无法播放音频。
    • 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。

    使用辅助程序播放视频和音频的一个优势是,您能够允许用户来控制部分或全部播放设置。插件可以通过<object>标签或者<embed>标签添加在页面中。大多数辅助应用程序允许对音量设置和播放功能(比如后退、暂停、停止和播放)的手工(或程序的)控制。

    <object>

    所有主流浏览器都支持<object>标签。<object>元素定义了在 HTML 文档中嵌入的对象。该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

    下面的 HTML 片段显示嵌入网页的一段 Flash 视频:

    <object data="intro.swf" height="200" width="200"></object>
    

    存在的问题

    • 如果浏览器不支持 Flash,将无法播放视频。
    • iPad 和 iPhone 不能显示 Flash 视频。
    • 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

    <embed>

    <embed>标签的作用是在 HTML 页面中嵌入多媒体元素。下面的 HTML 代码显示嵌入网页的 Flash 视频:

    <embed src="intro.swf" height="200" width="200"> 
    

    存在的问题

    • HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
    • 如果浏览器不支持 Flash,那么视频将无法播放
    • iPad 和 iPhone 不能显示 Flash 视频。
    • 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

    HTML播放视频兼容方案

    以下实例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。

    HTML 5 + <object> + <embed>

     <video width="320" height="240" controls>
       <source src="movie.mp4" type="video/mp4">
       <source src="movie.ogg" type="video/ogg">
       <source src="movie.webm" type="video/webm">
       <object data="movie.mp4" width="320" height="240">
         <embed src="movie.swf" width="320" height="240">
       </object> 
     </video> 
    

    存在的问题::您必须把视频转换为很多不同的格式

    使用 JavaScript 来操作音频视频文件

    p>这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。



    HTML 音频/视频 方法

    方法描述
    addTextTrack()向音频/视频添加新的文本轨道。
    canPlayType()检测浏览器是否能播放指定的音频/视频类型。
    load()重新加载音频/视频元素。
    play()开始播放音频/视频。
    pause()暂停当前播放的音频/视频。

    HTML 音频/视频属性

    属性描述
    audioTracks返回表示可用音频轨道的 AudioTrackList 对象。
    autoplay设置或返回是否在加载完成后随即播放音频/视频。
    buffered返回表示音频/视频已缓冲部分的 TimeRanges 对象。
    controller返回表示音频/视频当前媒体控制器的 MediaController 对象。
    controls设置或返回音频/视频是否显示控件(比如播放/暂停等)。
    crossOrigin设置或返回音频/视频的 CORS 设置。
    currentSrc返回当前音频/视频的 URL。
    currentTime设置或返回音频/视频中的当前播放位置(以秒计)。
    defaultMuted设置或返回音频/视频默认是否静音。
    defaultPlaybackRate设置或返回音频/视频的默认播放速度。
    duration返回当前音频/视频的长度(以秒计)。
    ended返回音频/视频的播放是否已结束。
    error返回表示音频/视频错误状态的 MediaError 对象。
    loop设置或返回音频/视频是否应在结束时重新播放。
    mediaGroup设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)。
    muted设置或返回音频/视频是否静音。
    networkState返回音频/视频的当前网络状态。
    paused设置或返回音频/视频是否暂停。
    playbackRate设置或返回音频/视频播放的速度。
    played返回表示音频/视频已播放部分的 TimeRanges 对象。
    preload设置或返回音频/视频是否应该在页面加载后进行加载。
    readyState返回音频/视频当前的就绪状态。
    seekable返回表示音频/视频可寻址部分的 TimeRanges 对象。
    seeking返回用户是否正在音频/视频中进行查找。
    src设置或返回音频/视频元素的当前来源。
    startDate返回表示当前时间偏移的 Date 对象。
    textTracks返回表示可用文本轨道的 TextTrackList 对象。
    videoTracks返回表示可用视频轨道的 VideoTrackList 对象。
    volume设置或返回音频/视频的音量。

    HTML 音频/视频事件

    事件描述
    abort当音频/视频的加载已放弃时触发。
    canplay当浏览器可以开始播放音频/视频时触发。
    canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发。
    durationchange当音频/视频的时长已更改时触发。
    emptied当目前的播放列表为空时触发。
    ended当目前的播放列表已结束时触发。
    error当在音频/视频加载期间发生错误时触发。
    loadeddata当浏览器已加载音频/视频的当前帧时触发。
    loadedmetadata当浏览器已加载音频/视频的元数据时触发。
    loadstart当浏览器开始查找音频/视频时触发。
    pause当音频/视频已暂停时触发。
    play当音频/视频已开始或不再暂停时触发。
    playing当音频/视频在因缓冲而暂停或停止后已就绪时触发。
    progress当浏览器正在下载音频/视频时触发。
    ratechange当音频/视频的播放速度已更改时触发。
    seeked当用户已移动/跳跃到音频/视频中的新位置时触发。
    seeking当用户开始移动/跳跃到音频/视频中的新位置时触发。
    stalled当浏览器尝试获取媒体数据,但数据不可用时触发。
    suspend当浏览器刻意不获取媒体数据时触发。
    timeupdate当目前的播放位置已更改时触发。
    volumechange当音量已更改时触发。
    waiting当视频由于需要缓冲下一帧而停止时触发。