VirtualMV/HTML/Basic/Multimedia/Video

Adding video to an HTML file

: Video By the end of this page you will be able to: list the most common video formats on the web, and differentiate between them use the <embed> tag to insert video with controls into a web page use the IE tag <dynsrc> to add video with mouse-over into a web page.

Samples

Example 1: Example of mpeg file using embed tag

Properties:

• name: mmedia/mvstuck.mpg (101KB)
• width=160 x height=120

<embed src="mmedia/mvstuck.mpg" autostart = "true" border=1 width=160 height=165>

Example2: HTML5 video tag

Video support in different browsers can be found at http://html5test.com/

• Chrome 14 (2011-09-30) H.264, Ogg Theora, WebM (not MPEG-4)

To see how to use the HTML5 video tag go to http://www.w3schools.com/html/html5_video.asp

Example3: Embedding a YouTube video

Probably the most common (and best) way to insert video onto your web page is via YouTube (or Vimeo) in an iFrame

Video Formats

• Audio Video Interleave (avi)
  • Audio and video Interleaved - standard Windows file (specified 1990). Inefficient in size when compared to newer formats.
  • Uses about 1MB per second for the size shown in 160 x 120
• Quicktime (mov)
  • Digital video format developed on the Apple Macintosh platform. *Used by Director (which was also developed for the Mac).
  • Also supports a Virtual reality format, QuickTime VR, that can be used to display the inside of a room.
• Windows movie (wmv)
  • Streaming video introduced to replace avi in 2000. (First released with Win Me). Increasing in popularity
• Motion Picture Experts Group (mpeg, mpg )
  • Named after an international standards-settings panel responsible for creating and setting standards for various professional grade video technology.
  • MPEG2 is a video compression standard, though like Apples MOV files is ideally suited to sound recordings.
  • MPEG-3 was designed to support high definition TV but this was supported by MPEG-2 (Hence MP3 was used for a sound format).
  • MPEG-4 is being worked on to allow users to manipulate audio & video (as far as I can determine to allow for interactive/multimedia movies).
• Flash Movie
  • When Flash added the ability to embed/link videos into its player, a whole industry sprung up using videos on the web. YouTube is probably the best known. The big advantage was that the Flash player only supports a limited number of codecs so if you have a Flash video, and the player is installed the movie will play. To play flash movies you will need to call a flash player that links to the external flash video (flv) or has the flash movie embedded.

html: <embed> tag

As covered in sound, the embed tag is supported in both IE and Netscape. For example

<embed src="mmedia/mvstuck.mpg" autostart = "true" border=1 width=160 height=165>

iFrame

Probably the simplest way to add video to your site is to use one of the public services like Youtube and Vimeo. For more information check out the Connected mediapage.

Vimeo

• Float the mouse over the video and an "Embed" button appears.

• EIT - World Without Limits (2011)

<iframe src="http://player.vimeo.com/video/31938659?title=0&amp;byline=0&amp;
portrait=0" width="400" height="225" frameborder="0" 
webkitAllowFullScreen allowFullScreen></iframe><p>
<a href="http://vimeo.com/31938659">EIT - World Without Limits</a> from 
<a href="http://vimeo.com/eithb">EIT Hawkes Bay</a>
 on <a href="http://vimeo.com">Vimeo</a>.</p>

References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/HTML/Basic/Multimedia/Video. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 5, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/Multimedia/Video    (zotero)