video-audio
HTML5新特性——视频播放
HTML5提供了一个新的标签<video>标签,用于播放视频。该标签默认是一个300*150的inline-block。使用方法:
<video src="x.mp4"></video>
<video>
<source src="x.mp4">
<source src="x.ogg">
<source src="x.webm">
</video>
VIDEO元素/对象的属性:
(1)src:指定要播放的视频的资源路径
(2)autoplay:false,是否自动播放
(3)controls:false,是否显示播放控件,提示:不同浏览器的播放控件外观不同
(4)currentTime:0,当前播放的时间点(s)
(5)duration:60,影片总时长(s)
(6)ended:false,是否播放到结尾
(7)loop:false,是否循环播放
(8)muted:false,是否静音
(9)volume:1,音量设置(0~1),对象属性,不用于标签
(10)paused:当前是否处于暂停状态
(11)poster:'',指定视频第一帧播放前的电影海报
(12)preload:指定视频预加载方案,可取值:
auto:默认值,自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长
metadata:元数据,只预加载视频的宽高、时长、第一帧内容
none:不预加载任何内容
VIDEO对象的方法:
play():开始播放
pause():暂停播放
VIDEO对象的事件:
onplay:视频开始播放(可能多种原因引起)
onpause:视频开始暂停(可能多种原因引起)
onplaying:
HTML5新特性——音频播放
HTML5提供了一个新的标签<audio>标签,用于播放音频。该标签若没有controls属性,则默认display:none;反之则是一个300*30的inline-block。使用方法:
<audio src="x.mp3"></audio>
<audio>
<source src="x.mp3">
<source src="x.ogg">
<source src="x.wav">
</audio>
AUDIO元素/对象的属性:
(1)src:指定要播放的视频的资源路径
(2)autoplay:false,是否自动播放
(3)controls:false,是否显示播放控件,提示:不同浏览器的播放控件外观不同
(4)currentTime:0,当前播放的时间点(s)
(5)duration:60,影片总时长(s)
(6)ended:false,是否播放到结尾
(7)loop:false,是否循环播放
(8)muted:false,是否静音
(9)volume:1,音量设置(0~1),对象属性,不用于标签
(10)paused:当前是否处于暂停状态
(12)preload:指定视频预加载方案,可取值:
auto:默认值,自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长
metadata:元数据,只预加载视频的宽高、时长、第一帧内容
none:不预加载任何内容
AUDIO对象的方法:
play():开始播放
pause():暂停播放
AUDIO对象的事件:
onplay:视频开始播放(可能多种原因引起)
onpause:视频开始暂停(可能多种原因引起)
onplaying: