html5新特性--音頻視頻，拖放

標籤：ext   ide   efault   調用   mp4   targe   on()   not   app   

1.音頻

<audio controls>
<source src="aaa.ogg" type="audio/ogg">
<source src="bbb.mp3" type="audio/mpeg">
您的瀏覽器不支援 audio 元素。
</audio>

在<audio> 與 </audio> 之間插入瀏覽器不支援的<audio>元素的提示文本 。

<audio> 元素允許使用多個 <source> 元素. <source> 元素可以連結不同的音頻檔案，瀏覽器將使用第一個支援的音頻檔案

2.視頻

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支援Video標籤。
</video>

同時<video> 元素元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設定的高度和寬度，所需的視頻空間會在頁面載入時保留。。如果沒有設定這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再載入時保留特定的空間，頁面就會根據原始視頻的大小而改變。

3.拖放

var box1,box2,img
window.onload = function() {
　　box1 = document.getElementById("box1");
　　box2 = document.getElementById("box2");
　　box2.ondragstart = function (e){
　　　　drag(e);
　　}
　　box2.ondragover = function (e){
　　　　dragover(e);
　　}
　　box2.ondrop = function (e){
　　　　ondrop(e);
　　}
　　img = document.getElementById("img");
　　img.draggable = "false";
　　}
function drag (ev){
　　ev.dataTransfer.setData("img",img);
}
function dragover (ev){
　　ev.preventDefault();
}
function ondrop (ev){
　　ev.preventDefault();
　　var imgg = ev.dataTransfer.getData("img");
　　ev.target.appendChild(img);
}

設定元素為可拖放：

　　<img draggable="true">

規定當元素被拖動時，會發生什麼 - ondragstart 和 setData()

　　dataTransfer.setData() 方法設定被拖資料的資料類型和值

何處放置被拖動的資料 - ondragover

　　預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。

　　這要通過調用 ondragover 事件的 event.preventDefault() 方法：

　　event.preventDefault()

放置被拖資料 - ondrop

　　通過 dataTransfer.getData("Text") 方法獲得被拖的資料。該方法將返回在 setData() 方法中設定為相同類型的任何資料。

　　把被拖元素追加到放置元素（目標元素）中

html5新特性--音頻視頻，拖放