一、<video>基本格式:
<video width=" " heigh="" src=""> </video>
二、<video>支持的格式:一般为mp3 和 mp4
三、source标签用法
作用:source标签可以链接不同的视频文件,浏览器将使用第一个可识别的格式,内容为source标签失效时的提醒
<video width="320" height="240" controls autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持video标签 </video>
四、<video>对应的属性
- controls 属性 在视频元素的底部展示一个元素自带的控制条工具。
- loop 属性 视频结束后将重新开始播放。
- poster 属性 将在视频文件播放前显示图片。
- utoplay 属性 一旦视频就绪马上开始自动播放。
- preload 属性 是否在页面加载后载入视频。
- 可能值 :
- auto (默认) : 当页面加载后载入整个视频
- metadata : 只加载播放文件的基本信息 (如:尺寸、持续时间、第一帧信息、曲目列表等)
- none : 当页面加载后不载入视频
这两个移动端不支持,因为耗费流量
其他不常用的属性:
- duration 整个媒体文件的播放时长,以s为单位。
- currentTime 以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索。并定位到媒体文件的特定位置。
- ended 如果媒体文件已经播放完毕,则返回true
- paused 如果媒体文件当前被暂停,则返回true
- startTime 返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
- error 在发生了错误的情况下返回的错误代码
- currentSrc 以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件
- muted 为音频文件设置静音或者消除静音,或者检测当前是否为静音
五、video常用事件
- load ( ) 方法 用于加载媒体文件。
- pause ( ) 方法 暂停正在播放中的媒体文件。
- play ( ) 方法 播放加载完成的文件。
- canPlayType ( ) 方法 用来测试浏览器是否支持指定的媒体类型。
- 该方法返回3个可能值:
- 空字符串:表示浏览器不支持此种媒体类型
- maybe:表示浏览器可能支持此种媒体类型
- probably:表示浏览器确定支持此种媒体类型
- timeupdate 事件
- 在媒体文件播放过程中,如果播放位置发生变化,就会触发该事件。 结合多媒体元素的“currentTime”与“duration”属性,可以动态显示媒体文件播放的当前时间与总量时间。
事件总集合:
- play 当多媒体元素开始播放媒体文件时触发
- pause 当多媒体元素中止播放媒体文件时触发
- ended 当媒体文件播放结束时触发
- error 当媒体文件在加载过程中出现错误时触发
- progress 当媒体元素正在读取媒体文件时触发
- emptied 当媒体元素播放一个未知或异常的媒体文件时触发
- waiting 当媒体元素正在等待加载下一帧播放数据时触发
- loadedmetadata 当多媒体元素加载完成时间与总字节数时触发
- playing 当媒体元素正在播放媒体文件时触发
- volumechange 当多媒体元素音量大小改变或启动静音时触发
六、<audio>标签格式:
<audio src=""> </audio>
时间: 2024-10-09 00:20:15