当前位置:首页 > 网站技术 > 前端技术 > 正文内容

js基础之video视频、audio音频属性及API

小彬2020-10-03前端技术77

1、video 视频

video支持三种格式 mp4 webm ogv

video 里可放source标签,如果播放失败会继续检查下一个source标签,直到兼容

不同浏览器差异

safafi 只认mp4格式

ie ie8及以下不支持video标签 

   ie9以上仅支持mp4


video 属性

src 视频的资源地址

width height 视频的宽高,非视频内容的宽高

controls 播放控件

autoplay 自动播放 在chrome浏览器,不会自动播放

loop 循环播放

poster 视频封面,在视频首次加载的时候才会显示的图片

muted  视频静音模式



video API

(1)play() <-> 控制video标签让其播放但是在chrome下不允许自动带声音的播放

(2)pause() <-> 控制video标签让其暂停

(3)duration <-> 返回视频的总长度(以秒的形式)要写在window.onload里

(4)currentTime <-> 设置或返回当前的视频长度(以秒的形式)

(5)src <-> 设置视频的来源

(6)volume <-> 设置声音0 -1 声音设置

(7)controls <-> 设置一下video上面的控件

(8)muted  <-> 设置一下video上面的muted属性(静音)但是这个属性不会出现在video标签上

(9)networkState <-> video上面视频网络状态

    0 未初始化

    1 视频已经选取好资源,但是未使用网络

    2 浏览器正在下载视频资源

    3 未找到视频资源(在一开始的情况下因为video 不会立即找到资源所以也会出现3 这个状态码)

(10)currentSrc <-> 返回音视频的地址(必须是在音视频可以加载播放的时候,而且不能赋值)

(11)ended<->可以返回视频是否播放结束的结果

    如果播放结束返回一个true 

    如果没播放结束返回false 可以进行事件监听(addEventListener) 可以监听到视频播放结束,如果结束了可以在函数中进行一些操作。

(12)loop <-> 设置或返回视频是否应在结束时重新播放

(13)playbackRate <-> 可以返回设置视频的播放速度(默认是1)

(14)readyState <-> 属性返回当前视频的就绪状态

    0 <-> 没有关于视频就绪的信息

    1 <-> 有数据但是快不足以支撑了

    2 <-> 当前的数据是可以用但是没有数据来播放下一帧/毫秒了

    3 <-> 数据正在缓冲当前及至少下一帧是可用了

    4 <-> 可用数据足已开始播放

(15)timeupdate  <-> 可以监听到视频目前的播放状态如果播放时就会自动函数内容不播放则相反

(16)seeked  <->当用户对视频的进度条并且已经完成操作时会触发的事件使用的时候必须用on

(17)seeking <-> 当用户开始拖动进度条时就会触发的事件使用的时候必须用on

(18)volumechange <-> 当视频的声音发生改变时就会触发的事件使用的时候必须使用on

(19)requestFullScreen <-> 全屏但是必须需要在用户的事件中调用

    moz mozRequestFullScreen

    webkit webkitRequestFullscreen

(20)load 就是强制让播放器刷新一下/从新加载一次

(21)canplay 视频已经加载好可以开始播放了的事件




2、audio 音频

audio属性 && API

(1)src -音频的地址

(2)controls -音频的控件

(3)source 标签也可以放入src   如果播放失败audio 会继续看下一个source标签直到兼容

(4)支持的音频格式:mp3、ogg、wav

    mp3 格式所有的浏览器都兼容

    ogg chrome、火狐、欧朋以上三个都认识,safari不认识

    wav safari、chrome、火狐、欧朋认识

(5)javascript 能帮助咱们去生成出audio对象

        a)new Audia() 等同于html上面写一个<audio></audio>标签

        b)chrome、欧朋浏览器不能直接播放需要一个页面元素上的交互才可以,其余浏览器可以直接播放

(6)autoplay 自动播放。谷歌和欧朋会有问题,其余的浏览器没有问题

(7)muted 静音用的属性但是和video 有区别有了这个属性也不会自动播放

(8)loop 循环播放

(9)width / height 属性没有作用必须使用style标签里面的样式去控制它

(10)play 音频播放/不在暂停时

(11)pause 当音频已经暂停时/不在播放时

(12)networkState 返回音频的当前网络状态

(13)readyState 属性返回音频的当前就绪状态

(14)duration 返回音频的总长度

(15)canplay 音频加载完毕可以播放

(16)currentTime 设置或返回音频的长度

(17)volume 设置声音0 -1

(18)currentSrc 可以返回当前的音频地址但是没法赋值

(19)ended 通过监听这个事件可以知道音频播放结束的时候触发也可以直接查看其布尔值

(20)loop 循环true 就代表循环false 就不是循环

(21)playbackRate 设置倍速

(22)timeupdate 监听音频的播放

(23)seeked 当用户已移动/跳跃到音频的新位置

(24)seeking  当用户开始移动/跳跃到音频的新位置时。注意:audio触发的频率是一样的

(26)volumechange 音频的声音改变时触发的事件

(27)requestFullScreen 全屏必须使用audio标签。new audio 对象不能使用

(28)load 从新加载一边音频


分享给朋友:
返回列表

上一篇:js基础之canvas绘图技术

没有最新的文章了...

相关文章

手机端使用3D轮播图的方法

手机端使用3D轮播图的方法

效果呈现来源于http://www.jq22.com/demo/jR3DCarousel-master20160315/我根据业务需求,改成了自己需要的样子,如图总的来说,代码量并不多。我把栏目的数据...

HTTP之安全威胁解析

HTTP之安全威胁解析

1、web安全攻击web应用的概念web应用是由动态脚本、编译过的代码等组合而成它通常架设在web服务器上,用户在web浏览器上发送请求这些请求使用http协议,由web应用和企业后台的数据库及其他动...

CSS Flex 盒布局教程

CSS Flex 盒布局教程

参考文章:A Visual Guide to CSS3 Flexbox Properties,W3C CSS Flexible Box Layout Module Level,Flex 布局教程:语法...

常用正则表达式汇总

常用正则表达式汇总

来源:菜鸟教程http://c.runoob.com/front-end/854常用正则表达式正则表达式元字符和特殊字符移步6、第五章--引用类型(Date类型、RegExp类型)一、校验数字的表达式...

javascript之原生ajax请求步骤

javascript之原生ajax请求步骤

一、什么是Ajax?Ajax的全称是Asynchronous JavaScript and XML(即异步的 JavaScript和 XML,它并不是一种新的编程语言,结合了多项技术的浏览器端的网页开...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信