Brand new <video> tag in HTML5

Brand new <video> tag in HTML5

The <video> tag in HTML5 is creative solution to embed or show vieo contents in a webpage. This <video> tag outdates the use of plug-ins such as flash player for showingup video. Let me explain some brief

To simply show a video

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

a full code with play/pause control

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center">
  <button onclick="playPause()">Play/Pause</button>
    <br>
  <video id="video1" width="420">
    <source src="pon_movie.mp4" type="video/mp4">
    <source src="pon_movie.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

<script>
var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
  myVideo.play();
else
  myVideo.pause();
}

</script>
</body>
</html>

7 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Hello,

Thanks for your post. In fact, I have a question:

Does HTML 5 support only the .mp4 and the .ogg files to play the video?

Hello Mr. Karray

mp4, webm and ogg are the supportable file extensions. The interesting thing is that if the browser developers such as opera, google chrome workout they can include other extensions too. I also summarize some of browsers and their respective supportive extensions

Internet Explorer 9+ and safari5++ :mp4

Chrome 6+: mp4, webm and ogg

firefox 3.6+ and opera10.6+: webm and ogg

=================

Quote:

karray G. wrote:

Hello,

Thanks for your post. In fact, I have a question:

Does HTML 5 support only the .mp4 and the .ogg files to play the video?

And just to make our lives simpler the order in which you will list the files may affect the browsers' ability to play them, especially with mobile devices as we've recently found out (painfully) on a project.

Software for Smart Companies

Hi, be recalled that isn't need install flash plugin for run this videos

JudLup Luna

Thank you for the above. Am working on a mobile app using HTML5. My problem has come to connecting login and signup user details to Mysql database. Hep me now since I got one on this site but I can't see the actual database or where exaxtly does Html5 create its database??.http://www.tutorialspoint.com/html5/html5_web_sql.htm

Infact here is the code for the HTML5 web script for database connection for quick trial.It works on Opera,Chrome and safari but not well on firefox yet am using firefox. Try out.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
  msg = '<p>Log message created and row inserted.</p>';
  document.querySelector('#status').innerHTML =  msg;
});

db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p>Found rows: " + len + "</p>";
   document.querySelector('#status').innerHTML +=  msg;
   for (i = 0; i < len; i++){
     msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
     document.querySelector('#status').innerHTML +=  msg;
   }
 }, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</ht

Leave a Comment

Please sign in to add a comment. Not a member? Join today