最新HTML5中的视频和音频讲解

本文主要是介绍最新HTML5中的视频和音频讲解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

第6章 HTML5中的视频和音频

H5新增video,audio,播放视频和音频，统称为多媒体元素。

6.1 多媒体元素基本属性

video用于电影文件和其他视频流的播放。

audio用于音乐文件和其他音频流的播放。

video的属性

src：文件路径，本地或者网络上。
autoplay：自动播放，一进页面就自动播放。
width和height：媒体元素大小，单位像素，若不设置则播放源文件大小，只设置1个值会等比例控制视频大小。
controls:设置为true时，视频底部有控制条工具，包括播放/暂停，进度条，音量开关大小和速度等功能。
poster：所选图片的URL，添加后播放前显示当前图片而不是视频第一帧，视频不可用时遮盖空白，美观。
networkState：返回视频文件网络状态，当浏览器读取文件时，将触发progress事件，获取不同各阶段的网络状态值，本属性为只读属性。
- NETWORK_EMPTY，返回值 0，数据加载初始化
- NETWORK_IDLE，返回值 1，文件加载成功，等待请求播放
- NETWORK_LOADING，返回值 2，文件正在加载过程中
- NETWORK_NO_SOURCE，返回值 3，加载出错，一般原因是没有找到支持的编码格式

audio的属性

src：文件路径，本地或者网络上。
autoplay：设置为true时，可以直接写属性也是一样的，自动播放，一进页面就自动播放。
controls:设置为true时，会出现控制组件，包括进度条，声音大小，静音，播放速度等功能。

1.功能描述

创建video和audio,并在元素的src属性中设置播放的视频和音频，页面加载后自动播放。

需提前准备视频和音频各一个。

2.代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用多媒体元素播放文件</title><script>function $$(id) {return document.getElementById(id);}function progress(e) {var intState = e.networkState;var strState = strByNum(intState);var newLi = document.createElement('li');newLi.textContent = strState;$$("ulVideo").appendChild(newLi)}/* - NETWORK_EMPTY，返回值 0，数据加载初始化- NETWORK_IDLE，返回值 1，文件加载成功，等待请求播放- NETWORK_LOADING，返回值 2，文件正在加载过程中- NETWORK_NO_SOURCE，返回值 3，加载出错，一般原因是没有找到支持的编码格式*/function strByNum(n) {switch (n) {case 0: return "数据加载初始化!";case 1: return "文件加载成功，等待请求播放!";case 2: return "文件正在加载过程中...";case 3: return "加载出错，一般原因是没有找到支持的编码格式!";}}function vdoerror(e) {var intState = e.error.code;var strState = strByErrorNum(intState);var newLi = document.createElement('li');newLi.textContent = strState;$$("ulError").appendChild(newLi)}/* - MEDIA_ERR_ABORTED，返回值 1，被中止- MEDIA_ERR_NETWORK，返回值 2，出现网络错误，获取资源出错- MEDIA_ERR_DECODE，返回值 3，媒体资源可用，解码出错- MEDIA_ERR_SRC_NOT_SUPPORTED，返回值 4，没找到可以播放的媒体文件格式*/function strByErrorNum(n) {switch (n) {case 1: return "被中止!";case 2: return "出现网络错误，获取资源出错!";case 3: return "返回值 3，媒体资源可用，解码出错!";case 4: return "没找到可以播放的媒体文件格式!";}}</script>
</head><body><!--./static/黑悟空.mp4 --><video id="vdo" src="./static/黑悟空.mp4" autoplay="true" poster="./img/moon.jpg" onprogress="progress(this)"onerror="vdoerror(this)" controls width="800px">您的浏览器不支持视频</video><ul id="ulVideo"><li>progress事件：</li></ul><ul id="ulError"><li>error事件：</li></ul><audio id="ado" src="./static/黄风起兮.mp3" controls="true"></audio>
</body></html>