Maison> interface Web> tutoriel HTML> le corps du texte

audio和video元素_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:31:37
original
1350 Les gens l'ont consulté

目录 [1]HTML元素 audio video source [2]API 方法 属性 事件 audio专有

前面的话

  HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容,这两个标签是

  以视频文件举例,它包含了音频轨道、视频轨道和其他一些元数据(封面、标题、子标题、字幕等)

HTML元素

  使用这两个元素至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将作为后备内容,在浏览器不支持这两个媒体元素的情况下显示

autoplay 自动播放controls 显示控件loop 循环播放preload 音频在页面加载时进行加载,并预备播放(若使用autoplay,则忽略该属性)src 要播放的音频的URL
Copier après la connexion

Copier après la connexion

<演示框> 点击下列相应属性值可进行演示

autoplay 自动播放controls 显示控件height    播放器高度width     播放器宽度loop 循环播放preload 视频在页面加载时进行加载,并预备播放(若使用autoplay,则忽略该属性)preload="none"//当页面加载后不载入视频preload="auto"//当页面加载后载入整个视频preload="meta"//当页面加载后只载入元数据src 要播放的视频的URLposter     规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像
Copier après la connexion

Copier après la connexion

<演示框> 点击下列相应属性值可进行演示

  为

media 规定媒体资源的类型(没有浏览器支持)src  规定媒体文件的URLtype 规定媒体资源的MIME类型
Copier après la connexion

  常用类型

    视频 [1]video/ogg [2]video/mp4 [3]video/webm

    音频 [1]audio/ogg [2]audio/mpeg

  使用

Copier après la connexion

Copier après la connexion

  因为并非所有浏览器都支持所有媒体格式,所以可以指定多个不同的媒体来源。为此,不用在标签中指定src属性,而是使用一个或多个元素

Copier après la connexion

Copier après la connexion

  因为并非所有浏览器都支持

Copier après la connexion

Copier après la connexion

API

  HTML5 DOM为

方法

(1)canPlayType()

  检测浏览器是否能播放指定的音频或视频类型,返回值为下列之一:

'probable':浏览器最可能支持该类型'maybe':浏览器也许支持该类型'':浏览器不支持该类型
Copier après la connexion

//常用值video/oggvideo/mp4video/webmaudio/mpegaudio/oggaudio/mp4video/ogg;codecs="theora,vorbis"video/mp4;codecs="avc1.4D401E,mp4a.40.2"video/webm;codecs="vp8.0,vorbis"audio/ogg;codecs="vorbis"audio/mp4;codecs="mp4a.40.5"
Copier après la connexion

 
Copier après la connexion

(2)load()

  重新加载音频或视频元素,用于在更改src来源或其他设置后对音频或视频元素进行更新

 
Copier après la connexion

(3)play()

  开始播放音频或视频

(4)pause()

  暂停当前播放的音频或视频

Copier après la connexion

<演示框> 点击下列相应属性值可进行演示

属性

  [注意]所有属性中,只有videoWidth和videoHeight是立即可用的,在音视频的元数据加载后,其他属性才可用

<只读>

(1)buffered

buffered.length//获取已缓冲范围的数量buffered.start(index)//获取某个已缓冲范围的开始位置buffered.end(index)//获取某个已缓冲范围的结束位置buffered.end(0)//获取当前已缓冲的秒数
Copier après la connexion

Copier après la connexion

(2)currentSrc

  返回当前音频或视频的URL

Copier après la connexion

(3)ended

  返回音频或视频是否已结束

Copier après la connexion

(4)duration

  返回当前音频或视频的长度(以秒计),如果未设置则返回NaN

Copier après la connexion

(6)paused

  返回音频或视频是否已暂停

paused:true;(已暂停)paused:false;(未暂停)
Copier après la connexion

Copier après la connexion

(7)played

  已播范围是指音频或视频的时间范围。如果用户在音频或视频中跳跃,会获得多个播放范围

played.length(获得音频或视频已播放范围的数量)played.start(index)(获得某个已播范围的开始位置)played.end(index)(获得某个已播范围的结束位置)
Copier après la connexion

  [注意]首段已播范围的下标是0

Copier après la connexion

(8)readyState

  返回音频或视频的当前就绪状态

readyState:0(没有关于音频或视频是否就绪的信息)readyState:1(关于音频或视频就绪的元数据)readyState:2(关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧)readyState:3(当前及至少下一帧的数据是可用的)readyState:4(可用数据足以开始播放)
Copier après la connexion

Copier après la connexion

(9)seekable

  返回可寻址范围,可寻址范围是指用户在视频或音频中可寻址(移动播放位置)的时间范围。对于流视频,通常可以寻址到视频中的任何位置,即使其尚未完成缓冲

seekable.length(获得音频或视频中可寻址范围的数量)seekable.start(index)(获得可寻址范围的开始位置)seekable.end(index)(获得可寻址范围的结束位置)
Copier après la connexion

Copier après la connexion

(10)seeking

seeking:true(用户正在寻址)seeking:false(用户没有在寻址)
Copier après la connexion

Copier après la connexion

<可读写>

(1)autoplay

autoplay:false(默认,不自动播放)autoplay:true(自动播放)
Copier après la connexion

(2)controls

controls:false(默认,不显示控件)controls:true(显示控件)
Copier après la connexion

(3)crossOrigin

  设置或返回CORS设置

(4)currentTime

  设置或返回音频或视频的当前位置(以秒计)

Copier après la connexion

(5)defaultMuted(只有chrome支持)

defaultMuted:true(初始静音)defaultMuted:false(默认,初始不静音)
Copier après la connexion

audio.defaultMuted = true;
Copier après la connexion

(6)muted

muted:true(静音)muted:false(不静音)
Copier après la connexion

Copier après la connexion

(7)defaultPlaybackRate

defaultPlaybackRate:1(正常速度)defaultPlaybackRate:0.5(半速)defaultPlaybackRate:2(倍速)defaultPlaybackRate:-1(向后正常速度)defaultPlaybackRate:-0.5(向后半速)
Copier après la connexion

var audio = document.getElementById('audio');setTimeout(function(){ audio.defaultPlaybackRate = 0.5; audio.load(); },1000);
Copier après la connexion

(8)playbackRate

playbackRate:1(正常速度)playbackRate:0.5(半速)playbackRate:2(倍速)playbackRate:-1(向后正常速度)playbackRate:-0.5(向后半速)
Copier après la connexion

Copier après la connexion

(12)volume

  设置或返回音频或视频的当前音量

volume(取得为0-1,0为静音,1为最大,默认为1)
Copier après la connexion

Copier après la connexion

事件

  当音频或视频正在加载过程中,会依次发生以下事件:

loadstart:提示浏览器开始寻找指定的音频或视频progress:提示浏览器正在下载指定的音频或视频durationchange:提示音频或视频的时长已改变loadedmetadata:提示音频或视频的元数据已加载loadeddata:提示音频或视频的当前帧已加载,但没有足够数据播放下一帧canplay:提示浏览器能够开始播放指定的音频或视频canplaythrough:提示音频或视频能够不停顿地一直播放progress:提示浏览器正在下载指定的音频或视频
Copier après la connexion

Copier après la connexion

  影响音频或视频数据加载的事件有以下几个:

abort:在音频或视频终止加载时触发error:在音频或视频加载发生错误时触发stalled:在浏览器尝试获取媒体数据,但数据不可用时触发suspend:在音频或视频数据被阻止加载时触发(可以是完成加载后触发,或者因为被暂停)
empted:在发生故障并且文件突然不可用时触发
Copier après la connexion

Copier après la connexion

  音频或视频控制按钮发生改变时触发以下事件:

play:音频或视频文件已经就绪可以开始播放时触发playing:音频或视频已开始播放时触发ended:音频或视频文件播放完毕后触发pause:音频或视频文件暂停时触发ratechange:播放速度改变进触发seeked:指示定位已结束时触发seeking:正在进行指示定位时触发timeupdate:播放位置改变时触发[注意:播放和调整指示定位时都会触发]volumechange:音量改变时触发waiting:需要缓冲下一帧而停止时触发
Copier après la connexion

Copier après la connexion

audio专有

var audio = new Audio('test.mp3');
Copier après la connexion

Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!