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音频视频的更多相关文章

  1. HTML5学习笔记----html5与传统html区别

    一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变. HTML5中 ...

  2. [html5] 学习笔记-html5增强的页面元素

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  5. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML5学习笔记 音频

    HTML5提供了播放音频的标准. Web上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件比如flash来播放的.然而,并非所有的浏览器都拥有同样的插件. hmt ...

  7. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  8. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  9. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

随机推荐

  1. ckeditor_3.6.6.2+CKFinder2.0.2配置

    一.首先工具的下载,找到相应的版本进行下载     ckeditor_3.6.6.2+CKFinder2.0.2 http://ckeditor.com/download      打开war文件,然 ...

  2. STM32-NVIC中断管理实现[直接操作寄存器]

    源:stm32 NVIC中断管理实现[直接操作寄存器]     cortex-m3支持256个中端,其中包含了16个内核中断,240个外部中断.stm32只有84个中断,包括16个内核中断和68个可屏 ...

  3. C语言实现求字符串子集问题

    这个问题在于实现Apriori算法的时候需要求各个频繁集的关联规则,而这时需要在求得最大的频繁集中求各个频繁集的真子集.然后在实现这一步的时候被卡主了,第一反应是用递归完成,但是面对数据挖掘中庞大的项 ...

  4. Docker 命令（二）

    Docker 入门 启动docker systemctl start docker 帮助命令 docker --help docker [Commands] --help   例:docker run ...

  5. div无法跟随内容的增加而拉伸

    有时将 div 的 height 设置为 auto 后,仍然无法让 div 自动拉伸,发现是 display:block 的原因,将其设置为 inline-block 即可.

  6. EQueue - 一个C#写的开源分布式消息队列的总体介绍（转）

    源: EQueue - 一个C#写的开源分布式消息队列的总体介绍 EQueue - 一个纯C#写的分布式消息队列介绍2 EQueue - 详细谈一下消息持久化以及消息堆积的设计

  7. instancetype 和 id 的区别

    原文:http://blog.csdn.net/sirodeng/article/details/50516478 一.什么是instancetype instancetype是clang 3.5开始 ...

  8. Nginx 在configure时的参数

    Nginx 使用 Unix 下常用的 './configure && make && make install' 过程来编译安装. configure 脚本确定系统所具 ...

  9. js中的 substring和substr方法

    原文: http://www.cnblogs.com/chinafine/archive/2009/02/26/1398771.html 1.substring 方法 定义和用法 substring ...

  10. 只要单片机具有真正唯一ID,就可以让加密坚不可摧（转）

    源:只要单片机具有真正唯一ID,就可以让加密坚不可摧 http://www.amobbs.com/thread-5518980-1-1.html 第一环:ID-->F1(ID) -----> ...