HTML5 new features-Audio video, drag-and-drop

1. Audio

<audio controls>
<source src= "Aaa.ogg" type= "Audio/ogg" >
<source src= "Bbb.mp3" type= "Audio/mpeg" >
Your browser does not support the audio element.
</audio>

Insert prompt text for <audio> elements that the browser does not support between <audio> and </audio>.

The <audio> element allows multiple <source> elements to be used. <source> elements can link different audio files, the browser will use the first supported audio file

2. Video

<video width= "height=" controls>
<source src= "Movie.mp4" type= "Video/mp4" >
<source src= "Movie.ogg" type= "Video/ogg" >
Your browser does not support the video tag.
</video>

The <video> element element also provides the width and Height properties to control the size of the video. If you set the height and width, the required video space is retained when the page loads. If you do not set these properties and the browser does not know the size of the video, the browser will not be able to load a specific space, the page will vary depending on the size of the original video.

3. Drag and Drop

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

To set the element to be drag and drop:

Specifies what happens when an element is dragged-ondragstart and SetData ()

The Datatransfer.setdata () method sets the data type and value of the dragged data

Where to place dragged data-ondragover

By default, data/elements cannot be placed in other elements. If you need to set allow placement, we must block the default handling of elements.

This is done by calling the Event.preventdefault () method of the OnDragOver event:

Event. Preventdefault ()

Place dragged data-ondrop

The dragged data is obtained by means of the Datatransfer.getdata ("Text") method. The method returns any data that is set to the same type in the SetData () method.

Appends the dragged element to the placement element (the target element)

HTML5 new features-Audio video, drag-and-drop