Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Inserting a HTML5 Video

  • We are going to talk about how to insert videos using the new HTML5 video tag
  • This process is not quite as simple as you might think
  • Not all browsers support HTML5 video, and even those that do need different versions of movie formats in order to run at least at this point in time
  • We are going to create a page that contains a movie that will work in all browsers, but it does take some code to do this
  • I have some different formats in this lessons course files so be sure to download and use the files for this chapter from the Exercise Files tab below the video, the movies are in the movies folder
  • Create a new page called html5-video.html
  • We will start using the Dreamweaver insert for HTML5 video, but I have more information for you about working with HTML5 videos within the text file called movie-coding.txt
  • This chapter contains a folder called movies, and that is what will be used in this lesson
  • HTML5 offers a new tag to handle video directly within the browser, or at least within some browsers
  • The problem is that not all browsers support the same video file
  • We will insert 3 different movie formats, and use a Flash video as a fallback for older browsers

Inserting a HTML5 Video

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • HTML 5 Videos 0:07
    • Different Formats
    • HTML 5 Video Option
  • Video Tags With Controls 2:39
    • Alternative Method
    • Controls
    • Poster Option
  • Hyperlink 4:15
    • MP4 Format
    • .webm
  • Flash Video Fallback 5:49
    • Insert Using Dreamweaver
    • Right Click Save As
  • Insert Flash Video in Dreamweaver 9:00
  • Poster PNG 11:13