一、媒体操作
1、audio(音频)
支持的音频格式:.mp3/.ogg/.webm
标签常用属性:
autoplay autoplay 自动播放(IE9以下不支持,IE可以支持自动播放,谷歌有些版本不支持自动播放)
controls controls 控制条
loop loop 循环
preload preload 预加载(设置autoplay时,preload失效)
src url 音频文件路径及文件名
JS常用属性:
audio.buffered.end(0):获取已缓冲的秒数
audio.buffered.length:获取缓冲范围
audio.buffered.start(index):获取某个已缓冲返回的开始位置
audio.buffered.end(index):获取某个已缓冲范围的结束位置
currentSrc:返回当前音频的URL
currentTime:返回当前音频的现在时间
ended:音频是否结束
duration:返回音频时长,以秒计
networkState:返回音频的网络状态[0:尚未初始化;1:已经选取资源,但未使用网络;2:正在下载数据;3:未找到资源
paused:是否处于暂停状态
常用方法:
canPlayType(type) 检测支持播放的类型
load() 重新加载
play() 播放
pause() 暂停
Document
2、video(视频)
支持的视频格式:.mp4 .mpeg .ogg
标签常用属性:
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度
JS常用属性:
Media.currentTime = value; 当前播放的位置,赋值可改变位置(以秒计)
Media.startTime; 一般为0,如果为流媒体或者不从0开始的资源,则不为0
Media.duration; 当前资源长度 流返回无限
Media.paused; 是否暂停
Media.defaultPlaybackRate = value; 默认的回放速度,可以设置,默认1.0
Media.playbackRate = value; 当前播放速度,设置后马上改变,默认1.0
Media.played; 返回已经播放的区域,TimeRanges,关于此对象见下文
Media.seekable; 返回可以seek的区域 TimeRanges
Media.ended; 是否结束
Media.autoPlay; 是否自动播放
Media.loop; 是否循环播放
Media.controls 是否有默认控制条
Media.volume 音量0.1~1.0
Media.muted 静音,true|false
JS常用方法:
Media.play(); 播放
Media.pause(); 暂停
Document
二、手势事件(移动端)
移动端事件在使用之前,必须先在
中添加移动优先的设置:1、click事件
click事件在移动端会有200-300ms的延时(主要在苹果浏览器上)。
解决方案:引入fastclick插件。
参考网址:https://www.jianshu.com/p/150c305f6930
下载faskclick的网址:https://github.com/ftlabs/fastclick
不需要使用fastclick的情况
(1)FastClick是不会对PC浏览器添加监听事件
(2)Android版Chrome 32+浏览器,如果设置viewport meta的值为width=device-width,这种情况下浏览器会马上出发点击事件,不会延迟300毫秒。
(3)所有版本的Android Chrome浏览器,如果设置viewport meta的值有user-scalable=no,浏览器也是会马上出发点击事件。
(4)IE11+浏览器设置了css的属性touch-action: manipulation,它会在某些标签(a,button等)禁止双击事件,IE10的为-ms-touch-action: manipulation
Document
jdjfjancjsdnjc
2、 tap事件
因为click事件在移动端可能会有300ms左右的延时,可以使用tap替代click事件。
(1)tap事件包括:
tap:轻击事件
singleTap:单击事件
doubleTap:双击事件
longTap:长按事件
(2)用法
原生中没有tap事件,需要引入zepto.js库实现。(zepto.js的用法与jQuery一样)
zepto.js官网:https://zeptojs.bootcss.com/
注意:
1)如果要使用zepto.js时,有些api单独放在其它js模块中,使用时需要引入这些模块,然后才能调用对应的方法。
2)如果要使用zepto.js中的tap事件,需要引入touch.js描件。
3)tap事件在PC端使用时是无效的,只能在移动端使用。
4)如果要使用常规事件,如click事件等,需要引入event.js插件。
下载zepto.js及相关插件:https://github.com/madrobby/zepto
引入zepto.js及插件:
注意:zepto.js必须先于其它插件引入。
Document
box
3、swipe事件
滑屏事件(只能用在移动端)。
分为:
swipe:滑屏(上下左右四个方向都可以触发)
swipeLeft:左滑屏
swipeRight:右滑屏
swipeUp:上滑屏
swipeDown:下滑屏
swipe事件非原生事件,需要引入zepto.js库
Document
box
4、touch事件
分类:
touchstart 手指触摸到屏幕会触发
touchmove 当手指在屏幕上移动时,会触发
touchend 当手指离开屏幕时,会触发
touchcancel 可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件
Document
三、拖放事件
必须要在被拖放的元素添加属性:draggable = "true"。
事件:
ondragstart 当拖拽元素开始被拖拽的时候触发的事件 被拖曳元素上
ondragenter 当拖曳元素进入目标元素的时候触发的事件 目标元素上
ondragover 拖拽元素在目标元素上移动的时候触发的事件 目标元素上
ondrop 被拖拽的元素在目标元素上同时鼠标放开触发的事件 目标元素上
ondragend 当拖拽完成后触发的事件 被拖曳元素上
注意:
(1)事件对象中包含DataTransfer对象,它是用来拖拽对象用来传递的媒介,使用一般为Event.dataTransfer 。
(2)Event.effectAllowed 属性:就是拖拽的效果。
(3)Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中千万一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉 。
Document
四、定位
H5新增用navigator.geolocation API实现定位。
1、浏览器支持: IE9以上、Firefox、Chrome、Safari、Opera支持地理定位。
2、判断浏览器是否支持定位
判断navigator.geolocation是否有返回值,如果有,则支持;没有则不支持。
3、定位方法一般有:
服务端/PC端:IP地址
移动客户端:GPS(精准)
4、方法:
4.1、getCurrentPosition(success,error,option):获取当前位置
success:定位成功
accuracy: 206 位置精度
altitude: 0 海拔
altitudeAccuracy: null 海拔的精准度
heading: NaN 方向
latitude: 30.653960532523246 纬度
longitude: 103.9820867327906 经度
speed: NaN 速度
timestamp: 1595406403973 响应的时间
error:定位失败
option:定位参数设置
timeout: 6000 请求超时时间,毫秒计
enableHighAccuracy: true/false 是否获取更精准的位置
Document
4.2、watchPosition():要跟踪用户的位置
用法与getCurrentPosition()方法用法一样。
Document
4.3、clearWatch()
语法:navigator.geolocation.clearWatch(watcher)