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
Take This Course
  • Lectures 16
  • Length 1.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2015 English

Course Description

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.

What are the requirements?

  • Very basic understanding of web page development.

What am I going to get from this course?

  • 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.

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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction to the Course

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.


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.


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.


Create your first web page that plays a video file.


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


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


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


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


Add more buttons to play different sections.

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.

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

Section 2: Playing Audio Files

Write the basic audio code to play MP3 audio files.


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


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


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


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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Phil Cowcill, 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.

Instructor Biography

Krista Hildner, 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.

Ready to start learning?
Take This Course