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

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

标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条

1 http://www.abc.com/test.mp3″controls>

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

1 http://www.abc.com/test.mp4″controls width=”400px”heigt=”400px”>

获取HTMLVideoElement和HTMLAudioElement对象

1 //audio可以直接通过new创建对象

2 Media = newAudio(”
http://www.abc.com/test.mp3“);

3 //audio和video都可以通过标签获取对象

4 Media = document.getElementByIdx_x(“media”);

Media方法和属性:

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

01 //错误状态

02 Media.error; //null:正常

03 Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

04 //网络状态

05 Media.currentSrc; //返回当前资源的URL

06 Media.src = value; //返回或设置当前资源的URL

07 Media.canPlayType(type); //是否能播放某种格式的资源

08 Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源

09 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段区域的结束位置

事件:

01 eventTester = function(e){

02 Media.addEventListener(e,function(){

03 console.log((newDate()).getTime(),e);

04 });

05 }

06

07 eventTester(“loadstart”); //客户端开始请求数据

08 eventTester(“progress”); //客户端正在请求数据

09 eventTester(“suspend”); //延迟下载

10 eventTester(“abort”); //客户端主动终止下载(不是因为错误引起),

11 eventTester(“error”); //请求数据时遇到错误

12 eventTester(“stalled”); //网速失速

13 eventTester(“play”); //play()和autoplay开始播放时触发

14 eventTester(“pause”); //pause()触发

15 eventTester(“loadedmetadata”); //成功获取资源长度

16 eventTester(“loadeddata”); //

17 eventTester(“waiting”); //等待数据,并非错误

18 eventTester(“playing”); //开始回放

19 eventTester(“canplay”); //可以播放,但中途可能因为加载而暂停

20 eventTester(“canplaythrough”); //可以播放,歌曲全部加载完毕

21 eventTester(“seeking”); //寻找中

22 eventTester(“seeked”); //寻找完毕

23 eventTester(“timeupdate”); //播放时间改变

24 eventTester(“ended”); //播放结束

25 eventTester(“ratechange”); //播放速率改变

26 eventTester(“durationchange”); //资源长度改变

27 eventTester(“volumechange”); //音量改变

 

广告

广告

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/114242.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • JSP实现成语接龙「建议收藏」

    JSP实现成语接龙「建议收藏」首页:<%–CreatedbyIntelliJIDEA.User:zddDate:2019/11/18Time:10:15TochangethistemplateuseFile|Settings|FileTemplates.–%><%@pagecontentType=”text/html;chars…

  • 如何成为一名黑客(新手入门到大师全集)

    如何成为一名黑客(新手入门到大师全集)学前感言:1.这是一条坚持的道路,三分钟的热情可以放弃往下看了.2.多练多想,不要离开了教程什么都不会了.最好看完教程自己独立完成技术方面的开发.3.有时多google,baidu,我们往往都遇不到好心的大神,谁会无聊天天给你做解答.4.遇到实在搞不懂的,可以先放放,以后再来解决.基本方向:1.web安全方面(指网站服务器安全方面,进行渗透测试,检测漏洞以及安全…

  • ASP.NET 如何使用 SqlTransaction

    ASP.NET 如何使用 SqlTransactiontransaction属性: 1.原子性:事务是一个完整的操作,事务的各元素师不可分的。2.一致性:事务开始时和完成时,数据必须处于一致的状态。3.隔离性:对数据进行修改的所有并发事务是彼此隔离的。4.持久性:事务完成后,它对系统的影响是永久的。  ASP.NET使用SqlTransaction处理事务操作 SqlTransaction类是对SQLSe

  • Android 3D画廊采用Gallery实现无限循环、自动轮播

    Android 3D画廊采用Gallery实现无限循环、自动轮播公司最近有一个需求,是打算做一个轮播图的展示界面,不过和传统意义上不同,并非是在手机app的顶部展示几张定时切换的固定大小宽高的图片,而是中间长方形,两边向里倾斜,形成对称感的特殊界面,如下图:需要实现功能:无限循环,自动跳转,倒影效果。(原本的企划是动画轮播的时候,下面会呈现一条Listview,里面会因为展示的不同界面而呈现不同的内容,但是后面放弃了。)下面开始上代码:

  • 一阶惯性环节的传递函数表达式_设一力传感器可作为二阶系统来处理

    一阶惯性环节的传递函数表达式_设一力传感器可作为二阶系统来处理具有纯滞后一阶惯性系统计算机控制系统设计具体内容:1)自己给出系统的闭环传递函数的表达式2)自己设定系统性能指标3)书面设计一个计算机控制系统的硬件布线连接图4)硬件布线连接图转化为系统结构图5)选择一种控制算法6)软件工程知识编写程序流程图7)在MATLAB下进行编程和仿真,给出单位阶跃函数的输出结果表8)进行系统的可靠性和抗干扰性的分析计算机控制系统课程设计目录…

  • Oracle 查询技巧与优化(二) 多表查询「建议收藏」

    Oracle 查询技巧与优化(二) 多表查询「建议收藏」关于Oracle多表查询的一些技巧和优化~

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号