[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>
上一篇:HTML5学习笔记----html5与传统html区别


下一篇:分布式算法系列——一致性Hash算法