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. (简单) UVA 11624 Fire! ，BFS。

    Description Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the ow ...

  2. 比较实用的webpack配置代码

    var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract ...

  3. codeforces #304 DIV2

    先送上一篇题解(虽然全英文的):http://codeforces.com/blog/entry/18034 A题:http://codeforces.com/problemset/problem/5 ...

  4. 4、安卓数据存储——sqlite

    朋友圈里的每一个消息体里面的数据,当下拉刷新从服务器下载数据包后,存入sqlite:用户名.图片url.点赞.评论等等.上拉加载的时候,从数据库里取出最近的5条数据加载到朋友圈上. Android通过 ...

  5. spring security 跨域防伪攻击

    applicationContext-security.xml中配置 <http use-expressions="true" disable-url-rewriting=& ...

  6. IOS 利用图片设置背景

    UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.view.bounds]; imageView.image = [UI ...

  7. Apache自带压力测试工具ab用法简介

    ab命令原理 ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL进行访问.它的测试目标是基于URL的,因此,既可以用来测试Apache的负载压力,也可以测试nginx.lighthttp ...

  8. HDU1217:Arbitrage(SPFA)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1217 题目大意 在每种钱币间进行各种交换,最后换回自己如果能赚,那么就Yes,否则No 注意应为有负权 ...

  9. Struts1、WebWork、Struts2介绍

    一.Struts1 1.Struts1原理简介 Struts1框架以ActionServlet作为控制器核心,整个应用由客户端请求驱动.当客户端向Web应用发送请求时,请求被Struts1的核心控制器 ...

  10. java 错误 classes路径配置错误

    1. 错误显示页 2. 解决步骤 2.1. 查看 root cause 信息 org.springframework.beans.factory.BeanCreationException: Erro ...