html音乐拖动事件,HTML 5 基础之 video audio 拖动

html5视频video：

当前video支持三种视频格式：

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件  目前firefox 3.5+，Opera 10.5+，Chrome 5.0+ 支持该格式

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 目前IE9.0+，Chrome5.0+，Safari 3.0+支持该格式

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件   目前Firefox 4.0+，Opera 10.6+，Chrome6.0+支持该格式

也就是说目前Chrome 6.0+以上版本对以上格式都是支持的，IE只支持MPEG4格式还是得需要9.0以上版本，与IE走相同支持路线的就是Safari在3.0以上版本也仅支持MPEG4

Firefox和Opera走的是相同路线，没有对MPEG4的支持，但是分别支持了Ogg格式和WebM格式

总结来说：

操作系统自带的浏览器支持的是MPEG 4

做搜索的巨头造的浏览器全面支持

第三方浏览器Firefox和Opera不支持MPEG 4

在html5 中显示视频非常简单只需在代码中添加：

或者：

Your browser does not support the video tag.

上面的controls熟悉供添加播放，暂停和音量控件

和之间的内容是供不支持video元素的浏览器显示的

其次还可以制定video的宽度和高度：

Your browser does not support the video tag.

为了适配多个浏览器，可猜测在和做适配，浏览器将使用第一个可识别的格式：

Your browser does not support the video tag.

video结合DOM可以良好的对video进行控制，可以直接在

找到video控件后，可以使用其方法进行播放，暂停操作，如if(videotest.paused){videotest.paly()},就是通过属性判断可以使用其属性pause如果是暂停

状态的话，调用起play()方法进行播放。

HTML5 音频audio:

对于audio的支持，html5 也提供了支持，也是支持三种格式：

Ogg Vorbis

MP3

Wav

对于三种的支持基本还是遵从视频的规律，唯一不同的就是Chrome3.0还不支持Wav而Safari却在3.0的时候对Wav格式进行了支持。这样一对比就相当好记了，但是真心

不晓得记这个有什么用尼？ =_ =!(考试综合症)

html5播放音频和视频的代码也相似，只是标签改了一下下而已：

control属性还是用于添加播放、暂停和音量控件。

控件直接内容还是供不支持audio元素的浏览器显示的辅助。标签之间同意允许多个source元素，source元素可以连接不同的音频文件，浏览器还是

使用第一个可识别的格式：

Your browser does not support the audio tag.

HTML5 拖放:

在HTML5 中拖放是标准的一部分，任何元素都能够拖放。

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

不用想必须是跟JavaScript结合完成的动作

首先为了使元素可以拖动，把draggable属性设置为true

拖动什么 ondragstart和setData()

function drag(ev){

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

}

dataTransfer.setData()方法用来设置被拖放数据的类型和值

表示数据类型是"Text" 值是可拖动元素的id("drag1")

放到什么地方-ondragover

ondragover事件规定在何处放置被拖动的数据。

默认情况下，如法将数据、元素放置到其他元素中，如果需要设置允许方法，必须阻止对元素默认的处理方式。

通过对目标控件调用ondragover事件的event.preventDefault()方法：

event.preventDefault();

进行放置 - ondrop

放置被拖动数据时，该事件会在目标控件上发生，也就说要对目标控件设置ondrop属性

function drop(ev){

ev.preventDefault();

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

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

}

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

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

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

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

综合上述，被拖动和要拖动到的元素应该在html中这样写：

被拖动元素：

拖动到的目标元素：

JavaScript这样写：

//被拖动时触发，用来设置要拖放的数据类型(文本类型)和值(控件的id)

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));

}

对数据的放置和获取使用的ev.dataTransfer.getData("Text") 获取数据，参数是数据的类型

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