HTML5的音频播放和视频播放

1.音频播放

audio(音频)

html5提供了播放音频文件的标准

 

<audio src="anli.mp3" controls="controls">您的浏览器不支持</audio>

自定义控件

 

<button onclick="clickA()">播放/暂停</button>

<audio src="anli.mp3" id="audio">您的浏览器不支持</audio>

<script>

    var a=document.getElementById("audio");

    function clickA(){

        if(a.paused){

            a.play();

        }else{

            a.pause();

        }

    }

</script>

cotrol(控制器)

control属性提供添加播放、暂停和音量控件

标签

<audio>     定义声音

<source>     规定多媒体资源，可以是多个

2.编解码工具

针对不同浏览器支持的多媒体播放格式，我们需要编解码工具对多媒体格式进行转换。

FFmpeg（一款免费开源的编解码工具）

网址：www.ffmpeg.org

 

3.视频播放

video(视频)  ：  HTML5提供了展示视频的标准

control(控制器)  ：  control 属性提供添加播放、暂停和音量控件

标签 ：  <video> 定义声音    <source> 规定多媒体资源，可以是多个

属性 ： width : 宽    height : 高

 

<video src="anli.mp4" controls="controls">您的浏览器不支持</video>

火狐浏览器不支持mp4格式，支持ogg格式

<video controls="controls">

     <source src="anli.mp4">

     <source src="anli.ogg">

     您的浏览器不支持

</video>

 

自定义

 

<button onclick="clickV()">播放/暂停</button>

<button onclick="clickBig()">放大</button>

<button onclick="clickSmall()">缩小</button>

<br/>

<video id="video" width="500" height="400">

     <source src="anli.mp4">

     <source src="anli.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 = 300;

     }

</script>