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. 屌爆了的两个在线编辑网站runjs和jsbin

    作者:zccst HTML5+css3做的小游戏 http://timelineapp.pointstone.org/coreball/game.html 切图工具:http://kuaiqie.co ...

  2. html5绘图

    html5绘图 这是我在绘图过程中遇到的问题,求助高手帮忙啊... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  3. UVa11555 - Aspen Avenue

    今晚CF GYM A题,神坑.. 原题: Aspen Avenue ``Phew, that was the last one!'' exclaimed the garden helper Tim a ...

  4. Web开发中需要了解的东西

    在StackExchange上有人问了这样一个问题:What should every programmer know about web development?(关于Web开发,什么是所有程序员需 ...

  5. 转：css中overflow:hidden 不起作用了吗？

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  6. 【转载】Eclipse 断点调试

      作为开发人员,掌握开发环境下的调试技巧十分有必要.去年就想把关于Eclipse断点调试总结下了,由于对时间的掌控程度仍需极大提高,结果拖到今年才写了此篇博文.关于Java调试技术还有很多,如Jav ...

  7. 《OpenCV3 计算机视觉--Python语言实现 第二版》源代码及纠错

    1.源代码下载地址 <OpenCV3 计算机视觉--Python语言实现 第二版>由我们翻译,英文书名<Learning OpenCV3 Computer Vision with P ...

  8. leetcode--002 rpn

    package leetcode; import java.util.Stack; public class RPN { public static int evalRPN(String[] toke ...

  9. Eclipse发布Maven项目到远程服务器

    pom.xml中的配置依赖有两种: 一.tomcat-maven.plugin <plugin> <groupId>org.codehaus.mojo</groupId& ...

  10. c#第5章 变量的更多内容 隐式和显式转换、枚举、结构、数组、

    1.目标数据 destination 英[ˌdestɪˈneɪʃn] 美[ˌdɛstəˈneʃən] n. 目的,目标; 目的地,终点; [罕用语] 预定,指定; 2.源数据 source 英[sɔ: ...