HTML5音视频标签（video/audio）讲解

小雨敲窗y

因为音视频用法相同，这里仅以视频作为演示
格式

• 视频：mp4、ogv、webm
  
• 音频：mp3、ogg、wav
  

一、 优势
1 关于视频不用插件播放，点击就能看
2 跨平台、好升级、好维护，开发成本相对原生APP低很多
3 对移动的良好支持，支持手势，本地存储和视频续播等，通过H5就可以把自己的网站移动化。
4 更为简洁的代码，更好的交互
5 支持游戏开发
二、 兼容性
您的浏览器不支持 HTML5 video 标签。 注释：
　　 与 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
　　即，如果，浏览器不支持，则会显示" 您的浏览器不支持 HTML5 video 标签。 "。
三、 两种方式

1.         // 方式一            // 方式二                  

复制代码

注释：
　　 元素元素提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
四、video标签的新增属性
1、controls：给视频添加播放控件。如：开始。暂停
2、autoplay：视频就绪后马上播放
3、loop：表示循环播放
4、muted：表示视屏静音输出
五、 用于操作DOM的方法和属性
5.1用于操作DOM的方法
1、play():表示视频播放
2、pause():表示视频暂停
5.2用于操作DOM的属性
1、paused：设置或返回音视频是否被暂停
2、autoplay：设置或返回音视频加载完之后是否立即播放
3、controls：设置或返回音视频是否添加控件
4、duration：获取音视频的总时间，单位：秒
5、currentTime：获取当前播放时间
6、defaultMuted：设置音视频是否静音输出 true – 静音 默认false，不静音
7、muted：设置或返回当前播放音视频是否是静音输出。true – 静音 false — 不是静音
8、playbackRate：设置音视频播放速度。1.0表示正常；0.5表示半速；2.0表示倍速
9、loop：设置是否循环播放。true – 循环播放 false – 不循环播放
10、volume：设置或返回音视频的音量。介于1~0之间的数
11、ended：返回音视频是否播放结束。false – 未结束 true – 已结束
六、 实例
6.1演示代码

1.                                         video{                width: 600px;                height:500px;            }                                                              您的浏览器不支持 HTML5 video 标签。                        
2.         点击播放/暂停        点击获取总时间         点击获取当前时间         点击静音         点击获取音量         是否播放结束         

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！