HTML5中video audio拖動(dòng)的方法

這篇文章主要介紹“HTML5中video audio拖動(dòng)的方法”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“HTML5中video audio拖動(dòng)的方法”文章能幫助大家解決問題。

html5視頻video：

當(dāng)前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+以上版本對(duì)以上格式都是支持的，IE只支持MPEG4格式還是得需要9.0以上版本，與IE走相同支持路線的就是Safari在3.0以上版本也僅支持MPEG4

Firefox和Opera走的是相同路線，沒有對(duì)MPEG4的支持，但是分別支持了Ogg格式和WebM格式

總結(jié)來說：

 操作系統(tǒng)自帶的瀏覽器支持的是MPEG 4

 做搜索的巨頭造的瀏覽器全面支持

 第三方瀏覽器Firefox和Opera不支持MPEG 4

在html5 中顯示視頻非常簡單只需在代碼中添加：

<video src="/i/moive.ogg" controls="controls"></video>

或者：

<video controls="controls">

  <source src="/i/moive.ogg" type="video/ogg"/>

 Your browser does not support the video tag.

</video>

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

<video>和</video>之間的內(nèi)容是供不支持video元素的瀏覽器顯示的

其次還可以制定video的寬度和高度：

<video width="320" height="240" controls="controls">

  <source src="/i/moive.ogg" type="video/ogg"/>

 Your browser does not support the video tag.

</video>

為了適配多個(gè)瀏覽器，可猜測在<video>和</video>做適配，瀏覽器將使用第一個(gè)可識(shí)別的格式：

<video width="320" height="240" controls="controls">

  <source src="movie.ogg" type="video/ogg">

  <source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

video結(jié)合DOM可以良好的對(duì)video進(jìn)行控制，可以直接在<script>標(biāo)簽中使用var videotest = document.getElementById("video_name");

找到video控件后，可以使用其方法進(jìn)行播放，暫停操作，如if(videotest.paused){videotest.paly()},就是通過屬性判斷可以使用其屬性pause如果是暫停

狀態(tài)的話，調(diào)用起play()方法進(jìn)行播放。

HTML5 音頻audio:

對(duì)于audio的支持，html5 也提供了支持，也是支持三種格式：

Ogg Vorbis

MP3

Wav

對(duì)于三種的支持基本還是遵從視頻的規(guī)律，唯一不同的就是Chrome3.0還不支持Wav而Safari卻在3.0的時(shí)候?qū)av格式進(jìn)行了支持。這樣一對(duì)比就相當(dāng)好記了，但是真心

不曉得記這個(gè)有什么用尼？ =_ =!(考試綜合癥)

html5播放音頻和視頻的代碼也相似，只是標(biāo)簽改了一下下而已：

<audio src="song.ogg" controls="controls"></audio>

control屬性還是用于添加播放、暫停和音量控件。

<audio></audio>控件直接內(nèi)容還是供不支持audio元素的瀏覽器顯示的輔助。標(biāo)簽之間同意允許多個(gè)source元素，source元素可以連接不同的音頻文件，瀏覽器還是

使用第一個(gè)可識(shí)別的格式：

<audio controls="controls" autoplay="autoplay" loop="loop">

<source src="song.ogg" type="audio/ogg"/>

<source src="song.mp3" type="audio/mp3"/>

Your browser does not support the audio tag.

</audio>

HTML5 拖放:

在HTML5 中拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。

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

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

不用想必須是跟JavaScript結(jié)合完成的動(dòng)作

首先為了使元素可以拖動(dòng)，把draggable屬性設(shè)置為true

<img id="drag1" draggable="true" />

拖動(dòng)什么 ondragstart和setData（）

<img id="drag1" draggable = "true" ondragstart="drag(event)" src="/i/img_logo.gif"/>

function drag(ev){

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

}

dataTransfer.setData()方法用來設(shè)置被拖放數(shù)據(jù)的類型和值

表示數(shù)據(jù)類型是"Text" 值是可拖動(dòng)元素的id("drag1")

放到什么地方-ondragover

ondragover事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。

默認(rèn)情況下，如法將數(shù)據(jù)、元素放置到其他元素中，如果需要設(shè)置允許方法，必須阻止對(duì)元素默認(rèn)的處理方式。

通過對(duì)目標(biāo)控件調(diào)用ondragover事件的event.preventDefault()方法：

event.preventDefault();

進(jìn)行放置 - ondrop

放置被拖動(dòng)數(shù)據(jù)時(shí)，該事件會(huì)在目標(biāo)控件上發(fā)生，也就說要對(duì)目標(biāo)控件設(shè)置ondrop屬性

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"/>

function drop(ev){

 ev.preventDefault();

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

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

}

調(diào)用preventDefault()來避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop事件的默認(rèn)處理行為是以鏈接式打開）

通過dataTransfer.getData("Text")方法獲得被拖動(dòng)的數(shù)據(jù)，該方法將返回在setData（）方法中設(shè)置為相同類型的任何數(shù)據(jù)

被拖數(shù)據(jù)是被拖元素的id（"drag1"）

把被拖元素追加到放置元素的目標(biāo)中

綜合上述，被拖動(dòng)和要拖動(dòng)到的元素應(yīng)該在html中這樣寫：

被拖動(dòng)元素：

<img id="img_drag" src="/i/img_logo.gif" draggable="true" ondragstart="drag(event)"/>

拖動(dòng)到的目標(biāo)元素：

<div id="div_dest" ondrop="drop(event)" ondragover="allowDrop(event)"/>

JavaScript這樣寫：

//被拖動(dòng)時(shí)觸發(fā)，用來設(shè)置要拖放的數(shù)據(jù)類型（文本類型）和值（控件的id）

<script type="text/javascript">

function drag(ev){

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

}

//對(duì)目標(biāo)元素的默認(rèn)放置事件進(jìn)行處理

function allowDrop(ev){

 ev.preventDefault();

}

//放到目標(biāo)位置的時(shí)候，將拖動(dòng)的數(shù)據(jù)添加到目標(biāo)位置

function drop(ev){

 ev.preventDefault();

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

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

}

</script>

對(duì)數(shù)據(jù)的放置和獲取使用的ev.dataTransfer.getData("Text") 獲取數(shù)據(jù)，參數(shù)是數(shù)據(jù)的類型

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

關(guān)于“HTML5中video audio拖動(dòng)的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。