一、发展历：
早期：<embed>+<object>+文件
 　　问题：不是所有浏览器都支持，而且embed不是标准。
 
现状：Realplay、window media、Quick Time 、Flash
　　问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。
 
HTML5认为浏览器应该原生支持音视频，因为他们现在也是web中的一等公民了！
 
 
二、视频格式的简单介绍

 
1、常见的视频格式
 
视频的组成部分：画面、音频、编码格式
视频编码：H.264、Theora、VP8(google开源)
 
常见的音频格式
音频编码：ACC、MP3、Vorbis
 
2、HTML5支持的格式

HTML5能在完全脱离插件的情况下播放音视频但是不是所有格式都支持。HTML5支持的视频格式：
　　Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件      支持的浏览器:F、C、O   
 
　　MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件    支持的浏览器: S、C　　　　
 
　　WebM=带有VP8视频编码+Vorbis音频编码的WebM格式      支持的浏览器: I、F、C、O
 
 
 
三、<Video>
1.标签的使用：
<video src="文件地址" controls="controls"></video>

IE9以上才支持HTML5，对于不支持的浏览器应该有友好的提示：

<video src="文件地址" controls="controls">

        您的浏览器暂不支持video标签。播放视频

</ video >

再优化：让video标签载入多种不同的音频格式，让浏览器选择他支持的格式，第一个找到了播放第一条，没找到找第二天，以此类推，最后还没找到给出提示不支持

    <video  controls="controls"  width="600">

        <source src="movie.ogg" type="video/ogg" >

        <source src="move.mp4" type="video/mp4" >

        您的浏览器暂不支持video标签。播放视频

    </ video >

2.Video标签的常见属性
<video src="movie.ogg" controls="controls" Loop="Loop" poster="PLMM.jpg" id="video">

            您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。

</video>

3.Video的API方法

 
 
4.Video的API属性
<body>

    <video src="movie.webm" controls="controls" id="video">

            您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。

    </video>

    <br />

    <button onClick="bofang()">播放</button>

    <button onClick="zanting()">暂停</button>

     <button onClick="kuaijin()">快进</button>

     <button onClick="kuaitui()">快退</button>

     <button onClick="jingyin(this)">静音</button>

     <button onClick="jiansu()">减速</button>

     <button onClick="jiasu()">加速</button>

     <button onClick="normal()">正常播放</button>

      <button onClick="up()">增大音量</button>

       <button onClick="down()">减小音量</button>

    <script>

        //获取对应的video标签

        var video = document.getElementById('video');

        //播放方法

        function bofang(){

            video.play();

        }

        //暂停方法

        function zanting(){

            video.pause();

        }

        //快进按钮

        function kuaijin(){

            video.currentTime+=10;//currentTime该属性是获取当前播放的时间，加加上10就快进10秒

        }

        //快退

        function kuaitui(){

            video.currentTime-=10;

        }

        //静音

        function jingyin(obj){

            if(video.muted){

                obj.innerHTML='静音';

                video.muted=false;

            }else{

                obj.innerHTML='关闭静音';

                video.muted=true;

            }

        }

        //加速播放(快3倍) //要想慢3倍，应该是3分之1，因为当前是1

        function jiansu(){

            video.playbackRate = 1/3;

        }

        //减速播放(慢3倍)

        function jiasu(){

            video.playbackRate=3;

        }

        //正常播放

        function normal(){

            video.playbackRate=1;

        }

        //调大音量,音量值的范围是0到1

        function up(){

            video.volume+=0.2;

        }

        //调小声音

        function down(){

            video.volume-=0.2;

        }

    </script>

</body>

</html>
5.Video的常用事件
 
 
 
 
 
四、HTML5支持的音频格式
HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的

HTML5支持的音频格式：
　　Ogg    免费 支持的浏览器:C、F、O
　　MP3    收费 支持的浏览器: I、C、S
　　Wav    收费 支持的浏览器: F、O、S
 
 
 
五、<audio>
1.标签的使用
<audio  src="文件地址" controls="controls"></audio>
IE9以上才支持HTML5，对于不支持的浏览器应该有友好的提示：
<audio src="文件地址" controls="controls">

    您的浏览器暂不支持audio标签。播放视频

</ audio >

再优化：让video标签载入多种不同的音频格式，让浏览器选择他支持的格式，第一个找到了播放第一条，没找到找第二天，以此类推，最后还没找到给出提示不支持

< audio controls="controls"  >

    <source src="happy.MP3" type="video/mp3" >

    <source src="happy.ogg" type="video/ogg" >

    您的浏览器暂不支持audio标签。播放视频

</ audio>
 
audio的常见属性
该标签除了一些属性不同外，其他API方法都是一样

HTML5音/视频标签详解的更多相关文章

  1. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

  2. Html5语义化标签详解及其兼容性处理

    <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...

  3. html常用标签详解

    html常用标签详解 一.总结 一句话总结: 这些资料没必要自己总结,可以直接网上找,简单方便,再根据需求改一下 二.HTML常用标签详解 转自或参考:HTML常用标签详解https://blog.c ...

  4. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  5. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

  6. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集

    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...

  7. HTML5_音视频标签 <audio> 和 <video>

    HTML5_音视频标签 <audio> 和 <video> audio 和 video 都是 inline行内元素 如果浏览器支持,则不显示标签文本 IE8 不支持 audio ...

  8. embed标签详解

    HTML-embed标签详解 Embed(一).基本语法:embed src=url说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,      Net ...

  9. 【转载】html中object标签详解

    [转载自http://blog.csdn.net/soliy/archive/2010/03/22/5404183.aspx] html标签之Object标签详解 作者:网络    出处:网络     ...

随机推荐

  1. 浅析Java源码之Math.random()

    从零自学java消遣一下,看书有点脑阔疼,不如看看源码!(๑╹◡╹)ﾉ""" ​ JS中Math调用的都是本地方法,底层全是用C++写的,所以完全无法观察实现过程,Jav ...

  2. [转]webpack4.0.1安装问题和webpack.config.js的配置变化

    本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...

  3. $.each()和$(selector).each()

    转载:http://www.jb51.net/article/65215.htm $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的 ...

  4. eclipse设置成保护眼的背景色

    长时间的使用eclipse开发会很累吧  设置一个保护眼睛的豆沙绿色 不刺眼 是不是会更好一些呢 那么如何设置呢现在就教大家   工具/原料 eclipse jdk 方法/步骤 首先打开eclipse ...

  5. 【ZeroMQ】2、高性能的通讯库-zeroMQ

    首先,让我来介绍一下什么是ZMQ(全称:ZeroMQ): 官方: “ZMQ(以下ZeroMQ简称ZMQ)是一个简单好用的传输层,像框架一样的一个socket library,他使得Socket编程更加 ...

  6. python学习之老男孩python全栈第九期_day004作业

    看代码写结果:1. a=[1,2,3,6,"dfs",100]s=a[-1:]print (s) 结果:[100] 2. s=a[-1:0:-1]print(s) 结果:[100, ...

  7. js-ES6学习笔记-变量的解构赋值

    1.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 2.ES6允许写成:let [a,b,c] = [1,2,3];上面代码表示,可以从数 ...

  8. CentOS7查看开放端口命令及开放端口号

    CentOS 7查看以开放端口命令:firewall-cmd —list-ports 查看端口是否开放命令:第一个方法就是使用lsof -i:端口号命令行,例如lsof -i:80.如果没有任何信息输 ...

  9. KOTLIN-1(常用网址)

    ---恢复内容开始--- 1.官网:http://kotlinlang.org/ 2.官方文档:https://kotlinlang.org/docs/reference 3.kotlin源码:htt ...

  10. React之小知识点总结

    总结react中常常被忽略的小知识点 1)即使state里设置成和之前的值一样,render也会重新渲染 2)父组件传给子组件的属性(props是只读的,在子组件中已在this.state里将属性赋值 ...