HTML5 Audio

<!DOCTYPE html>
<html>
<head>
    <title>Audio & Video</title>
    <link rel="stylesheet" type="text/css" href="../icons/cus-icons.css">
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            /*
                媒体类型和特征值
                在Ogg容器中的Theora视频和Vorbis音频:type='video/ogg; codecs="theora, vorbis"'
                在Ogg容器中的Vorbis音频:type='video/ogg; codecs=vorbis'
                在Matroska容器中的WebM视频:type='video/webm; codecs="vp8, vorbis"'
                在MP4容器中的simple baseline H.264视频和low complexity ACC视频:type='video/mp4; codecs="mp4v.20.8,mp4a.40.2"'
                在MP4容器中的MPEG-4简单视频和简单ACC音频:type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'
                   
                常用控制函数
                load:加载音频/视频文件,为播放做准备。通常情况下没有必要,除非是动态生成的元素。用来播放前预载
                play:加载(如果有必要)并播放音频/视频文件。除非音频/视频暂停在其他位置,否则重头开始开始播放
                pause:暂停处于播放状态的文件
                canPlayType(type):测试Video元素是否支持给定MIME类型的文件,返回值为非二进制的“null”、“maybe”或“propably”,最好的情况下返回propably
                只读的媒体特性
                duration:整个媒体文件的播放时长,以s为单位。如果无法获取,返回NaN
                paused:如果媒体文件当前被暂停,返回true,尚未播放时,也返回true
                ended:如果媒体文件已经播放完毕,返回true
                startTime:返回最早的播放时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
                error:在发生了错误的情况下返回的错误代码
                currentSrc:以字符串的形式返回当前正在播放或加载的文件
                可用脚本控制的特性值
                autoplay:将媒体文件设置为创建后自动播放,或者查询是否已经设置为自动播放
                loop:如果媒体文件播放完毕后能重新播放则返回true,或者将媒体文件设置为循环播放
                currentTime:以秒为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,
                    并定位到媒体文件的特定位置
                controls:显示或隐藏控制界面,或者查询用户控制界面当前是否可见
                volume:在0.0到1.0之间设置音频音量的相对值,或者查询当前音量相对值
                muted:为音频设置静音或者取消静音,查询当前是否为静音
                autobuffer:通知媒体播放器在媒体文件播放之前,是否进行缓冲加载。如果媒体
                    文件已经设置为autoplay,忽略此特性
                video元素额外的特性
                poster:在视频加载完成之前,代表视频内容的图片URL地址,可读可写
                width,height:读取或设置显示尺寸。可能会出现黑框
                videoWidth,videoHeight:返回视频的固有或自适应的宽度和高度,只读
                其可以被canvas函数调用
            */
            $('#btnPlay').toggle(function(){
                $('#WhereIsGoodBoy').get(0).play();
                $(this).find('i').removeClass('cus-control-play').addClass('cus-control-pause');
            }, function(){
                $('#WhereIsGoodBoy').get(0).pause();
                $(this).find('i').removeClass('cus-control-pause').addClass('cus-control-play');
            });
            $('#WhereIsGoodBoyControl button').click(function(){
                var cmd = $(this).attr('data-command') || '';
                var music = $('#WhereIsGoodBoy').get(0);
                switch(cmd){
                    case 'rewind':
                        music.currentTime -= 10;
                        break;
                    case 'fastforward':
                        music.currentTime += 10;
                        break;
                    case 'repeat':
                        music.loop = !music.loop;
                        if(music.loop){
                            $(this).addClass('cus-control-repeat-blue');
                        }else{
                            $(this).removeClass('cus-control-repeat-blue');
                        }
                        break;
                    case 'end':
                        if(music.duration){
                            music.currentTime = music.duration;
                        }
                         $('#btnPlay').trigger('click');
                        break;
                    case 'eject':
                        break;
                    case '':
                        break;
                }
            });
        });
    </script>
</head>
<body>
    <video controls>
        <source src="mp4.mp4" />
        你的浏览器不支持Video标签
    </video>
    <video controls>
        <source src="mp42.mp4" type='video/mp4; codecs="mp4v.20.8,mp4a.40.2"' />
        你的浏览器不支持Video标签
    </video>
    <video src="avi.avi" controls>
        <object data="CMONO.swf" type="application/x-shockwave-flash">
            <param name="movie" value="CMONO.swf">
        </object>
        你的浏览器不支持Video标签
    </video>
    <audio autoplay loop controls>
        <source src="Leta2.ogg"/>
        <source src="littleforever.mp3"/>
    </audio>
    <div>
        <div>
            <audio id="WhereIsGoodBoy" controls>
                <source src="WhereIsGoodBoy.ogg"/>
                <source src="littleforever.mp3"/>
            </audio>
        </div>
        <div id="WhereIsGoodBoyControl">
            <button id="btnPlay" data-command=""><i class="cus-control-play"></i></button>
            <button id="btnRewind" data-command="rewind"><i class="cus-control-rewind"></i></button>
            <button id="btnFastForward" data-command="fastforward"><i class="cus-control-fastforward"></i></button>
            <button id="btnRepeat" data-command="repeat"><i class="cus-control-repeat"></i></button>
            <button id="btnEnd" data-command="end"><i class="cus-control-end"></i></button>
            <button id="btnEject" data-command="equalizer"><i class="cus-control-equalizer"></i></button>
        </div>
    </div>
</body>
</html>


知识共享许可协议
《HTML5 Audio》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     182.14ms