audio和video元素_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:31:37
Original
1350 Leute haben es durchsucht

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

前面的话

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

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

HTML元素

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

  为

media 规定媒体资源的类型(没有浏览器支持)src  规定媒体文件的URLtype 规定媒体资源的MIME类型
Nach dem Login kopieren

  常用类型

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

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

  使用

Nach dem Login kopieren

Nach dem Login kopieren

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

Nach dem Login kopieren

Nach dem Login kopieren

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

Nach dem Login kopieren

Nach dem Login kopieren

API

  HTML5 DOM为

方法

(1)canPlayType()

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

'probable':浏览器最可能支持该类型'maybe':浏览器也许支持该类型'':浏览器不支持该类型
Nach dem Login kopieren

//常用值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"
Nach dem Login kopieren

 
Nach dem Login kopieren

(2)load()

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

 
Nach dem Login kopieren

(3)play()

  开始播放音频或视频

(4)pause()

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

Nach dem Login kopieren

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

属性

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

<只读>

(1)buffered

buffered.length//获取已缓冲范围的数量buffered.start(index)//获取某个已缓冲范围的开始位置buffered.end(index)//获取某个已缓冲范围的结束位置buffered.end(0)//获取当前已缓冲的秒数
Nach dem Login kopieren

Nach dem Login kopieren

(2)currentSrc

  返回当前音频或视频的URL

Nach dem Login kopieren

(3)ended

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

Nach dem Login kopieren

(4)duration

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

Nach dem Login kopieren

(6)paused

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

paused:true;(已暂停)paused:false;(未暂停)
Nach dem Login kopieren

Nach dem Login kopieren

(7)played

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

played.length(获得音频或视频已播放范围的数量)played.start(index)(获得某个已播范围的开始位置)played.end(index)(获得某个已播范围的结束位置)
Nach dem Login kopieren

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

Nach dem Login kopieren

(8)readyState

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

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

Nach dem Login kopieren

(9)seekable

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

seekable.length(获得音频或视频中可寻址范围的数量)seekable.start(index)(获得可寻址范围的开始位置)seekable.end(index)(获得可寻址范围的结束位置)
Nach dem Login kopieren

Nach dem Login kopieren

(10)seeking

seeking:true(用户正在寻址)seeking:false(用户没有在寻址)
Nach dem Login kopieren

Nach dem Login kopieren

<可读写>

(1)autoplay

autoplay:false(默认,不自动播放)autoplay:true(自动播放)
Nach dem Login kopieren

(2)controls

controls:false(默认,不显示控件)controls:true(显示控件)
Nach dem Login kopieren

(3)crossOrigin

  设置或返回CORS设置

(4)currentTime

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

Nach dem Login kopieren

(5)defaultMuted(只有chrome支持)

defaultMuted:true(初始静音)defaultMuted:false(默认,初始不静音)
Nach dem Login kopieren

audio.defaultMuted = true;
Nach dem Login kopieren

(6)muted

muted:true(静音)muted:false(不静音)
Nach dem Login kopieren

Nach dem Login kopieren

(7)defaultPlaybackRate

defaultPlaybackRate:1(正常速度)defaultPlaybackRate:0.5(半速)defaultPlaybackRate:2(倍速)defaultPlaybackRate:-1(向后正常速度)defaultPlaybackRate:-0.5(向后半速)
Nach dem Login kopieren

var audio = document.getElementById('audio');setTimeout(function(){ audio.defaultPlaybackRate = 0.5; audio.load(); },1000);
Nach dem Login kopieren

(8)playbackRate

playbackRate:1(正常速度)playbackRate:0.5(半速)playbackRate:2(倍速)playbackRate:-1(向后正常速度)playbackRate:-0.5(向后半速)
Nach dem Login kopieren

Nach dem Login kopieren

(12)volume

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

volume(取得为0-1,0为静音,1为最大,默认为1)
Nach dem Login kopieren

Nach dem Login kopieren

事件

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

audio专有

var audio = new Audio('test.mp3');
Nach dem Login kopieren

Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!