一, 箭头函数中的this。 箭头函数的this的绑定取决于外层(函数或全局)作用域。 这次真碰上了,没注意就出Bug了。改为使用function创建函数。
二, 这个项目主要是了解HTML5中的<video>相关的属性和事件。
http://www.w3school.com.cn/jsref/dom_obj_event.asp
DOM video对象的属性和方法:http://www.w3school.com.cn/jsref/dom_obj_video.asp
三,使用absolute的定位,bottom为0,使得player__control脱离文档流,贴在播放器的底部。再加上translateY,使得 player__control 下移,但露出一点进度条。
.player__controls {
...
position: absolute;
bottom: 0;
transform: translateY(100%) translateY(-5px);
}
父元素player中加入下面这个,使得下移后不会露出来。overflow:hidden还可以用于清除包含块内子元素的浮动。
.player{
...
overflow: hidden;
}
下面这条让鼠标在player内时, player__controls回来
.player:hover .player__controls { transform: translateY(0);}
鼠标在画面外
鼠标在画面内
四, HTML的全局属性记一下。 全局属性可用于任何 HTML 元素
HTML 全局属性
属性 | 描述 |
---|---|
accesskey | 规定激活元素的快捷键。 |
class | 规定元素的一个或多个类名(引用样式表中的类)。 |
contenteditable | 规定元素内容是否可编辑。 |
contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
data-* | 用于存储页面或应用程序的私有定制数据。 |
dir | 规定元素中内容的文本方向。 |
draggable | 规定元素是否可拖动。 |
dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
hidden | 规定元素仍未或不再相关。 |
id | 规定元素的唯一 id。 |
lang | 规定元素内容的语言。 |
spellcheck | 规定是否对元素进行拼写和语法检查。 |
style | 规定元素的行内 CSS 样式。 |
tabindex | 规定元素的 tab 键次序。 |
title | 规定有关元素的额外信息。 |
translate | 规定是否应该翻译元素内容。 |
DOM Event 对象
事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。
属性 | 此事件发生在何时… |
---|---|
onabort | 图像的加载被中断。 |
onblur | 元素失去焦点。 |
onchange | 域的内容被改变。 |
onclick | 当用户点击某个对象时调用的事件句柄。 |
ondblclick | 当用户双击某个对象时调用的事件句柄。 |
onerror | 在加载文档或图像时发生错误。 |
onfocus | 元素获得焦点。 |
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
onload | 一张页面或一幅图像完成加载。 |
onmousedown | 鼠标按钮被按下。 |
onmousemove | 鼠标被移动。 |
onmouseout | 鼠标从某元素移开。 |
onmouseover | 鼠标移到某元素之上。 |
onmouseup | 鼠标按键被松开。 |
onreset | 重置按钮被点击。 |
onresize | 窗口或框架被重新调整大小。 |
onselect | 文本被选中。 |
onsubmit | 确认按钮被点击。 |
onunload | 用户退出页面。 |
鼠标 / 键盘属性
属性 | 描述 |
---|---|
altKey | 返回当事件被触发时,”ALT” 是否被按下。 |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 |
ctrlKey | 返回当事件被触发时,”CTRL” 键是否被按下。 |
metaKey | 返回当事件被触发时,”meta” 键是否被按下。 |
relatedTarget | 返回与事件的目标节点相关的节点。 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 |
shiftKey | 返回当事件被触发时,”SHIFT” 键是否被按下。 |