[html5] 学习笔记-html5音频视频

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>