Video on Web Browser Primer Tutorial

Video on Web Browser Primer Tutorial ... clicking plays video file

Video on Web Browser Primer Tutorial ... clicking plays video file

The major web browsers on a Mac laptop or Windows laptop have differences in rendering and methods by which they play media files. With this in mind, today’s tutorial attempts to play video (augmenting yesterday’s Audio on Web Browser Primer Tutorial as shown below) across the major browsers where …

  • the video plays as soon as the webpage loads … annoying if you are not informed of this, but today we feel like we should warn you … so we think that … you should be warned … clicking the picture should load a video file
  • show controls
  • loop the video file

… as you can see there are quite a few scenarios … let alone considering the video format … as far as that goes, consult this w3schools link.

Along the way you may need some (online) video format conversion functionality, and for this we like M4V to OGG conversions online (for example).

Where can you source some video files? … We (probably all) like YouTube for this, particularly as you get great help with their wonderful advice on how to embed the video into your own HTML.

You may want to read more about other similar issues, which are sometimes referred to as cross-browser issues.

So in this tutorial you can imagine Internet Explorer 11 and see Firefox, Safari, Opera and Chrome playing a video file. Here is a live run link.

Here is some PHP programming source code you could call nala.php to play this video of Nala the dog playing Hide and Seek (one of her favourite games). If there are complex cross-browser issues they can be resolved by a server-side language such as PHP (or ASP.Net) ahead of the HTML reaching the client’s web browser.


Previous relevant Audio on Web Browser Primer Tutorial is shown below.

Audio on Web Browser Primer Tutorial ... clicking plays audio file

Audio on Web Browser Primer Tutorial ... clicking plays audio file

The major web browsers on a Mac laptop or Windows laptop have differences in rendering and methods by which they play media files. With this in mind, today’s tutorial attempts to play audio across the major browsers where …

  • the audio plays as soon as the webpage loads … annoying if you are not informed of this, but today we warn you … so … be warned … clicking the picture should load an audio file
  • show controls
  • loop the audio file

… as you can see there are quite a few scenarios … let alone considering the audio format … as far as that goes, consult this w3schools link.

Along the way you may need some (online) audio format conversion functionality, and for this we like MP3 to OGG conversions online (for example).

Where can you source some audio files? … We like Sound Bible for this, sometimes, as for our wind sound today, also used with Battleships and Cruisers game here at this domain.

You may want to read more about other similar issues, which are sometimes referred to as cross-browser issues.

So in this tutorial you can imagine Internet Explorer 11 and see Firefox, Safari, Opera and Chrome playing an audio file. Here is a live run link.

Here is some PHP programming source code you could call wind.php to play this wind sound audio file. If there are complex cross-browser issues they can be resolved by a server-side language such as PHP (or ASP.Net) ahead of the HTML reaching the client’s web browser.

We’ve used some of these audio techniques, too, with ESL (teaching) as below:

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in Animation, eLearning, Photography, Tutorials and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>