JavaScript基础学习——HTML5 API-白红宇

JavaScript基础学习——HTML5 API

阅读量：3918 次

发布时间：2019-05-23

本文共 4584 字，大约阅读时间需要 15 分钟。

一、媒体操作

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

二、手势事件（移动端）

移动端事件在使用之前，必须先在<head>中添加移动优先的设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">

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事件把它直接干掉。