HTML5音/视频标签详解

一、发展历：

早期：<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 >

< audio controls="controls"  >

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

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

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

</ audio>

audio的常见属性

该标签除了一些属性不同外，其他API方法都是一样

秒客网

HTML5音/视频标签详解

相关文章