HTML5 Audio Video中来获得用户的地理位置的过程是怎么样的?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5 Audio Video中来获得用户的地理位置的过程是怎么样的?相关的知识,希望对你有一定的参考价值。

"可以用Geolocation
Geolocation API主要是用来获取用户的地理位置。
工作流程:
通过浏览器请求你的同意à是否同意共享现在的位置
navigator.geolocation.getCurrentPosition(success, error, options);
这个方法接收三个参数,
第一个参数是用户允许浏览器共享位置后的回调方法,该方法有一个参数,里面包含了用户当前的位置信息。
// success,是一个函数,获取用户当前地址就是在这个函数中实现的
code:
function success (position)
// 获取用户的经度,纬度
// position.coords.latitude position.coords.longitude
// 经纬度的信息精度(单位:米)
// position.coords.accuracy

第二个参数是用户拒绝分享位置,或者是连接超时等原因造成获取位置失败时的回调方法。
// error,也是通过函数实现的,在这个函数中,要实现什么操作呢,处理错误。如果用户拒绝分享位置,或者是连接超时等原因造成获取位置失败,就在这个函数中做出相应的处理。
// 在这个方法中有两个参数,分别是code和message,code表示错误代码,message,就是返回的错误信息。
第三个参数是geolocation的选项对象,它包含了3个可选属性。
enableHighAccuracy是否尝试读取更精确的纬度和经度;
timeout设置获取位置信息时的最长连接时间;
maximumAge设置缓存本次位置的时长,以便下次读取。 写这么多不容易,选我最佳啊,再分享你个学习的video,视频的系列名称叫做 《Buid New World》里面第七集叫:html 5 Audio Video 标签和更多特性"
参考技术A geolocation

video与audio的使用

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

     这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

  ·首先带大家熟悉一下video标签的属性方法,根据属性方法做一个小demo,

    • HTML5支持的视频格式:

      • Ogg 
        • 带有Theora视频编码+Vorbis音频编码的Ogg文件
        • 支持的浏览器:FCO
      • MEPG4 
        • 带有H.264视频编码+AAC音频编码的MPEG4文件
        • 支持的浏览器: SC
      • WebM 
        • 带有VP8视频编码+Vorbis音频编码的WebM格式
        • 支持的浏览器: IFCO
        • 劣势:视频少、转码器几乎没有,不好转码
    • 想要video能自动填充慢父div的大小,只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可

      • 指定一种视频格式,不能播就提示
      • <video id="media" src="examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持video</video>

 

               <video controls = “controls”>

               <source src=”1.mp4” type=”video/mp4” /> //src属性写到source标签中,要指定视频的type类型,例如MP4的即为type=“video/mp4”

              <source src = “2.ogg” type=”video/ogg” /> //ogg格式

              <source src=”3.webm” type=”video/webm” /> //webm格式

              </video>

以上是关于HTML5 Audio Video中来获得用户的地理位置的过程是怎么样的?的主要内容,如果未能解决你的问题,请参考以下文章

HTML5中 video和audio这两个标签是干嘛的,如何设置其属性?

怎样获得html5的audio组件加载的MP3文件的总时长

HTML5 音频audio 和视频video实用基础教程

css总结16:HTML5 多媒体音频(Audio)视频(video )

HTML5视频Video 音频Audio

如何在 iOS 上自动播放 HTML5 <video> 和 <audio> 标签?