Html5多媒体标签与拖拽

1.多媒体标签

1.音频：

controls属性：属性值与属性名同。可以省略。控制显浏览器默认控制条。

常用方法：play()播放视频音频方法 

      pause() 暂停播放 

      load() 重新加载文件

      anPlayType(type)  判断是否可播放该类型的音频、视频。返回值：probably：支持播       放 maybe：可能支持 字符串：不支持播放

2.视频：
controls属性：属性值与属性名同。可以省略。控制显示默认控制条。

source标签：用来指定多个音频或视频文件源。

属性

currentTime 返回播放器正在播放音频、视频当前所处时间点。单位：秒
duration 返回音频或视频的持续时间。单位：秒
ended 返回boolean值。表示播放是否结束
muted 返回boolean值。表示是否处于静音状态
paused 返回boolean值。表示是否处于暂停状态
startTime 返回播放器播放音频、视频的开始时间。通常为0，（不可修改）
volume 返回播放器的音量。

2.拖拽放

拖 默认可以在浏览器上可以拖动的元素有和标签

draggable 属性：其他元素该属性值为true，则可被拖动。

dropElement.ondragover = function(evt){
	//设置可接受元素拖入
	evt.preventDefault();

}

chrome：可直接显示拖动效果
Firefox：需要为ondragstart事件指定监听器，携带数据，才能显示拖动效果。

放

Dragelement.ondragstart = function(evt){
	   //设置元素拖动时携带的数据                                              

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

放置

Dropelement.ondrop = function(evt){
	//阻止默认方式
	evt.preventDefault();
	//获取到携带的数据并显示到页面上   	

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

evt.target.appendChild(document.getElementById(data));
}