audio和video的用法

audio方法 方法描述

addTextTrack() 为音视频加入一个新的文本轨迹

canPlayType() 检查指定的音视频格式是否得到支持

load() 重新加载音视频标签

play() 播放音视频

pause() 暂停播放当前的音视频

-------------------------

属性 属性描述

audioTracks 返回可用的音轨列表（MultipleTrackList对象）

autoplay 媒体加载后自动播放

buffered 返回缓冲部件的时间范围(TimeRanges对象)

controller 返回当前的媒体控制器（MediaController对象）

controls 显示播控控件

crossOrigin <a href="https://www.baidu.com/s?wd=CORS&tn=44039180_cpr&

fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWF9uhw9uHI-mHR3rymY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHf4PjT1nj

csP1TsPHRsrjn1rf" target="_blank" class="baidu-highlight">CORS</a>设置

currentSrc 返回当前媒体的URL

currentTime 当前播放的时间，单位秒

defaultMuted 缺省是否<a href="https://www.baidu.com/s?wd=%E9%9D%99%E9%9F%B3&tn=44039180_cpr&

fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWF9uhw9uHI-mHR3rymY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHf4PjT1nj

csP1TsPHRsrjn1rf" target="_blank" class="baidu-highlight">静音</a>

defaultPlaybackRate 播控的缺省倍速

duration 返回媒体的播放总时长，单位秒

ended 返回当前播放是否结束标志

error 返回当前播放的错误状态

initialTime 返回初始播放的位置

loop 是否循环播放

mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签)

muted 是否<a href="https://www.baidu.com/s?wd=%E9%9D%99%E9%9F%B3&tn=44039180_cpr&

fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWF9uhw9uHI-mHR3rymY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHf4PjT1nj

csP1TsPHRsrjn1rf" target="_blank" class="baidu-highlight">静音</a>

networkState 返回当前网络状态

paused 是否暂停

playbackRate 播放的倍速

played 当前播放部件已经播放的时间范围(TimeRanges对象)

preload 页面加载时是否同时加载音视频

readyState 返回当前的准备状态

seekable 返回当前可跳转部件的时间范围(TimeRanges对象)

seeking 返回用户是否做了跳转操作

src 当前音视频源的URL

startOffsetTime 返回当前的时间偏移(Date对象)

textTracks 返回可用的文本轨迹(TextTrackList对象)

videoTracks 返回可用的视频轨迹(VideoTrackList对象)

volume 音量值

事件

事件描述

abort 当音视频加载被异常终止时产生该事件

canplay 当浏览器可以开始播放该音视频时产生该事件

canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件

durationchange 当媒体的总时长改变时产生该事件

emptied 当前播放列表为空时产生该事件

ended 当前播放列表结束时产生该事件

error 当加载媒体发生错误时产生该事件

loadeddata 当加载媒体数据时产生该事件

loadedmetadata 当收到总时长，分辨率<a href="https://www.baidu.com/s?wd=%E5%92%8C%E5%AD%97&tn=44039180_cpr&

fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWF9uhw9uHI-mHR3rymY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHf4PjT1nj

csP1TsPHRsrjn1rf" target="_blank" class="baidu-highlight">和字</a>轨等metadata时产生该事件

loadstart 当开始查找媒体数据时产生该事件

pause 当媒体暂停时产生该事件

play 当媒体播放时产生该事件

playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件

progress 当获取到媒体数据时产生该事件

ratechange 当播放倍数改变时产生该事件

seeked 当用户完成跳转时产生该事件

seeking 当用户正执行跳转时操作的时候产生该事件

stalled 当试图获取媒体数据，但数据还不可用时产生该事件

suspend 当获取不到数据时产生该事件

timeupdate 当前播放位置发生改变时产生该事件

volumechange 当前音量发生改变时产生该事件

waiting 当视频因缓冲下一帧而停止时产生该事件

video和audio类似

<video id="videoID" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"

width="100%" height="100%" preload="auto" poster="" src=""></video>

关于video标签我也踩过几次坑,当设置了controls属性,而有些按钮并未出现,可能是客户端禁掉了.

1.常用的属性:webkit-playsinline="true",playsinline 这个主要是为了解决ios自动全屏的问题

2.现在使用video写的视频播放,在ios系统的uc浏览器还是会自动全屏的(uc强制全屏),暂时还没找到解决方案

3.当使用video在浏览器中点击播放然后暂停时,封面有时会消失(代码本身应该出现的),是因为浏览器在解析的时候把video标签顶到了最上面

解决方案:点击暂停时,把video标签隐藏掉(display:none),不要直接删掉,有些浏览器直接删掉的话,继续播放会从头开始播放

4.华为mete8 在禁止循环播放的情况下,手动拖动到最后会自动重头播放. 注:每款手机对手动拖动到最后解析出来的结果不一样(部分手机会自动往前跳几秒钟)

 

转载于:https://www.cnblogs.com/BGweizheng/p/9303248.html