在使用html5 的audio,video播放语音，视频的一些总结心得

A.Audio标签播放音乐

　　使用audio播放音乐时，因为提供有调用的函数play(),pause()等函数，直接进行封装就好，我使用了定时器来控制语音的时间。直接上代码：

　　1.下面是html代码：

<div class="yuyin">
    <a class="start" href="#" title="" alt="播放"></a>
    <a class="stop" href="#" title="" alt="暂停"></a>
    <!-- loop循环播放 preload="auto" -->
    <audio autoplay  id="audio1">
      <source src="./audio/music.mp3" type="audio/mpeg" />
      <source src="./audio/music.ogg" type="audio/ogg"/>
      您的浏览器不支持音频播放。
    </audio>
    <progress id="process_1" value="0" max="100"></progress>
    <p class="time">4.23</p>
</div>.

　　2.Js控制播放，这是定时器监听progress(图省事，没去用自定义process)

$(function(){
            //播放完毕
            $('#audio1').on('ended', function() {
                console.log("音频已播放完成");
                $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
            });
            //播放器控制
            var audio = document.getElementById('audio1');
            var times;
            // 设置音量30%
            audio.volume = .6;
            // $('.btn-audio').click(function() {
            //     event.stopPropagation();//防止冒泡
            //     if(audio.paused){ //如果当前是暂停状态
            //         $('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});
            //         audio.play(); //播放
            //         return;
            //     }else{//当前是播放状态
            //         $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
            //         audio.pause(); //暂停
            //     }
            // });

            // 当前是暂停状态，点击播放
            $('.start').click(function() {
                event.stopPropagation();//防止冒泡
                audio.play(); //播放
                // i播放进度  times总时间
                time_all=Math.ceil(audio.duration);
                var i = document.getElementById("process_1").value;
                progressListen(time_all,i);
                return;
            });

             // 当前是播放状态，点击暂停
            $('.stop').click(function() {
                event.stopPropagation();//防止冒泡
                audio.pause(); //暂停

            });

     


            // 在safri on ios里面已经明确指出等待用户的交互动作后才能播放media（解决自动播放）
            $('html').one('touchstart',function(){
                audio.play();
            });

            // 加载音频资源是异步的，还没加载完成的音频资源，duration会返回NaN
            $("#audio1").on("canplay",function(){
                times=Math.ceil(audio.duration);
                console.log(times);
                var m = Math.floor(times/60);
                var second = Math.ceil(times%60);

                $('.yuyin>.time').text(m+"."+second);
                progressListen(times,0);
            });

            function progressListen(time,jindu) {
                var process_1 = document.getElementById("process_1");
                var audio = document.getElementById('audio1');
                
                // 间隔时间促发
                var i=jindu;
                // 1.73秒转换为setInterval的秒数（*1000）
                var time_jiange = (time/100)*1000;
                console.log(time_jiange+"进度条事件触发");

                var timer = setInterval(function () {
                    // 每间隔总秒数/100 progress的value+1
                     i += 1;
                     process_1.value = i;

                    if(audio.paused){ //如果当前是暂停状态
                        i=process_1.value;
                        clearInterval(timer);
                    }
                     if (100 == i) {
                         clearInterval(timer);
                         console.log("进度条监听播放完毕");
                     }
                     console.log("当前进度i:"+i);
                    
                },time_jiange);
            }        
        })

上面我用了setInterval去控制，语音的开始与暂停的事件，让暂停时，时间也暂停，再次点击开始时从暂停的位置开始播放。当然也可以有其他的方法。由于我是用两个按钮控制语音的播放和暂停，完全可以用一个按钮控制，对视频的状态进行判断。来相应处理暂停播放等。

下面是audio标签的一些常用属性和事件方法：

常用的控制函数：

load()：加载音频、视频软件
play()：加载并播放音频、视频文件或重新播放暂停的的音频、视频
pause()：暂停出于播放状态的音频、视频文件
canPlayType(obj)：测试是否支持给定的Mini类型的文件
canplay() 当异步视频加载完毕时

只读的媒体属性：

duration获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
paused如果媒体文件被暂停，则返回true，否则返回false
ended如果媒体文件播放完毕，则返回true
startTime返回起始播放时间
error返回错误代码
currentSrc以字符串形式返回正在播放或已加载的文件

可脚本控制的属性值：

autoplay：自动播放已经加载的的媒体文件
loop为true：的时候则设定为自动播放
currentTime：以s为单位返回从开始播放到目前所花的时间
controls：显示或者隐藏用户控制界面
volume：音量值,从0.0至1.0之间
muted：设置是否静音
autobuffer：是否进行缓冲加载

B.video标签播放视频

　　html代码：

<video width="430" height="270" controls autobuffer>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
 </video>

　　在使用过程中，如果在本地可以播放，上传服务器之后，在确保获取的视频路径没错的情况下，如果不可以播放，可以参考下我上一篇博客，是否是mime类型的原因，当然原因可能有很多。具体问题具体分析。

<video>标签的属性

src ：视频的属性
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

还有具体的请参考此简书内容：http://www.jianshu.com/p/404d01b8e713/

兼容性的解决：

当然在使用的过程中可能会有兼容性问题参考张鑫旭大神的这篇文章：http://www.zhangxinxu.com/wordpress/2010/03/every-browser-support-html5-video/

使用方法：
总的来说要想让主流浏览器都支持HTML5标签，使用非常简单，只要链接一个js文件就可以了。所以，只要您的页面上（头部或底部）有这么段代码：

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>

就可以了。

html5media.min.js可自行搜索下载！

秒客网

在使用html5 的audio,video播放语音，视频的一些总结心得

B.video标签播放视频

相关文章