Use of multimedia elements

Directory

1. HTML5 Media-video

2. HTML5 Media-audio

3. Drag and drop operation

4. Get location information

5. Get location information using Google Maps

Multimedia is the most important part of the Internet, no matter what type of Web page is accessed, video or audio is at your fingertips, it may be very painful for developers to implement these features before, and must rely on the Object tag, invoking third-party software to load, such as flash, if some devices do not support flash , we are helpless. But the advent of HTML5 makes the development of multimedia Web pages extremely simple, and also forms a new standard.

1. Use the video element.

Learn how to use the video element in HTML5 in this section

1. Prepare video Resources

2. Create an HTML page

Create a new HTML and name "Media.html" and enter the following:

<video controls width="500px" id="vid" ><source src="  vid.mp4"/></video> 

As you can see, the video tag contains "Controls", which you can add to make the Player toolbar visible. The Control bar is as simple as what we normally see, with buttons that pause, play, stop, and so on.

Attention:

Make sure that the video and HTML files are stored in the same directory. If you want to place in a different directory, you need to set the SRC attribute.

The HTML5 Video element only supports MP4,WEBM,3GPP,M4V Mpeg,ogg, quicktime,x-ms-wmvright format.

Output:

2. Using scripts to control video elements

1. Create an HTML page

The new HTML page "media01.html" sets the video resource src attribute. This section does not use the Controls property to set, using the JS code to implement.

<video width="500px" id="vid" ><source src="   vid.mp4"/></video>

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

<input type="button" name=value="Play" id="Btnplay"/><input type="button" Name=  value="Stop" id="Btnstop"/><input type="button" name=value="End" id="Btnend"/ ><input type="range" name=value="0.1" min= "0" max="1" step="0.1" id=" Slidevolume "/>                

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 ')." Pause ";} else{v.pause (); document.getElementById (' Btnplay ')." Play ";}}      

Setting CurrentTime to 6 indicates that the video stops playing at the sixth second.

function Stop () {  var v = document.getElementById (' vid ');  V.pause ();  V.currenttime = 6;  document.getElementById (' Btnplay ')." Play ";}  

The following is the setting to stop playback after the video playback is complete:

function End () {  var v = document.getElementById (' vid ');  V.pause ();  V.currenttime = v.duration;  document.getElementById (' Btnplay ')." Play ";}  

The following code controls the sound adjustment to 0-1:

function Changevolume (Element) {  var v = document.getElementById (' vid ');  V.volume = element. value; //for Mute set it to 0}  

Output:

3. Audio element

HTML5 makes it very easy to load audio elements in a page.

1. Preparing Audio Resources

2. Create a new HTML page and enter the following:

<audio id="Audctrl" Controls><source src="Aud.mp3" type="Audio/mp3"/></audio> 

3. Output:

4. Adding audio elements using a script

1. Create a new HTML page

<audio id="Audctrl" >        <source src="Aud.mp3" type="Audio/mp3"/></audio>  

2. Add play, pause and volume keys

<innput type="button" name=value="Play" id="Btnplay"/><input type="button" Name=  value="Stop" id="Btnstop"/><input type="button" name=value="End" id="Btnend"/ ><input type="range" name=value="0.1" min= "0" max="1" step="0.1" id=" Slidevolume "/>                

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

function Playorpause () {  var v = document.getElementById (' Audctrl ');  if (v.paused | | v.ended)  {    v.play ();    document.getElementById (' Btnplay ')." Pause ";   }   else {v.pause (); document.getElementById (' Btnplay ')." Play "; }}

Above, set to stop playing in the 6th second:

function Stop () {  var v = document.getElementById (' Audctrl ');  V.pause ();  V.currenttime = 6;  document.getElementById (' Btnplay ')." Play ";}  

5. Implementation of drag-and-drop operation

Previously, the implementation of the drag-and-drop operation was implemented by the developer's custom logic, but HTML5 provides a drag-and-drop API that makes the implementation of the drag-and-drop operation so simple.

1. Preparing resources (picture resources)

2. Setting the Draggable Property

<img src="fish.png" style="width:179px;height:120px;top:200px;" draggable="true" id="Img11" ondragstart="Drag (Event)"/>    

3. Output

4. Implementing the Drag Event

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

5. Drog operation

<div id= "Div1" class= "bowl" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div>

Output:

The OnDragOver event develops dragged data.

function AllowDrop (EV) {Ev.preventdefault ();}

The OnDrop event is automatically invoked 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 operation implementation

Create a new HTML page with HTML & CSS code as follows:

<style>        Body {            cursor:pointer;            Text-align:center;        }        . Divdrag {            position:relative;            border:0px solid Rgba (0, 0, 0,.);            width:300px;            height:300px;            padding:10px 10px10px10px;            float:left;        }        . Face {            Background-image:url (' face.jpg ');            Background-repeat:no-repeat;            width:424px;            height:510px;            BORDER:1PX dotted grey;            padding:0 0 0 0;        }. Facetr td {            text-align:center;            border:1px dotted #f7ecec;        } </style> 

class="Divdrag" > <img src="Eye1.png" alt="Eye" draggable="True" id="Eye1" ondragstart="Drag (Event)"/> <img src="Eye2.png" alt="Eye" draggable="True" id="Eye2" ondragstart="Drag (Event)"/> <img src="Nose2.png" alt="Nose" draggable="True" id="Nose2" ondragstart="Drag (Event)"/> <img src="Eye4.png" alt="Eye" draggable="True" id="Eye4" ondragstart="Drag (Event)"/> <img src="Nose1.png" alt="Nose" draggable="True" id="Nose1" ondragstart="Drag (Event)"/> <img src="Eye3.png" alt="Eye" draggable="True" id="Eye3" ondragstart="Drag (Event)"/> <img src="Smile1.png" alt="Smile" draggable="True" id="Smile1" ondragstart="Drag (Event)"/> <img src="Smile3.png" alt="Smile" draggable="True" id="Smile2" ondragstart="Drag (Event)"/> <img src="Smile2.png" alt="Smile" draggable="True" id="Smile3" ondragstart=Drag (event)/> </div> <div style="Float:left;" > <a href="Dragndrop.html" title="Click here to reset" style="Text-decoration:none;" > <img src="Direction.png" width="Height=""Onclick="""/> </a> </div> <div id="Div1" style="Width:300px;height:300px;float:left;" > <tableclass="Face" > <tr> <td colspan="2" style="width:100%;" >&nbsp;</td> </tr> <tr> <td colspan= "2" Style= "width:100%;" >&nbsp;</td> </tr> <tr> <td id= "eye" Style= "width : 50% "Ondrop= "eye" Style= "width:50%" Ondrop= "AllowDrop (event)" ></td> </tr> <tr> <td id= "Nose" Ondrop= "AllowDrop (event)" colspan=  "2" ></td> </tr> <tr> <td id= "Smile" ondrop=  "2" ></td> </tr> </table> </div>         

Output:

JS Code:

function AllowDrop (EV) {Ev.preventdefault ();} function drag (EV) {  ' 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. Access to geo-location information

HTML5 can share location information, and both precision and dimensions can be captured and returned to the server via the JS event to locate in Google Maps.

Initialization

1. Create HTML page geolocation.html;

2. Add a page element:

<input type= "button" value= "Get My location"/>

JS Code:

<script Type=&rdquo;text/javascript&rdquo;>var x = document.getElementById ("Lbldisplay"); function getLocation () {document.getElementById ("Header").Value ="Static location";if (navigator.geolocation) {var opt = {timeout:6000, maximumage:60000, Enablehighaccuracy:True}; Navigator.geolocation.getCurrentPosition (showposition, Errorcallback, opt); }else {alert (' No support for Geolocation ')}} function showposition (position) {x.innerhtml = "Latitude:" + Position.coords.latitude + "Longitude:" + position.coords.longitude;} function Errorcallback (e) { switch (e) {case e.permission_denied:x.innerhtml = "User DENIED geolocation requ EST "; Break ; Case e.position_unavailable:x.innerhtml = "No POSITION information available"; Break ; Case e.timeout:x.innerhtml = "TIMEOUT occured"; Break ; Case e.unknown_error:x.innerhtml = "UNKNOWN ERROR"; Break ;} }</script>                

Perform:

How do I implement custom update location information?

1. Initialization

<input type=value="Get My location Updated"/> 

2. JS Code

Varwatchid;function getupdatedlocation () {  document.getElementById ("header")." Dynamic location ";  if (navigator.geolocation) {    var opt = {                timeout:500,                maximumage:1000,                True              };   Watchid = Navigator.geolocation.watchPosition (showposition, Errorcallback, opt);  }   //no native support; maybe try a fallback?}}    

Continuously Update location information

JS Code:

function Stopupdatinglocation () {   if (navigator.geolocation) {   navigator.geolocation.clearWatch (watchid);  }}

Output:

7. Using Google Maps

1. Create an HTML page

2. Add a reference to Google Maps

<script src= "Http://maps.google.se/maps/api/js?sensor=false" ></script>

3. Add a DIV element and load the map

<div id= "Divmap" style= "border:1px solid #ffd800; width:400px;height:400px;" ></div>

4. Add a click button to load the map and enter the destination

5. JS Code:

<script type="Text/javascript" >function getmydirection () {if (navigator.geolocation) {var opt = {timeout:500, maximumage:1000, Enablehighaccuracy:True};      Navigator.geolocation.getCurrentPosition (showposition, Errorcallback, opt); }else {alert (' No support for geolocation '); }}function showposition (position) {Showinmap (position.coords.latitude, position.coords.longitude);} function Showinmap (lat, lang) {vardirectionsservice =New Google.maps.DirectionsService (); Vardirectionsrenderer =New Google.maps.DirectionsRenderer (); var route = {Origin:New Google.maps.LatLng (lat, lang), Destination:document.getElementById (' Txtdestination ').Value, TravelMode:google.maps.DirectionsTravelMode.DRIVING}; Varmapoptions = {zoom:10, center:New Google.maps.LatLng (50.8504500, 4.3487800), MapTypeId:google.maps.MapTypeId.ROADMAP}; var map =New Google.maps.Map (document.getElementById ("Divmap"), mapoptions); Directionsrenderer.setmap (map); Directionsrenderer.setpanel (document.getElementById ("Divdrivedirection")); Directionsservice.route (route, function (result, status) { if (status = = = Google.maps.DirectionsStatus.OK) { Directionsrenderer.setdirections (result); } });} function Errorcallback (e) { switch (e) {case e.permission_denied:x.innerhtml = "User DENIED geolocation requ EST "; Break ; Case e.position_unavailable:x.innerhtml = "No POSITION information available"; Break ; Case e.timeout:x.innerhtml = "TIMEOUT occured"; Break ; Case e.unknown_error:x.innerhtml = "UNKNOWN ERROR"; Break ;}} </script>              

Run:

Plane ticket:http://www.cnblogs.com/powertoolsteam/p/5207818.html

Use of multimedia elements