html video拖放设置,HTML5新特性以及video和audio标签和拖放笔记

新特性

用于绘画的canvas元素

用于媒介回访的video和audio元素

对本地离线存储更好的支持

新的特殊内容元素 article footer header nav section

新的表单控件 calendar date time email url search

video标签

src是视频源文件路径

control提供了播放暂停的音量控件

autoplay会自动播放preload会在页面加载时进行加载预备播放,若使用autoplay则会忽略该属性

loop循环播放

height和width分别是播放器的高和宽

type可以指定视频的文件格式,例如:video/mp4,safari必须是mpeg4类型,ie8不支持video元素,ie9中也必须是mpeg4格式的视频

在和中间的文本,类似img标签的alt属性,当浏览器不支持该标签的时候则会显示这些文字.

video-DOM

可以使用document.getElementById()来通过id获取标签,然后调用其方法.

w3c上调用了play()和pause()方法来控制播放和暂停,使用了paused属性判断播放器是否处于暂停状态,还使用了width和height属性来控制播放器窗口的宽高.

所以可以使用DOM来控制video属性.

audio

HTML5规定了audio元素来控制音频的播放.

audio元素类似video元素

拖放

HTML5中任何元素都能够拖放

为了使元素可以被拖放,首先需要设置其darggable属性为true,让元素支持拖放.

当元素被拖动时ondragstart属性会调用一个指定的方法,方法中通常传入拖动事件,然后通过事件的dataTransfer.setData()方法设置被拖动的数据类型和值.可以使用事件的target.id属性获取值.

使用ondragover属性将元素放到其他元素中,若需要设置允许放置e,必须阻止对元素的默认处理方式.通过调用ondragover事件的event.preventDefault()方法来实现.

使用ondrop进行放置

被拖动的元素需要设置id

JOE

#div1{

border: 1px solid #aaaaaa;

/*width: 20%;*/

height: 100px;

float: left;

padding: 60px;

}

#div2{

border: 1px solid #aaaaaa;

/*width: 20%;*/

height: 100px;

float: left;

margin-left: 40px;

padding: 60px;

}

function drag(ev) {

ev.dataTransfer.setData("Text", ev.target.id);

}

function allowDrop(ev) {

ev.preventDefault();

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

请把图片拖入到矩形中

w3c对拖放的标注:

调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素(目标元素)中