H5学习系列之Audio和Video

1、视频文件:音频轨道、视频轨道和一些元数据(视频封面、标题、子标题、字幕等相关信息)。

2、目前H5还不支持的:流式音频和视频(H5对视频的支持只限于加载的全部媒体文件)、H5的媒体收到跨域资源共享的限制、全屏无法通过脚本控制。

3、检测浏览器是否具有播放视频的功能

var canPlay = document.createElement("video").canPlayType;
if (canPlay) {alert("ok");}
else {alert('error');}  //其实就是检测浏览器是否具有canplaytype函数

4、audio 

<audio controls src="/张含韵 - 问别.mp3">
An audio clip from johann sebastian bach
</audio>

代码中controls 特性告诉浏览器显示通过的用户控制(开始、停止、跳播、以及音量控制),她之间的内容是为不支持audio元素的浏览器准备的替换内容

<audio controls >

  <source src="" />

  <source src="" />
An audio clip from johann sebastian bach
</audio>

浏览器根据自身播放能力自动选择,挑选最贱的来源进行播放

autoplay属性:加载完成后自动播放(ios不支持)

5、var docu = document.getElementById("audio");//同时适用于video这些属性他们两个相同

        var duration = docu.duration;//整个媒体的播放时常 以s为单位

        var paused = docu.paused;//如果媒体文件当前被暂停(或者未播放),返回true

        var ended = docu.ended;//如果文件已经播放完毕了返回true

        var currentSrc = docu.currentSrc;//以字符串形式返回当前正在播放文件对应于浏览器在source元素中选择的文件

        //以上都是只读属性

        docu.autoplay = true;//查询或者设置自动播放

        docu.loop = true;//查询或者设置循环播放

        docu.currentTime = "30";//查询或者只当前播放的位置

        docu.controls = true;//查询或者设置用户与控制界面

        docu.volume = 0.5;//查询或者设置音量0.0到1.0

        docu.muted = false;//查询或者设置是否静音

        docu.autobuffer = true;//通知播放器在媒体文件开始播放前,是否进行缓冲加载。(如果媒体文件已设置为autoplay,则忽略此属性)

 

6、video特有的属性

poster :在视频加载完成之前 图片得url;

width、height:读取或设置显示尺寸。如果设置的宽度与视频本身不匹配,可能导致居中显示,上下或者左右可能出现黑色条状区域。

videowidth、videoHeight:返回视频的固有或者自适应的宽度和高度(只读)

onloadstart //客户端开始请求数据

onprogress //客户端正在请求数据

onsuspend //延迟下载

onabort //客户端主动终止下载(不是因为错误引起)

onerror //请求数据时遇到错误

onstalled //网速失速

onplay //play()和autoplay开始播放时触发

onpause //pause()触发

onloadedmetadata //成功获取资源长度

onloadeddata //

onwaiting //等待数据,并非错误

onplaying //开始回放

oncanplay //可以播放,但中途可能因为加载而暂停

oncanplaythrough //可以播放,歌曲全部加载完毕

onseeking //寻找中

onseeked //寻找完毕

ontimeupdate //播放时间改变

onended //播放结束

onratechange //播放速率改变

ondurationchange //资源长度改变

onvolumechange //音量改变

以上所有事件都是可以捕捉到的 

  

原文地址:https://www.cnblogs.com/lxtblogs/p/5243521.html