美文网首页
HTML5 Audio/Video 汇总!!!

HTML5 Audio/Video 汇总!!!

作者: 唐艺和风榻榻米丨大连店 | 来源:发表于2016-11-02 19:27 被阅读58次

    在HTML5中的音视频标签的属性也不是很多,w3school有很详细的讲解。
    主要是在JS中我们应该如何去控制音视频的状态。以下属性和方法相信大家都会用的到。

    <audio> 标签属性:

    <ul><li>src:音乐的URL
    <li>preload:预加载
    <li>autoplay:自动播放
    <li>loop:循环播放
    <li>controls:浏览器自带的控制条
    </ul>

    <video> 标签属性:

    <ul><li>src:视频的URL
    <li>poster:视频封面,没有播放时显示的图片
    <li>preload:预加载
    <li>autoplay:自动播放
    <li>loop:循环播放
    <li>controls:浏览器自带的控制条
    <li>width:视频宽度
    <li>height:视频高度
    </ul>

    获取HTMLMediaElements对象

    <ol>
    <li>var media = new Audio(http://www.test.com/test.mp3);
    <li>var media = document.getElementsbyId("media");(引号内的media是你音视频标签的id值)
    </ol>

    浏览器兼容影音格式

    浏览器、影音格式 Ogg Theora MP4(H.264) WebM
    Microsoft Internet Explorer9 × ×
    Mozilla Firefox5+ ×
    Google Chrome13+
    Apple Safari5+ × ×
    Opera11+" ×

    重点来了!!! 以下JS部分有需要收藏的赶紧拿走~<code>

    <ol><li>//错误状态
    <li> Media.error; //null:正常
    <li> Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
    <li>//网络状态
    <li> Media.currentSrc; //返回当前资源的URL
    <li> Media.src = value; //返回或设置当前资源的URL
    <li> Media.canPlayType(type); //是否能播放某种格式的资源
    <li> Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
    <li> Media.load(); //重新加载src指定的资源
    <li> Media.buffered; //返回已缓冲区域,TimeRanges
    <li> Media.preload; //none:不预载 metadata:预载资源信息 auto:

    <li>//准备状态
    <li> Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
    <li> Media.seeking; //是否正在seeking

    <li>//回放状态
    <li> Media.currentTime = value; //当前播放的位置,赋值可改变位置
    <li> Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
    <li> Media.duration; //当前资源长度 流返回无限
    <li> Media.paused; //是否暂停
    <li> Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
    <li> Media.playbackRate = value;//当前播放速度,设置后马上改变
    <li> Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
    <li> Media.seekable; //返回可以seek的区域 TimeRanges
    <li> Media.ended; //是否结束
    <li> Media.autoPlay; //是否自动播放
    <li> Media.loop; //是否循环播放
    <li> Media.play(); //播放
    <li> Media.pause(); //暂停
    <li>//控制
    <li> Media.controls;//是否有默认控制条
    <li> Media.volume = value; //音量
    <li> Media.muted = value; //静音
    <li> //TimeRanges(区域)对象
    <li> TimeRanges.length; //区域段数
    <li> TimeRanges.start(index) //第index段区域的开始位置
    <li> TimeRanges.end(index) //第index段区域的结束位置
    </ol>

    以下转自http://www.cnblogs.com/luckk/p/5239991.html,欢迎大家探讨交流

    相关文章

      网友评论

          本文标题:HTML5 Audio/Video 汇总!!!

          本文链接:https://www.haomeiwen.com/subject/sgtbuttx.html