HTML5使用audio和video元素来嵌入音频和视频内容。可以让支持HTML5的浏览器不需要安装任何插件就可以播放视频和音频。
另外还提供了与这两个标签相关的 javascript api，这样就可以创建我们自己的音视频控件咯：
登录后复制
这两个标签，都必须包含 src 属性，即要加载的媒体文件地址。width 和 height 属性是指定视频播放器的大小。poster 属性是在加载视频期间会显示的图像。位于开始和结束标签之间的内容是后备内容，即当浏览器不支持这两个标签时会显示这些内容。 因为不是所有的浏览器都支持所有的媒体格式，所以可以指定不同的媒体来源。这时会用到 “ 标签：
登录后复制
支持这两个标签的浏览器有这些：IE9+、Firefox 3.5+、Safari 4+、Opera 10.5+、Chrome、iOS 版的 Safari 和 Android 版的 Webkit。
1 属性
audio 和 video 元素有这些共有的属性：
属性 数据类型 说明autoplay布尔值获取或设置 autoplay 标志。buffered时间范围已下载的缓冲的时间范围对象。bufferedBytes字节范围已下载的缓冲的字节范围对象。bufferingRate整数下载速率，每秒平均接收到的位数。bufferingThrottled布尔值是否对缓冲进行节流。controls布尔值获取或设置 controls 属性，控制浏览器内置控件的显示与隐藏。currentLoop整数媒体文件已循环的次数。currentSrc字符串当前播放的媒体文件的 URL。currentTime浮点数已经播放的秒数。defaultPlaybackRate浮点数获取或设置播放速度，默认为 1 秒。duration浮点数总播放时间，单位是秒。ended布尔值是否已播放结束。loop布尔值获取或设置【播放完成后是否再从头开始播放】。muted布尔值获取或设置【是否镜音】。networkState整数网络连接状态；0：空；1：正在加载；2：正在加载原数据；3：已经加载了第一帧；4：加载完成。paused布尔值是否暂停。playbackRate浮点数获取或设置【当前的播放速度】。played时间范围当前已经播放的时间。readyState整数是否已就绪。1：数据不可用；1：可以显示当前帧；2：可以开始播放；3：可以从头到尾播放。seekable时间范围可以搜索的时间范围。seeking布尔值播放器是否正移动到媒体文件的新位置。src字符串媒体文件的来源，可以在任何时候重写这个来源。start浮点数获取或设置【开始播放的位置】，单位是秒。totalBytes整数当前资源所需的总字节数。videoHeight整数视频的高度，只适用于 video。videoWidth整数视频的宽度，只适用于 video。volume浮点数获取或设置【当前音量】从 0.0 到 1.0。
2 事件
audio 和 video 元素有这些共有的事件：
立即学习“前端免费学习笔记（深入）”；
事件 说明abort下载中断。canplay可以播放；readyState 为 2。canplaythrough播放可以继续，即不会被中断；readyState 为 3。canshowcurrentframe当前帧已下载；readyState 为 1。dataunavailable没有数据导致不能播放；readyState 为 0。durationchange改变了 duration 的值。emptied网络连接关闭。empty发生错误导致下载停止。ended已播放到末尾，所以播放停止。error下载期发生网络错误。load已加载完成。可能会被废弃，建议使用 canplaythrough。loadeddata媒体的第一帧已加载。loadedmetadata媒体的元数据已加载。loadstart下载已开始。pause播放已被暂停。play媒体已接受到开始播放的指令。playing媒体已开始播放。progress正在下载。ratechange改变了播放速度。seeked搜索结束。stalled浏览器正尝试下载，但未接收到数据。timeupdatecurrentTime 被非法更新。volumechange改变了 volume 或 muted 值。waiting播放暂停，等待下载更多的数据。
之所以定义了这么多的事件，就是为了开发人员能够只使用少量的 HTML 和 JavaScript 就可以编写出自定义的音、视频播放器！
3 自定义媒体播放器
00
登录后复制
现在我们加一些 JavaScript ，就可以自定义一个简单的视频播放器：
//取得元素引用var player = document.getElementById("player"), btn = document.getElementById("video-btn"), curtime = document.getElementById("curtime"), duration = document.getElementById("duration");//实测，得不到整个视频的总体播放时间//更新播放时间duration.innerHTML = player.duration;//为按钮添加事件处理程序EventUtil.addHandler(btn, "click", function (event) { if (player.paused) { player.play(); btn.value = "Pause"; } else { player.pause(); btn.value = "Play"; }});//定时更新当前时间setInterval(function () { curtime.innerHTML = player.currentTime;}, 250);
登录后复制
可以进一步扩展这个视频播放器，让它可以使用更多的属性，监听更多的事件。同样的代码也可以用于 audio 元素。
4 检测编解码器的支持情况
audio 和 video 元素都有一个 canPlayType() 方法，它接收一个格式/编解码器的字符串，返回 “probably”、”maybe”、”“，所以这样这样使用：
if (audio.canPlayType("audio/mpeg")){ ... }
登录后复制
因为真正决定文件是否能够播放的是编码格式，所以建议同时传入 MIME 类型和编解码器，这样检测会更准确：
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){ ...}
登录后复制
注意，编解码器必须使用引号！下面列出已得到支持的音/视频格式和编解码器：
音频 字符串 支持的浏览器AACaudio/mp4; codecs=”mp4a.40.2”IE9+、Safari4+、iOS 版的 SafariMP3audio/mpegIE9+、ChromeVorbisaudio/ogg; codecs=”vorbis”Firefox 3.5+、Chrome、Opera 10.5+WAVaudio/wav; codecs=”1”Firefox 3.5+、Chrome、Opera 10.5+
视频 字符串 支持的浏览器H.264video/mp4; codecs=”avcl.42E01E, mp4a.40.2”IE9+、Safari4+、iOS 版的 Safari、Android 版 WebKitTheoravideo/ogg; codecs=”theora”Firefox 3.5+、Chrome、Opera 10.5+WebMvideo/webm; codecs=”vp8, vorbis”Firefox 4+、Chrome、Opera 10.6+
5 Audio 类型
audio 元素有一个原始的 JavaScript 构造函数 Audio，可以利用它来控制什么时候播放音频：
var audio = new Audio("xxx.mp3"); EventUtils.addHandler(audio, "canplaythrough", function(event){ audio.play(); });
登录后复制
上面的代码实现了这样的功能：当下载完成后自动播放音频。
在 iOS 中，调用 play() 会弹出一个对话框，得到用户许可后才可以播放。
如果想要在一个音频播放完之后在播放另一个音频，可以在 onfinish 事件中调用 play() 方法。
相关推荐：
分享一个简单的HTML5 视频嵌入实例代码
以上就是HTML5嵌入音频和视频的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3124259.html
