和标签

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