<video>和<audio>标签

时间：2015-06-09 11:37:24 阅读：214 评论：0 收藏：0 [点我收藏+]

标签：

一、<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>

<video>和<audio>标签

标签：

原文地址：http://www.cnblogs.com/pan-hello/p/4562740.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行