IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    HTML5 Audio/Video 标签,属性,方法,事件汇总

    陈华发表于 2015-10-19 01:25:09
    love 0

    <audio> 标签属性:

    • src:音乐的URL
    • preload:预加载
    • autoplay:自动播放
    • loop:循环播放
    • controls:浏览器自带的控制条
    Html代码
    1. <audio id=“media” src=“http://www.abc.com/test.mp3″ controls></audio>

    <video> 标签属性:

    • src:视频的URL
    • poster:视频封面,没有播放时显示的图片
    • preload:预加载
    • autoplay:自动播放
    • loop:循环播放
    • controls:浏览器自带的控制条
    • width:视频宽度
    • height:视频高度
    Html代码
    1. <video id=“media” src=“http://www.abc.com/test.mp4″ controls width=“400px” heigt=“400px”></video>

    获取HTMLVideoElement和HTMLAudioElement对象

    Js代码
    1. //audio可以直接通过new创建对象
    2. Media = new Audio(“http://www.abc.com/test.mp3″);
    3. //audio和video都可以通过标签获取对象
    4. Media = document.getElementById(“media”);

     

    Media方法和属性:

    HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

    Js代码
    1. //错误状态
    2.    Media.error; //null:正常
    3.    Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
    4. //网络状态
    5.    Media.currentSrc; //返回当前资源的URL
    6.    Media.src = value; //返回或设置当前资源的URL
    7.    Media.canPlayType(type); //是否能播放某种格式的资源
    8.    Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源
    9.    Media.load(); //重新加载src指定的资源
    10.    Media.buffered; //返回已缓冲区域,TimeRanges
    11.    Media.preload; //none:不预载 metadata:预载资源信息 auto:
    12. //准备状态
    13.    Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
    14.    Media.seeking; //是否正在seeking
    15. //回放状态
    16.    Media.currentTime = value; //当前播放的位置,赋值可改变位置
    17.    Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
    18.    Media.duration; //当前资源长度 流返回无限
    19.    Media.paused; //是否暂停
    20.    Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
    21.    Media.playbackRate = value;//当前播放速度,设置后马上改变
    22.    Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
    23.    Media.seekable; //返回可以seek的区域 TimeRanges
    24.    Media.ended; //是否结束
    25.    Media.autoPlay;  //是否自动播放
    26.    Media.loop;  //是否循环播放
    27.    Media.play();    //播放
    28.    Media.pause();   //暂停
    29. //控制
    30.    Media.controls;//是否有默认控制条
    31.    Media.volume = value; //音量
    32.    Media.muted = value; //静音
    33.    //TimeRanges(区域)对象
    34.    TimeRanges.length; //区域段数
    35.    TimeRanges.start(index) //第index段区域的开始位置
    36.    TimeRanges.end(index) //第index段区域的结束位置

     

    事件:

    Js代码
    1.        eventTester = function(e){
    2.     Media.addEventListener(e,function(){
    3.         console.log((new Date()).getTime(),e);
    4.     });
    5. }
    6. eventTester(“loadstart”);   //客户端开始请求数据
    7. eventTester(“progress”);    //客户端正在请求数据
    8. eventTester(“suspend”);     //延迟下载
    9. eventTester(“abort”);       //客户端主动终止下载(不是因为错误引起),
    10. eventTester(“error”);       //请求数据时遇到错误
    11. eventTester(“stalled”);     //网速失速
    12. eventTester(“play”);        //play()和autoplay开始播放时触发
    13. eventTester(“pause”);       //pause()触发
    14. eventTester(“loadedmetadata”);  //成功获取资源长度
    15. eventTester(“loadeddata”);  //
    16. eventTester(“waiting”);     //等待数据,并非错误
    17. eventTester(“playing”);     //开始回放
    18. eventTester(“canplay”);     //可以播放,但中途可能因为加载而暂停
    19. eventTester(“canplaythrough”); //可以播放,歌曲全部加载完毕
    20. eventTester(“seeking”);     //寻找中
    21. eventTester(“seeked”);      //寻找完毕
    22. eventTester(“timeupdate”);  //播放时间改变
    23. eventTester(“ended”);       //播放结束
    24. eventTester(“ratechange”);  //播放速率改变
    25. eventTester(“durationchange”);  //资源长度改变
    26. eventTester(“volumechange”);    //音量改变

    自由转载,转载请注明: 转载自WEB开发笔记 www.chhua.com

    本文链接地址: HTML5 Audio/Video 标签,属性,方法,事件汇总 http://www.chhua.com/web-note5287

    相关笔记

    • html5开发之viewport使用
    • HTML5目前存在的不足
    • HTML5专注于产品
    • WEB3.0革命也就是HTML5的革命
    • 现在支持html5和CSS3的浏览器有哪些?(支持HTML5的浏览器速查)


沪ICP备19023445号-2号
友情链接