|Internet & Web Development ( Introduction | Advanced )|
|Overview||Personal Learning Environment | What is HTML? | Web authoring | Resources | Help Desk|
|Creating a basic web site||HTML editor | Basic tags | Head tag | Linking pages | Formating and lines | Lists | Tables | Special characters | Page icon|
|Multimedia||graphics and images | Connected media | Audio | Video | Image map|
|Cascading style sheets||Inline, embedded, linked | Language | Example|
|Web page layout||Tables | CSS | iFrame | Frames | Other | Responsive|
|Forms||Example | mailto | Add Google|
Adding video to an HTML file
Example 1: Example of mpeg file using embed tag
- name: mmedia/mvstuck.mpg (101KB)
- width=160 x height=120
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
- 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
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.
- Float the mouse over the video and an "Embed" button appears.