H5新增的标签以及属性 2

video以及audio标签的使用 也就是视频与音频

video标签默认为inline-block，宽高默认为300*150

属性：
autoplay 自动播放  不过在谷歌中不能自动播放，除非你设置静音 muted
controls 是否显示播放控件

currentTime 播放到的当前时间

duration 影片的总时长
ended 是否播放到结尾了
loop 是否循环播放
paused 当前是否处于暂停状态

preload 预加载 

 auto 视频的宽高 时长  第一帧的 内容   并且缓冲一定的时长

metadata :  视频的宽高 时长  第一帧的 内容

none:不预加载任何内容

不过如果已经设置了autoplay则忽略此属性

方法：

play()开始播放
pause()暂停播放

draggable 可拖拽属性的使用

拖拽的声明周期：
1、拖拽开始
2、拖拽进行中
3、拖拽结束
拖拽的组成
被拖拽的物体
目标区域

<div class="draggable-box" draggable = "true" ></div>这是一个可拖动的div

<div class="target"></div> 这是我们要拖动过去的目标

首先我们得拿到拖拽得标签

var oDragDiv = document.getElementsByClassName("draggable-box")[0]；

然后通过事件对象来操作

oDragDiv.ondragstart = function (e) {} 在开始移动的时候触发的事件

oDragDiv.ondrag = function (e){}  在移动中出发的事件

目标元素的事件

var oDragTarget = document.getElementsByClassName('target')[0]

oDragTarget.ondragenter = function (e) {}  拖拽元素进入目标元素时触发，当鼠标进入时才触发

oDragTarget.ondragover = function(e) {

e.preventDefault();//在这个事件中应该添加拖拽事件的结束，这样被拖拽过来的元素便不会回到原位

} 在目标元素中移动中触发

oDragTarget.ondragleave = function (e) {} 离开目标元素时触发

oDragTarget.ondrop = function (e) {}  移动的元素从目标元素中离开以后触发