Learn HTML5 in three days-use of multimedia elements-

Multimedia is the most important part of the Internet. No matter what type of web pages, videos, or audios are accessible, it may be very painful for developers to implement these features before, the Object tag must be relied on to call third-party software for loading, such as Flash. If some devices do not support it ...,. Directory

1. HTML5 Media-Video

2. HTML5 Media-Audio

3. Drag and Drop Operations

4. Obtain Location Information

5. Use Google map to get location information

Multimedia is the most important part of the Internet. No matter what type of web pages, videos, or audios are accessible, it may be very painful for developers to implement these features before, the Object tag must be relied on to call third-party software for loading, such as Flash. If some devices do not support Flash, we will be helpless. However, the emergence of HTML5 makes multimedia web page development very simple and forms a new standard.

　　1. Use the Video element.

This section describes how to use the Video element in HTML5.

1. Prepare video resources

2. Create an HTML page

Create an HTML file named "external media.html" and enter the following content:

We can see that the video label contains "Controls". Adding this label can make the player toolbar visible. The Control bar is as simple as we usually see, including pause, play, stop, and other buttons.

Note:

Make sure that the video and html files are stored in the same directory. To store data in different directories, you must set the src attribute.

HTML5 Video only supports MP4, webm, 3gpp, m4v mpeg, ogg, quicktime, x-ms-wmvright.

Output:

　　2. Use scripts to control Video elements

1. Create an HTML page

Create an HTML page, and set the src attribute of the Video resource. In this section, the Controls attribute is not used for setting. JS code is used for implementation.

2. Add the play, pause, and sound adjustment buttons.

3. Create a JS function to control Video playback.

function PlayOrPause(){var v = document.getElementById('vid');if (v.paused || v.ended){v.play();document.getElementById('BtnPlay').value = "Pause";}else{v.pause();document.getElementById('BtnPlay').value = "Play";}}

If CurrentTime is set to 6, the video stops playing in the sixth second.

function Stop(){var v = document.getElementById('vid');v.pause();v.currentTime = 6;document.getElementById('BtnPlay').value = "Play";}

The following figure shows how to stop a video after it is played:

function End(){var v = document.getElementById('vid');v.pause();v.currentTime = v.duration;document.getElementById('BtnPlay').value = "Play";}

The following code controls the sound adjustment between 0 and 1:

function ChangeVolume(element){var v = document.getElementById('vid');v.volume = element.value;//For mute set it to 0}

Output:

　　3. Audio Elements

HTML5 makes it easy to load audio elements on pages.

1. Prepare audio Resources

2. Create an HTML page and enter the following content:

3. Output:

　4. Add audio elements using scripts

1. Create an HTML page

2. Add a playback, pause, and volume key.

3. Create a JS function to control audio playback. The Code is as follows:

Function PlayOrPause () {var v = document. getElementById ('audioctrl '); if (v. paused | v. ended) {v. play (); document. getElementById ('btnplay '). value = "Pause";} else {v. pause (); document. getElementById ('btnplay '). value = "Play" ;}}same as above, set to Stop playing in 6th seconds: function Stop () {var v = document. getElementById ('audioctrl '); v. pause (); v. currentTime = 6; document. getElementById ('btnplay '). value = "Play ";}

　5. Implementation of drag-and-drop operations

Previously, the drag-and-drop operation was implemented by the developer's custom logic. However, HTML5 provides the drag-and-drop API to simplify the implementation of the drag-and-drop operation.

1. Prepare resources (image resources)

2. Set the draggable attribute

3. Output

4. Implement a drag event

function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}

5. drog operation

Output:

The ondragover event specifies the dragged data.

function allowDrop(ev) {ev.preventDefault();}

The ondrop event is automatically called when the dragged element is released by the mouse.

function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));}

Output:

　　6. Complex drag-and-drop operations

Create an HTML page. The HTML & Css code is as follows:

Create the face

 
 

Output:

JS Code:

function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.effectAllowed = 'copy';ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");if (data.indexOf(ev.target.id) == -1) {ev.dataTransfer.clearData();}else {ev.target.appendChild(document.getElementById(data));}}

Run:

7. Obtain geographic location information

HTML5 can share location information, and its precision and dimensions can be captured by JS events and returned to the server for location in google Maps.

Initialization:

1. Create Geolocation.html on the html page;

2. Add page elements:

　　

JS Code: