JavaScript基础学习——HTML5 API

2022-10-19 12:10:18

一、媒体操作

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() 暂停

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button onclick="history.go(-1)">返回</button>
  <button id="audio">操控音频</button>
  <button>播放</button>
  <button>暂停</button>
  <audio id="media" controls autoplay>
    <source src="sources/Itsok.mp3" type="audio/mp3">
  </audio>
</body>
<script>
  var audio = document.getElementById("audio")

  audio.onclick = function () {
    console.log(media.buffered.length)
    console.log(media.buffered.start(0))
    console.log(media.currentSrc)
    console.log(media.currentTime)
    console.log(media.ended)
    console.log(media.duration)
    console.log(media.networkState)
    console.log(media.paused)

    console.log(media.canPlayType('audio/mp3')) // 返回'probable'：浏览器最可能支持该类型
  }

  //播放
  document.querySelectorAll('button')[2].onclick=function(){
    media.play()
  }

  //暂停
  document.querySelectorAll('button')[3].onclick=function(){
    media.pause()
  }
  
</script>

</html>

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(); 暂停

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <button onclick="opAttr()">操控视频属性</button>
    <button>播放</button>
    <button>暂停</button>
  </div>

  <!-- 加载视频 -->
  <video controls loop autoplay width="400" height="300">
    <source src="sources/trailer.mp4" type="video/mp4">
    <source src="sources/trailer.ogg" type="video/ogg">
    <source src="sources/trailer.mpeg" type="video/mpeg">
  </video>
</body>
<script>
  var video = document.querySelector('video')

  //播放
  document.querySelectorAll('button')[1].onclick = function () {
    video.play()
  }

  //暂停
  document.querySelectorAll('button')[2].onclick = function () {
    video.pause()
  }

  function opAttr() {
    video.currentTime = 5//当前播放的位置，赋值可改变位置（以秒计）
    console.log(video.currentTime);

    // Media.startTime; 一般为0，如果为流媒体或者不从0开始的资源，则不为0
    // Media.duration; 当前资源长度 流返回无限
    // Media.paused; 是否暂停
    // Media.defaultPlaybackRate = value; 默认的回放速度，可以设置，默认1.0
    //video.defaultPlaybackRate = 5.0

    // Media.playbackRate = value; 当前播放速度，设置后马上改变，默认1.0
    //video.playbackRate = 5.0

    // Media.played; 返回已经播放的区域，
    console.log(video.played)

    // Media.seekable; 返回可以seek的区域 TimeRanges
    // Media.ended; 是否结束
    // Media.autoPlay; 是否自动播放
    // Media.loop; 是否循环播放
    // Media.controls 是否有默认控制条
    // Media.volume 音量0.1~1.0
    video.volume = .1
    console.log(video.volume)

    // Media.muted 静音，true|false
    video.muted = true
  }
</script>

</html>

二、手势事件（移动端）

移动端事件在使用之前，必须先在<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毫秒。
<meta name="viewport" content="width=device-width, initial-scale=1">
（3）所有版本的Android Chrome浏览器，如果设置viewport meta的值有user-scalable=no，浏览器也是会马上出发点击事件。
（4）IE11+浏览器设置了css的属性touch-action: manipulation，它会在某些标签（a，button等）禁止双击事件，IE10的为-ms-touch-action: manipulation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>jdjfjancjsdnjc</p>
</body>
<script src="js/fastclick.js"></script>
<script>
  document.body.addEventListener('click',function(){
    this.style.cssText='height:100px;background:#eee'
  })
</script>
</html>

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及插件：
<script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
<script src="js/touch.js"></script>
注意：zepto.js必须先于其它插件引入。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">box</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
<script src="js/event.js"></script>
<script src="js/touch.js"></script>
<script>
  console.dir($);
  // $('.box').click(function(){
  //   console.log('click');
  // })
  
  //tap:轻击事件
  $('.box').tap(function(){
    console.log('tap');
  })

  // //singleTap:单击事件
  // $('.box').singleTap(function(){
  //   console.log('singleTap');
  //   $(this).html("修改")
  // })

  // $('.box').doubleTap(function(){
  //   console.log('doubleTap')
  //   $(this).css({
  //     color: 'red',
  //     textShadow: '2px 2px 6px #999'
  //   })
  // })

  // $('.box').longTap(function(){
  //   console.log('longTap')
  //   $(this).css('fontSize','50px')
  // })
</script>
</html>

3、swipe事件

滑屏事件（只能用在移动端）。

分为：
swipe:滑屏（上下左右四个方向都可以触发）
swipeLeft:左滑屏
swipeRight:右滑屏
swipeUp:上滑屏
swipeDown:下滑屏

swipe事件非原生事件，需要引入zepto.js库

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">box</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
<script src="js/touch.js"></script>
<script>
  $('.box').swipe(function(){
    $(this).css('fontSize','50px')
  })

  $(document).on('swipeRight',function(){
    location.assign('./02 音频常用属性和方法.html')
  })

  $(document).on('swipeLeft',function(){
    $('.box').css('background','red')
  })

  $(document).swipeUp(function(){
    $('.box').html('<span>span</span>')
  })

  $(document).on('swipeDown',function(){
    $('.box').css('color','#fff')
</script>
</html>

4、touch事件

分类：
touchstart 手指触摸到屏幕会触发
touchmove 当手指在屏幕上移动时，会触发
touchend 当手指离开屏幕时，会触发
touchcancel 可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      width: 100%;
      height: 60px;
    }
  </style>
</head>

<body>

</body>
<script>
  document.body.addEventListener('touchstart', function () {
    console.log('touchstart')
  }, false)


  document.body.addEventListener('touchmove', function () {
    alert()
    console.log('touchmove')
  }, false)

  document.body.ontouchend = function () {
    console.log('touchend')
  }

  document.body.ontouchcancel = function () {
    console.log('ontouchcancel')
  }
</script>

</html>

三、拖放事件

必须要在被拖放的元素添加属性：draggable = "true"。

事件：
ondragstart 当拖拽元素开始被拖拽的时候触发的事件被拖曳元素上
ondragenter 当拖曳元素进入目标元素的时候触发的事件目标元素上
ondragover 拖拽元素在目标元素上移动的时候触发的事件目标元素上
ondrop 被拖拽的元素在目标元素上同时鼠标放开触发的事件目标元素上
ondragend 当拖拽完成后触发的事件被拖曳元素上

注意：
（1）事件对象中包含DataTransfer对象，它是用来拖拽对象用来传递的媒介，使用一般为Event.dataTransfer 。
（2）Event.effectAllowed 属性：就是拖拽的效果。
（3）Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中千万一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    overflow: hidden;
  }

  .box1,
  .box2 {
    width: 157px;
    height: 230px;
    border: 1px solid #999;
    padding: 10px;
    float: left;
  }

  img {
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div class="box">
    <div class="box1">
      <img draggable="true" id="img" src="images/test.jpg" alt="drag">
    </div>
    <div class="box2"></div>
  </div>
</body>
<script>
  var box1 = document.querySelector('.box1')
  var box2 = document.querySelector('.box2')
  var img = document.querySelector('img')

  img.ondragstart=function(e){
    e.dataTransfer.setData('imgTarget',e.target.id)
  }

  box2.ondragover=function(e){
    e.preventDefault()
  }

  box2.ondrop=function(e){
    this.appendChild(document.getElementById(e.dataTransfer.getData('imgTarget')))
  }
</script>

</html>

四、定位

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 是否获取更精准的位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script>
  /* // 判断当前浏览器是否支持定位
  if(navigator.geolocation){
    console.log('该浏览器支持定位！')
  }else{
    console.log('该浏览器不支持定位！')
  } */

  var options = {
    timeout: 5000,
    enableHighAccuracy:true
  }

  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(success,error,options)
  }else{
    console.log('该浏览器不支持定位！')
  }

  function success(info){
    console.log(info) // 谷歌可以定位，但不能获取地理位置值
    console.log(info.coords.latitude) // 纬度
    console.log(info.coords.longitude) // 经度
  }

  function error(err){
    console.log(err)
  }
</script>
</html>

4.2、watchPosition():要跟踪用户的位置

用法与getCurrentPosition()方法用法一样。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="stopPositon()">停止定位</button>
</body>
<script>
  var options = {
    timeout: 5000,
    enableHighAccuracy:true
  }

  if(navigator.geolocation){
    // 跟踪用户的位置
    navigator.geolocation.watchPosition(success,error,options)
  }else{
    console.log('该浏览器不支持定位！')
  }

  function success(info){
    console.log(info) 
    console.log(info.coords.latitude) // 纬度
    console.log(info.coords.longitude) // 经度
  }

  function error(err){
    console.log(err.message)
  }  

  var watcher = navigator.geolocation.watchPosition(success,error,options)
  // 停止跟踪用户的位置
  function stopPositon(){
    navigator.geolocation.clearWatch(watcher)
  }  
</script>
</html>

4.3、clearWatch()

语法：navigator.geolocation.clearWatch(watcher)

码农公寓

相关文章