第四节:音频视频(ie 9以上,或者猎豹 ,火狐浏览器)
1、常见的视频格式
视频的组成部分:画面、音频、编码格式
视频编码:H.264、Theora、(收费)VP8(google开源)
常见的音频格式
视频编码:ACC、MP3、Vorbis
2. <videosrc=”视屏名称” controls="controls"></video>>
3. 多资源视频播放
<video controls="controls"width="500" height="500"
autoplay="autoplay"loop="loop" poster="PLMM.jpg">
<source src="movie.webm"type="video/webm "/>
<source src="movie.ogg"type="video/ogg "/>
您的浏览器不支持视频标签,赶快升级吧
</video>
4.video的AP方法
方法 | 属性 | 事件 |
play() 播放 | currentSrc | play |
pause() 暂停 | currentTime | pause |
load() 加载 | videoWidth | progress |
canPlayType | videoHeight | error |
5.video API属性
(1)autoplay =”auto play”:自动播放
(2) controls:控制面板是否显示
(3) Loop:循环播放
(4)poster:对视频图像一个解释,比如一个视频网站加载等待的画面图片
(5)currentTime:当前播放的时间,单位秒(区别大小写)
快进10秒的方法:function kuaijin(){
Video.currentTime+=10;
}
(6)//快速
function soso(){
video.playbackRate=3;
}
//慢速播放(慢三倍)
function yu(){
video.playbackRate=1/3; }
(7)调高音量 volume+=0.2
调低音量 volume-=0.2
6.创建一个功能按钮
(1)先建立一个控制面板,以按钮形式。以下是一个功能的组合。
<videosrc="movie.webm" controls="controls"id="video"> </video>
(2)<buttononclick =”bofang()”>播放</button>
(3)//获取对应的video标签
varvideo=document.getElementById('video');
括号里面的是id值
(4)//播放方法
Function bofang(){
Video.play();
}
7.音频标签的使用
<audio src=”xxxx.mp3” controls=”controls”></audio>
HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
音频使用和视频使用的方法是一样的。
8.audio的常用属性
属性 | 值 | 表示意义 |
Autoplay | Autoplay | 表示音频自动播放 |
Preload | Preload | 表示音频在页面加载的时进行加载
|
Control | Control | 表示音频结束时重现开始
|
Src | URL | 要播放的音频的Url |
LOOP | Loop | 音频结束的时候重新开始播放 |