从零开始学 Web之HTML5(四)拖拽接口,Web存储,自定义播放器

大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新……

github:https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN:https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、拖拽接口

元素拖拽事件:

:应用于拖拽元素,整个拖拽过程都会持续调用;

:应用于拖拽元素,当拖拽开始时调用;

:应用于拖拽元素,拖拽过程中,当鼠标离开拖拽元素范围时调用;

:应用于拖拽元素,当拖拽结束时调用。

目标拖拽事件:

:应用于目标元素,当拖拽元素进入时调用;

:应用于目标元素,当停留在目标元素上时调用;

:应用于目标元素,当在目标元素上松开鼠标时调用;

:应用于目标元素,当鼠标离开目标元素时调用。

示例:将一个div中的p标签拖拽到另一个p标签中

1、被拖拽的元素必须添加 属性。

2、浏览器默认会阻止目标元素的 ondrop 事件:我们必须在目标元素的 ondragover 中阻止浏览器的默认行为(使用事件参数对象的 方法),才能将拖拽的元素放到目标元素中。

遗留问题:如果有多个 div,那么每个 div 都必须写 ondragover 和 ondrop 事件触发的处理函数,也就是只能拖拽指定的元素到指定的元素中,这样代码的可用性就很低了。

分析问题:既然有多个被拖拽元素和多个目标元素存在,这些元素都存在于 document 中的,那么可不可以给 document 添加这些事件呢?

答案是可以的。

在事件参数对象中有一个 target 属性,其值为被拖拽的元素对象。

问题解决了,但是,又是但是……,但是一般少使用全局变量,全局变量谁都可以修改,容易误操作。

在事件参数对象中有一个 属性,通过 来实现数据的存储与获取。

dataTransfer 有两个方法:

用于存储数据;

(取出数据必须在目标元素的 ondrop 事件中,其他事件中无法取到数据)

format:数据的类型: ,

Data:数据:一般来说是字符串值

二、Web存储

用户在浏览网页的时候,可能需要存储一些数据在本地,之前是采用 Cookie 的方式存储,但是 Cookie 只能存储大小为 4k 以内的数据,再多的数据就存储不了。并且 Cookie 的解析也是很复杂的。

到了h5阶段,又提供了两种方式来存储 web 数据:sessionStorage 和 localStorage。

1、sessionStorage

sessionStorage的使用:将存储数据到本地。存储的容量5MB左右。

注意:sessionStorage 的存储特点:

这个数据本质是存储在当前页面的内存中,意味着其它页面和浏览器无法获取数据。

它的生命周期为关闭当前页面时,数据会自动清除。

提供的方法:

setItem(key,value):存储数据,以键值对的方式存储,

getItem(key):获取数据,通过指定名称的key获取对应的value值,

removeItem(key):删除数据,通过指定名称key删除对应的值,

clear():清空所有存储的内容。

示例:

1、获取数据的时候,如果找不到对应名称的 key,那么获取的值为 null。

2、删除数据的时候,如果 key 值错误,不会报错,但是也不会删除数据。

2、localStorage

localStorage的使用:

存储的内容大概20MB大小

不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据;

永久生效,它的数据是存储在硬盘上,并不会随着页面或者浏览器的关闭而清除。如果想清除,必须手动清除

:存储数据,以键值对的方式存储

:获取数据,通过指定名称的key获取对应的value值

:删除数据,通过指定名称key删除对应的值

:清空所有存储的内容

示例:

三、自定义播放器

我们知道不同的浏览器的音频视频的播放器控件显示样式有差异,那么我们怎么做一个在任何浏览器下都有相同样式的播放器呢?

常用方法

加载,

播放,

暂停。

注意:jQuery中没有提供对视频播放控件的方式,所以如果使用jQuery操作元素,必须将其转为原生 js 的方式来调用这些方法。

常用属性

:视频播放的当前进度

:视频的总时长

:视频播放的状态

常用事件

:事件在用户可以开始播放视频/音频时出触发

:通过该事件报告当前的播放进度

:播放完时触发

示例代码:

1、视频控制器中的播放暂停按钮和全屏按钮都是来自在线字体图标 font-awesome。

2、进度条一栏实际上有4层,处理可以看到的总时长,缓存时长,播放时长外还有一个最顶层的透明层,用于点击进度条实现跳变功能。

欢迎关注

Web前端之巅

念念不忘,必有回响。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180729G18FZJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券