HTML5新特性——播放器 Audio

随着HTML5的不断更新，HTML5是可以直接利用代码播放视频，而本地播放器都是安装过flash第三方插件才能播放。Html5的功能不断的一一实现，更见的便捷应用广泛，是完全不能怠慢的一个知识，尤其是IT行业人才，以往的视频播放，需要借助Flash插件才可以实现，但FLash插件的不稳定性经常让浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它取而代之的就是HTML5的video元素。

属性名称 说明
src  视频资源的 URL
width 视频宽度
height 视频高度
autoplay 设置后，表示立刻开始播放视频
preload 设置后，表示预先载入视频
controls 设置后，表示显示播放控件
loop 设置后，表示反复播放视频
muted 设置后，表示视频处于静音状态
poster 指定视频数据载入时显示的图片

视频容器：音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其
他一些元数据。主流视频容器支持的格式为：.avi、.flv、mp4、.mkv、.ogg、.webm.

1.嵌入一个 WebM 视频

解释：

2.附加一些属性

解释：autoplay 表示自动开始播放；controls 表示显示播放控件；loop 表示循环播放；muted 表示静音。

3.预加载设置

解释：preload 属性有三个值：none 表示播放器什么都不加载；metadata 表示播放
之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。

4.使用预览图

解释：poster 属性表示在视频的第一帧，做一张预览图。
5.兼容多个浏览器

解释：通过元素引入多种格式的视频，让更多的浏览器保持兼容。

浏览器支持：

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持

注释：Internet Explorer 8 以及更早的版本不支持

示例：

<video width="500" height="300" loop="loop" controls="controls"  poster="img1/bj3.jpg" src="madia/林俊杰_-_修炼爱情_-_2013_Hito流行音乐奖颁奖典礼.webm">video>

　　　　　　　　希望本人的分享能对各位有所帮助，也希望大牛们能指导下我！

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2016-07-17

转载于:https://www.cnblogs.com/jiadong/p/5676018.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！