2 Video标签的使用 Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，以及一个内部使用的标签<source>。 Video标签内除了可以包含<source>标签外，还可以包含当指定的视频都不能播放时，返回的内容。 2.1 src属性和poster属性 你能想象src属性是用来干啥的。跟<img>标签的一样，这个属性用于指定视频的地址。 而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。 2.2 preload属性 这个属性也能通过 None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。 Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。 Auto：全部预加载。 2.3 autoplay属性 Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。 注意，HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，（此处，自动播放为<video autoplay />或者<video autoplay=”autoplay” />）；而在标签中不使用此属性表示false（此处不进行自动播放为<video />）。 2.4 loop属性 一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔属性。 2.5 controls属性 Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。 控制栏须包括播放暂停控制，播放进度控制，音量控制等等。 2.6 width属性和height属性 属于标签的通用属性了，这个不用多说。 2.7 source标签 Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（ 此标签包含src、type、media三个属性。 src属性：用于指定媒体的地址，和video标签的一样。 Type属性：用于说明src属性指定媒体的类型，帮助 Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。你想到<style>标签的media属性了么？一样一样一样的。 3 媒介属性 媒介属性包括error、currentsrc、networkState、preload、buffered、readyState、seeking、currentTime、startTime、duration、paused、defaultPlaybackRate、playbackRate、played、seekable、ended、autoplay、loop、controls、volume、muted等，可以用于返回或改变媒介的状态。 注意：以下使用到的“media”统一代表一个视频元素。如下图所示： 3.1 error属性 只读属性。使用media.error返回一个MediaError对象表明当前的错误状态，如果没有出错，返回null。 使用media.error.code返回媒介的错误状态，共有4个可能值。
3.2 currentSrc属性 只读属性。使用media.currentSrc返回该媒介标签的src属性值。 3.3 networkState属性 只读属性。使用media.networkState返回媒介的网络状态，共有4个可能值。
3.4 preload属性 可读写属性。使用media.preload返回媒介标签的preload属性值，或者对其进行赋值，改变媒介标签的preload属性值。 3.5 buffered属性 只读属性。使用media.buffered返回一个TimeRanges对象，确认 3.6 readyState属性 只读属性。使用media.readyState返回媒介当前播放位置的就绪状态，共有5个可能值。
3.7 seeking、seekable属性 均为只读属性。 使用media.seeking返回一个布尔值，表明 使用media.seekable发挥一个TimeRanges对象，表明可以对当前媒介资源进行请求。 3.8 currentTime、startTime、duration属性 三者的值均为时间，单位为秒，currentTime为可读写属性，其余两个均为只读属性。 使用media.currentTime返回当前媒介的播放位置，或者对其赋值，改变媒介的播放位置。 对于使用media.currentTime的时候，如果返回的时间超出了 使用media.startTime返回媒介文件播放的开始时间，通常为0。 使用media.duration返回媒介文件总的播放时长。 3.9 played、paused、ended属性 三者均为只读属性。 使用media. played返回一个TimeRanges对象，标明 使用media.paused返回一个布尔值，表明媒介是否暂停播放，ture表示媒介暂停播放，false表示媒介正在播放。 使用media.ended返回一个布尔值，表明媒介是否已结束，ture表示媒介已经播放完毕，false表示还未播放完毕。 3.10 defaultPlaybackRate、playbackRate属性 两者均为可读写属性。 使用media.defaultPlaybackRate返回媒介默认的播放速率，或对其赋值，改变媒介的默认播放速率。 使用media.playbackRate返回当前的媒介播放速率，或对其赋值，改变当前的媒介播放速率。 3.11 autoplay、loop属性 两者均为可读写属性。 使用media.autoplay返回一个布尔值，表明当前媒介是否设置了自动播放，ture表示当前媒介为自动播放，false表示非自动播放，或对其赋值，设置是否自动播放。 使用media.loop返回一个布尔值，表明当前媒介是否设置了循环播放，ture表示当前媒介设置了循环播放，false表示没有设置循环播放，或对其赋值，设置是否循环播放。 3.12 controls、volume、muted属性 三者均为可读写属性。 使用media.controls返回一个布尔值，表明当前媒介是否使用了 使用media.volume返回当前媒介的音量值，或对其赋值，改变媒介的播放音量，范围为0到1，0相当于静音，1为最大音量。 使用media.muted返回一个布尔值，表明当前媒介播放是否开启静音，ture表示没有开启静音，false表示静音，或对其赋值，设置播放是否静音。 4 媒介方法 4.1 play()、pause()、load()方法 使用media.play()播放视频，并会将media.paused的值强行设为false。 使用media.pause()暂停视频，并会将media.paused的值强行设为ture。 使用media.load()重新载入视频，并会将media.playbackRate的值强行设为media.defaultPlaybackRate的值，且强行将media.error的值设为null。 4.2 canPlayType（type）方法 使用canPlayType（type）方法测试 方法返回3个可能值（均为
5 媒介事件 媒介事件可以作用于各种媒介元素，如视频、音频、图片等，主要包括loadstart、progress、suspend、abort、error、emptied、stalled、play、pause、loadedmetadata、loadeddata、waiting、playing、canplay、canplaythrough、seeking、seeked、timeupdate、ended、ratechange、durationchange、volumechange等事件。 5.1 事件处理方式 一般有两种方式处理事件。 一种是监听的方式：addEventListener（“事件名”，处理函数，处理方式）。例如，如果需要在浏览器对媒介进行播放时执行begin_playing函数，那么可以这样，media. addEventListener（“play”， begin_playing，false）。 另一种是直接赋值的方式：on时间名=处理函数，这是我们相对用的较多的方法，也就是“当XXX事件触发时”。例如，要进行和上面相同的处理，可以这样media.onplay= begin_playing。 5.2 事件介绍 loadstart事件：浏览器开始请求媒介； progress事件：浏览器正在获取媒介； suspend事件：浏览器非主动获取媒介数据，但没有加载完整个媒介资源； abort事件：浏览器在完全加载前中止获取媒介数据； error事件：获取媒介数据出错； emptied事件：媒介元素的网络状态突然变为未初始化； stalled事件：浏览器获取媒介数据异常； play事件：即将开始播放 pause事件：暂停播放 loadedmetadata事件：浏览器获取完媒介资源的时长和尺寸 loadeddata事件：已加载当前播放位置的媒介数据； waiting事件：播放由于下一帧无效（例如未加载）而已停止（但浏览器确认下一帧会马上有效）； playing事件：已经开始播放 canplay事件：浏览器能够开始媒介播放，但估计以当前速率播放不能直接将媒介播放完（播放期间需要缓冲）； canplaythrough事件：浏览器估计以当前速率直接播放可以直接播放完整个媒介资源（期间不需要缓冲）； seeking事件：浏览器正在请求数据（seeking属性值为true）； seeked事件：浏览器停止请求数据（seeking属性值为false）； timeupdate事件：当前播放位置（currentTime属性）改变； ended事件：播放由于媒介结束而停止； ratechange事件：默认播放速率（defaultPlaybackRate属性）改变或播放速率（playbackRate属性）改变； durationchange事件：媒介时长（duration属性）改变； volumechange事件：音量（volume属性）改变或静音（muted属性）。 |
京ICP备14042305号
html5star team © 2012-2013 html5星空 Comsenz Inc.
GMT+8, 2020-9-22 22:06 , Processed in 0.082704 second(s), 32 queries .
