audio 与 video

HTML5增加了audio（音频）和video（视频）两个标签，不用再像以前那样使用插件去播放音频和视频audio和video支持的属性和方法基本上一样

首先先来看一下audio标签格式

第一种格式

audio的标签

第一种

autoplay是自动播放的，controls是显示默认播放器界面，默认是看不见的

第二种格式

audio的标签第二种格式

第二种

source是导入标签，可以支持多种格式，MP3、ogg、MP4等等浏览器支持哪个就播放哪个

然后打开浏览器就会显示这样的界面

显示结果

自动播放：演员

简单的音频播放器就这样。

然后是audio

audio有很多属性先看一下audio的标签格式

里面的width和height只能在标签里设置，不能在style里去设置，css只能设置它的外边框等，不能更改播放器的大小。poster="source/1.jpg"这个是播放器刚进来时的背景图片

video的标签  第一种

video的标签

video的标签第二种

加poster

运行的时候，如果是Hbuilder的用户要去本地去运行（就是打开文件夹所在位置，在双击这个文件），这是Hbuilder的服务问题。

未添加poster

第一个效果，啥也没有

添加poster 的效果 刚进来时是一张图片

第二个效果，刚进来是一张图片

说说audio的属性

1、通过src属性可以设置视频播放源

src

src

点击btn1按钮切换视频源

2、autoplay  加载完毕是否立即播放

autopla controller

显示的结果

3、返回当前的url  和当前音频的长度

5、currentTime 设置或返回视频和音频中的当前播放位置(以秒计) video.currentTime = 30;30s处

6、volume  设置或返回音频和视频当前音量 0 ~1    video.volume = 0;  静音

7、muted  设置或返回音频和视频是否静音 video.muted = true;  静音 两个都可以设置静音，不尽相同

8、playbackRate  设置或返回当前播放音频和视频的播放速度  video.playbackRate = 4;

9、ended 返回视频和音频是否播放完毕  console.log(video.ended); true  或者  false.

10、loop 设置或返回视频和音频是否在播放结束后循环播放   video.loop = true ;和第一个autoplay  的功能相似，但不尽相同。

11、pause(只读) 返回音频和视频是否暂停  console.log(video.pause);  true或者false

就先写这些基本的功能，给大家分享两张张图片。

第一张 第二章

这里边load  play  pause  很重要  常用

浏览器不支持video的情况

flash