HTML5 MULTIMEDIA PART2 CHAPTER 26

26 TUTORIAL  PART 2 VIDEO AUDIO 

HTML Video

The HTML <video> element is used to show a video on a web page.

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

</body> 
</html>

The HTML <video> Element

To show a video in HTML, use the <video> element:

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  Your browser does not support the video tag.

</video>

</body>

</html>

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.


HTML <video> Auto play

To start a video automatically use the autoplay attribute

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" autoplay>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  Your browser does not support the video tag.

</video>

<p><b>Note:</b> The autoplay attribute does not work on some mobile devices.</p>

</body>

</html>


The autoplay attribute does not work in mobile devices like iPad and iPhone.


HTML Video - Methods, Properties, and Events

HTML defines DOM methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML video.
  </video>
</div> 

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

function playPause() { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
} 
</script> 

HTML Audio

The HTML <audio> element is used to play an audio file on a web page

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element

<!DOCTYPE html>

<html>

<body>

<audio controls>

  <source src="horse.ogg" type="audio/ogg">

  <source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

</body>

</html>


HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.


HTML Audio - Methods, Properties, and Events

HTML defines DOM methods, properties, and events for the <audio> element.

This allows you to load, play, and pause audios, as well as set duration and volume.

There are also DOM events that can notify you when an audio begins to play, is paused, etc.


HTML Audio - Media Types

File FormatMedia Type
MP3audio/mpeg
OGGaudio/ogg
WAVaudio/wav

HTML Plug-ins

Plug-ins are computer programs that extend the standard functionality of the browser.

Plug-ins

Plug-ins were designed to be used for many different purposes:

  • To run Java applets
  • To run Microsoft ActiveX controls
  • To display Flash movies
  • To display maps
  • To scan for viruses
  • To verify a bank id

The <object> Element

The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML document.

It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML:

<object width="100%" height="500px" data="snippet.html"></object>

The <embed> Element

The <embed> element is supported in all major browsers.

The <embed> element also defines an embedded object within an HTML document.

Web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5.

<embed src="audi.jpeg">

HTML YouTube Videos

The easiest way to play videos in HTML, is to use YouTube.

Struggling with Video Formats?

Earlier in this tutorial, you have seen that you might have to convert your videos to different formats to make them play in all browsers.

Converting videos to different formats can be difficult and time-consuming.

An easier solution is to let YouTube play the videos in your web page.

YouTube Video Id

YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.

You can use this id, and refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

  • Upload the video to YouTube
  • Take a note of the video id
  • Define an <iframe> element in your web page
  • Let the src attribute point to the video URL
  • Use the width and height attributes to specify the dimension of the player
  • Add any other parameters to the URL (see below)

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

</body>
</html>

YouTube Autoplay

You can have your video start playing automatically when a user visits that page by adding a simple parameter to your YouTube URL.

Note: Take careful consideration when deciding to autoplay your videos. Automatically starting a video can annoy your visitor and end up causing more harm than good.

Value 0 (default): The video will not play automatically when the player loads.

Value 1: The video will play automatically when the player loads.

<!DOCTYPE html>

<html>

<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">

</iframe>

</body>

</html>

YouTube Playlist

A comma separated list of videos to play (in addition to the original URL).

YouTube Loop

Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).

<!DOCTYPE html>

<html>

<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">

</iframe>

</body>

</html>

YouTube Controls

Value 0: Player controls does not display.

Value 1 (default): Player controls display.

<!DOCTYPE html>

<html>

<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">

</iframe>

</body>

</html>

FILE DOWNLOADING LINK BELOW

Comments

Post a Comment

Popular posts from this blog

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">
Read more

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS
Read more

HTML 5 BASIC TAG CHAPTER 3

Image
3 RD TUTORIAL ON HTML 5 BASICS TAGS           HTML Documents Tag All HTML documents must start with a document type declaration:  <!DOCTYPE html> . The HTML document itself begins with  <html>  and ends with  </html> . The visible part of the HTML document is between  <body>  and  </body> . HTML Headings Tags HTML headings are defined with the  <h1>  to  <h6>  tags. <h1>  defines the most important heading.  <h6>  defines the least important heading EXAMPLE <!DOCTYPE html> <html> <head><title>demo</title></head> <body>                 <h1>This is heading 1</h1>                 <h2>This is heading 2</h2>                 <h3>This is heading 3</h3>                 <h4>This is heading 4</h4>                 <h5>This is heading 5</h5>                  <h6>This is heading 6</h6
Read more