HTML5 最大的新特色之一就是支持音频和视频。在 HTML5 之前,我们必须使用插件如 Silverlight 或 Flash 来实现这些功能。在 HTML5 中,可以直接使用新标签< audio> 和 < video>将音频和视频嵌入到页面。
1、音频播放
Audio(音频),html5提供了播放音频文件的标准
control(控制器),龚添加播放、暂停和音量控件
标签:<audio> 定义声音;<source>,定义多媒体资源,可以是多个
<body> <!--使用浏览器自带播放控件--> <audio src="catelog/1.mp3" controls="controls"></audio> <!--自定义播放控件--> <button onclick="clickA()">播放/暂停</button> <audio id = "audio" src="catelog/1.mp3"></audio> <script> var state = document.getElementById("audio"); function clickA() { if (state.paused) { state.play(); }else{ state.pause(); } } </script> </body>
2、编解码工具
不同的浏览器支持的视频格式不同,chrome支持mp4格式,而safari支持ogg格式,因此需要有编解码工具来进行转码。
FFmpeg:www.ffmpeg.org 使用得非常广泛的一款工具,大部分编解码工具是使用它做内核
关于该工具的介绍,可以参考简书上一个作者的文章:http://www.jianshu.com/p/7ed3be01228b
我下载的是windows的Static版本,主要的操作有,进入到ffmpeg.exe所在目录,执行以下命令,即可完成1.mp4向1.ogg的转码:
ffmpeg -i 1.mp4 1.ogg
进入到ffplay.exe所在目录,执行以下命令,即可完成1.ogg的播放:
ffplay 1.ogg
3、视频播放
Video(视频):html5提供了展示视频的标准
control(控制器):control属性提供添加播放、暂停和音量控件
标签:<video>定义声音 <source>规定多媒体资源,可以是多个
属性:width 宽 height 高
<body> <video src="1.mp4" controls="controls"></video> <!--让浏览器全部兼容,则把所有格式的文件都放入--> <video controls="controls"> <source src="1.mp4"> <source src="1.ogg"> </video> <!--自定义播放器--> <button onclick="clickV()">播放/暂停</button> <button onclick="clickBig()">放大</button> <button onclick="clickSmall()">缩小</button> <video id="video" width="500px" height="300px"> <source src="1.mp4"> <source src="1.ogg"> </video> <script> var v = document.getElementById("video"); function clickV() { if (v.paused) { v.play(); }else{ v.pause(); } } function clickBig(){ v.width = 800; v.height = 800; } function clickSmall(){ v.width = 300; v.height = 100; } </script> </body>