Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Play Video and Audio files over the Web to your Wishlist.

Add to Wishlist

Play Video and Audio files over the Web

Simple ways of playing media over the web
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1 student enrolled
Last updated 6/2015
$10 $20 50% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

This course will give you step-by-step instruction on how to play audio and video files over the web using the new HMTL5 tags. You will also be given samples on how to modify the look of your audio bar.

While playing audio and video files, code wise, is fairly easy, this course will also show you how to play segments of the audio and video file. This will require using simple buttons that are usually incorporated within a form. However, you can still use buttons without a form. What you will be shown is how to have those buttons call a custom JavaScript function.

If you don't know anything about JavaScript, don't worry. The lessons will step you through and explain what's going on. Once you create these functions, you can reuse them in any web page so you don't have to reinvent the wheel.

Learning how to use the video and audio tags along with the JavaScript will save you having to buy a media player to play your media files.

Who is the target audience?
  • People learning to develop websites.
  • People that are interested in publishing video or audio to the Internet.
  • People who are building training sites that use video or audio.
Students Who Viewed This Course Also Viewed
What Will I Learn?
Write code to play a video file in a web page.
Write code to play an audio file in a web page.
Add buttons to play specific segments of the video file.
Add buttons to play specific segments of the audio file.
Add a reflection effect to the video.
View Curriculum
  • Very basic understanding of web page development.
Curriculum For This Course
Expand All 16 Lectures Collapse All 16 Lectures 01:15:40
Introduction to the Course
11 Lectures 50:45

This is a description of what we will be covering over all the lessons. We will start with setting up the project. We then break the content into two sections. One is for the audio and the other section is for the video.

Preview 03:35

Learn how to setup and define a website within Dreamweaver. You don't need Dreamweaver for this course, but if you do use Dreamweaver, this will help.

Preview 01:35

This lecture will help you setup a project. You don't need Dreamweaver for this project but if you do use Dreamweaver, this will show you how to setup the project.

Download Files

Create your first web page that plays a video file.

Preview 04:59

Add a button to play the video file. This will introduce you to a bit of JavaScript.

Add Button to Play Video

This is the first step in being able to play a segment of video.

OnLoad Event

This lecture will complete the coding for playing a segment of video.

Play Segment Function

Add the final bit of code for playing a segment of video.

Segment Code

Add more buttons to play different sections.

Adding Other Buttons

Now that you have the video playing, it's time to add a neat effect that can make your video stand out. In this lesson you'll learn how to add a reflection to the video.
Add a Reflection to the Video

This lecture looks at a few websites and explains a little bit of the theory of video on the web.

Overview of Media on the Web
Playing Audio Files
5 Lectures 24:54

Write the basic audio code to play MP3 audio files.

Playing Audio Files

Add code to change the width of the audio play bar.

Setting the Width of the Bar

This lecture will go through the process of adding a button to play a segment of the audio file.

Adding a Button

Add the JavaScript code to play a segment of the audio file.

Play a Segment of Audio

Add CSS code to fade the audio bar in and out.

Fade Audio Bar
About the Instructor
4.7 Average rating
9 Reviews
76 Students
3 Courses
Professor & Developer

Phil Cowcill has been working with educational technology since 1983. He started developing websites in 1994. In 1995, he started teaching full-time multimedia and web development at the post-graduate level. In 2011, Mr. Cowcill designed and delivered Canada's first Mobile Application Development program for a college. This program was also at the post graduate level.

He's very passionate about helping people learn. Most of his students over the years come with out having a programming background. He has found a way to explain difficult concepts to non technical people. This has provided people without a programming background to now successfully build web sites, interactive learning, games and native mobile applications for both Android and iOS.

Now that Mr. Cowcill has retired from full-time teaching, he's looking to share his experience and knowledge with a much larger "class". Mr. Cowcill is first and foremost an educator and is here to help upgrade your skill by helping you learn.

4.7 Average rating
9 Reviews
76 Students
3 Courses
Designer & Developer at Development Made Simple, Teacher

Krista is a professional developer, professor and conference speaker. She travels throughout North America speaking on topics related to development, design and delivers workshops specializing in explaining complex concepts in a straightforward and simple way to people with a variety of backgrounds.

Her background is in Advertising and Communications with a focus toward digital and electronic communications and development of web and native applications for iOS and Android devices. She was hired to teach technology related courses at the post secondary and post graduate level in 2013, and has been strengthening her skills and building up lessons and techniques for teaching that she's anxious to share.

Krista's has a Diploma in Advertising, a Degree in Communications and a Post-Grad Certificate in Mobile Application Development.

Report Abuse