html502网络接口 全屏接口 播放器案例

写代码：

第一步：我们要做什么事情

第二步：这件事情应该在什么时候去做

网络接口

online：网络连通时触发offline：网络断开时触发

全屏接口

requestFullScreen： msRequestFullscreen(ie全屏)cancelFullScreen：取消全屏，这个方法属于 documentfullscreenElement：判断当前状态，是否处于全屏，如果是全屏可以拿到全屏的元素，如果不是返回的就是null通过不同的前缀来解决兼容问题

FileReader上传图片的使用

FileReader是一个构造函数

所以就可以new FileReader 可以得到一个实例对象

readAsText：读取txt文件

readAsBinaryString：读取任意类型文件

readAsDataURL：这个方法url资源读取到的文件会获取到data开头的一段字符串

result：会将读取成功之后的内容存到result上

onload：读取成功

逻辑分析：

我们什么时候要读取图片？ 当我们选择图片上传之后要读取，所以注册onchange事件既然要读图片，就应该要拿到要读取的图片，拿到之后进行读取 var fileImg = document.querySelector(“input”).files[0]在onchange事件函数内部读取图片，但是什么方法可以读取图片？ readAsDataURL()这个方法用来读取图片既然这个方法可以读取图片，怎么拿到这个方法? new FileReader() 得到实例对象，通过实例对象可以调用readAsDataURL(fileImg )最终读取成功之后的结果存到了实例对象的result上，那么我们什么时候可以拿到result，也就是读取成功之后 所以在onload（代表图片读取成功）方法里，拿到result的结果最终将读取的结果 设置到页面上img的的src

百度地图使用

找到你想要的效果，复制代码申请秘钥，并且使用秘钥开发文档》工具支持》坐标拾取器利用百度工具生成地图名片

sessionStorage和localStorage的使用

sessionStorage作用：将数据保存到本地，存储的容量5mb左右

sessionStorage.setItem():像本地存储数据，第一个参数：key（name），第二个参数：value（值）

sessionStorage.getItem():获取本地sessionStorage的数据，参数为key

sessionStorage.removeItem()：移除本地sessionStorage的某一个数据，参数为key

sessionStorage的特性：

关闭浏览器，数据就会自动清除数据不可以多页面共享

localStorage.setItem,localStorage.getItem,localStorage.removeItem用法和sessionStorage一模一样

存储的内容大概20mb但是在同一个浏览器的不同窗口中可以共享数据永久存储，只有卸载浏览器或者手动清除浏览器缓存才能清除

在开发中，使用localStorage更多一些

播放器案例

多媒体：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

常用方法： play() 播放、 pause() 暂停 、paused

Jq没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素

常用属性：

a) currentTime 视频播放的当前时间、

b) duration:视频的总时间 100000/60

c) paused:视频播放的状态.

常用事件：

a) oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。

b) ontimeupdate: 视频时间发生变化就会触发

c) onended:播放完时触发—重置

准备工作：因为我们要大量操作video，我们可以在全局声明一个变量，来存储video元素

var video = $('video')[0]

- 播放和暂停功能

给暂停播放按钮注册点击事件

在事件函数内部写逻辑：判断，如果当前状态为暂停，那么就播放，如果当前状态为播放，那么就暂停

video.paused 判断当前状态是否为暂停 是暂停 true 播放状态 false if(video.paused){ video.play(); /移除暂停样式，添加播放样式/ } else{ video.pause(); /移除播放样式，添加暂停样式/ }

toggleClass(“fa-play fa-pause”)；进行类名的切换 - 全屏功能

利用$拿到全屏按钮，给注册点击事件

在事件函数内部：video.requestFullScreen该方法可以让视频全屏，有兼容性，加前缀 if(video.requestFullScreen){ video.requestFullScreen(); } else if(video.webkitRequestFullScreen){ video.webkitRequestFullScreen(); } else if(video.mozRequestFullScreen){ video.mozRequestFullScreen(); } else if(video.msRequestFullscreen){ video.msRequestFullscreen(); }

- 视频显示和总时长处理 视频什么时候可以显示？ video.oncanplay = function(){ // 视频显示 video.style.display=“block”; } 怎么拿到视频的总时长？ var total = video.duration // 3680

问题：首先秒数，并且还有小数

格式化时分秒 var hour = Math.floor(total/3600); hour = hour<10? ‘0’+hour:hour

var minute = Math.floor(total600/60) minute=minute<10?"0"+minute:minute; var second=Math.floor(total`); second=second<10?"0"+second:second; var str = hour+':'+minute+':'+'second' $('.totalTime').html(str)

- 播放时，时间跟随变化，进度条跟随变化

视频播放的时候设置 时间跟随变化 ontimeupdate：时间发生变化会触发 在ontimeupdate事件函数中拿到当前的时间currentTime ，将当前时间格式化成时分秒 video.ontimeupdate = function(){ var current = video.currentTime var result = time(current) // 00:00:01 $(’.currentTime’).html(result) } 封装格式化时分秒的函数 function time(total){ var hour = Math.floor(total/3600); hour = hour<10? ‘0’+hour:hour

var minute = Math.floor(total600/60) minute=minute<10?"0"+minute:minute; var second=Math.floor(total`); second=second<10?"0"+second:second; return hour+':'+minute+':'+second }

让进度条跟随变化，其实就是视频播放的时候设置进度条的当前进度，实际进度条的进度=视频的当前播放进度 求：视频的当前播放进度 = 当前视频播放的时间/视频总时间 var percent = video.currentTime/video.duration 将进度转化为百分比 percent = percent *100+‘%’ 最终将得到的百分比设置给进度条的宽度 $(".elapse").css(“width”,percent);

实现视频的跳播和播放之后的设置