html5音频使用

第四节：音频视频(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

音频结束的时候重新开始播放