HTML5 - Voide标签

Posted 2022-12-08 来世当猪

html 5 <video> 标签

定义和用法

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

HTML 4.01 与 HTML 5 之间的差异

<video> 标签是 HTML 5 的新标签。

提示和注释

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

例子：

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

属性

属性	值	描述
autoplay	true | false	如果是 true，则视频在就绪后马上播放。
controls	true | false	如果是 true，则向用户显示控件，比如播放按钮。
end	numeric value	定义播放器在视频流中的何处停止播放。默认地，声音会播放到结尾。
height	pixels	设置视频播放器的高度。
loopend	numeric value	定义在视频流中循环播放停止的位置，默认是 end 属性的值。
loopstart	numeric value	定义在视频流中循环播放的开始位置。默认是 start 属性的值
playcount	numeric value	定义视频片段播放多少次。默认是 1。
poster	url	在视频播放之前所显示的图片的 URL。
src	url	要播放的视频的 URL。
start	numeric value	定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。
width	pixels	设置视频播放器的宽度。

音视频的发展史

早期：<embed>+<object>+文件
问题：不是所有浏览器都支持，而且embed不是标准


现状：Realplay、window media、Quick Time 、Flash
问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。

HTML5认为浏览器应该原生支持音视频，因为他们现在也是web中的一等公民了！

1、常见的视频格式
视频的组成部分：画面、音频、编码格式
视频编码：H.264、Theora、VP8(google开源)
常见的音频格式
视频编码：ACC、MP3、Vorbis


HTML5支持的格式:
HTML5能在完全脱离插件的情况下播放音视频但是不是所有格式都支持。

HTML5支持的视频格式：
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O

<Video>的使用

<video src="文件地址" controls="controls"></video>

< video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</ video >

< video  controls="controls"  width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >

Video的API方法

方法 属性事件
play() currentSrcplay
pause() currentTimepause
load() videoWidthprogress
canPlayType videoHeighterror

Video的API属性

属性 说明
audioTracks 返回可用的音轨列表（MultipleTrackList对象）
autoplay 媒体加载后自动播放
buffered 返回缓冲部件的时间范围(TimeRanges对象)
controller 返回当前的媒体控制器（MediaController对象）
controls 显示播控控件
crossOrigin CORS设置
currentSrc 返回当前媒体的URL
currentTime 当前播放的时间，单位秒 (快进快退10秒)
defaultMuted 缺省是否静音
defaultPlaybackRate 播控的缺省倍速