Basic Video

Video is hard, because there are many formats, but no one format is supported on all browsers. There are different ways to include multi-media with a web page. Be sure to "View Page Source" to see how I used these tags.

  1. Using YouTube:

    Embedding a video from YouTube.com is the easiest way. If you find the video on YouTube.com, you can just include a link to it. Most YouTube videos are available in multiple formats, and will send one to your browser, that your browser can display. Click on "share", then "embed", and copy and paste the resulting HTML (iframe tags):


    (Source: https://www.youtube.com/watch?v=2tdp1FucyAk.)

  2. Using your own video:

    Using the new HTML5 VIDEO tag, you can display video on your computer, and offer it in multiple formats. The first one a browser understands will be used. If the browser doesn't understand the HTML5 video tag, then the OBJECT tag will be used instead, with the EMBED tag as a final fall-back:


    (Video downloaded from camendesign.com/code/video_for_everybody/test.html. Splash screen animation downloaded from commons.wikimedia.org (Ajax-loader).)

    Of course, this solution required you to have your video available in several formats. There are free, open source video converters available; you can use you new search-fu skills to locate one.

  3. Using Flash:

    Flash is easy, just use the EMBED tag. But won't play on Apple devices such as Macintosh or iPad (You can't usually control if it auto-plays or not, either):


    (This Flash demo was found at www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf.)

  4. Trouble-shooting Video Issues

    Uploading video to YouTube is a good option.

    You may need multiple versions of video. Even then, video playback depends on the web server correctly identifying the video file format. Many servers don't recognize some popular formats. For example, the HCC student web server won't recognize MP4. The solution is to offer your video in multiple formats (since you rarely have access to fix the server).

    Older browsers may not understand HTML5 video tags. One option is the JavaScript available at html5media.info/. This script makes even legacy browsers play HTML5 video, with no extra work.