How to add videos & music on your web page without using any plugins like Adobe Flash or other extra software?
How to embed videos from another website into your website using iframes?
Learn about using different audio & video file formats for cross-browser compatibility & make your content accessible to everyone.
Learn about all this with the help of HTML5 audio, video & iframe elements.
– – – – Contents Of The Video – – – –
00:00 – Introduction to Multimedia
01:24 – Basics of audio element
02:15 – Coding audio element
04:05 – Different attributes of audio element
07:03 – Using source element inside audio element | Different audio formats | Fallback text for audio element
09:56 – Coding video element
10:40 – Different attributes of video element
11:13 – Using source element inside video element | Different video formats | Fallback text for video element
12:12 – Subtitles or Captions for video using the track element
12:40 – Issue with video sizes & Intro to embedding videos
14:46 – Embedding videos using iframe element
17:19 – Things to remember while using multimedia elements
17:56 – Recommended videos & Conclusion
– – – – Interesting Links – – – –
Code Links:
1. Multimedia (Web Page) – https://juthikashetye.github.io/Code-Range-Demos/movies.html
2. Multimedia (Code) – https://github.com/juthikashetye/Code-Range-Demos/blob/master/movies.html
3. Link to all Demos – https://juthikashetye.github.io/Code-Range-Demos/
Recommended Videos:
1. Adding Images to your web page: https://www.youtube.com/watch?v=y4ywn917qTI&t
2. Responsive Images – Part 1 (srcset & sizes attributes): https://www.youtube.com/watch?v=Y7FpDmszZm4&t
3. Responsive Images – Part 2 (picture element): https://www.youtube.com/watch?v=EOmQXGrEMGs
Recommended Resources:
1. MDN Web docs (Video Element) – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
2. W3 Schools (Video Element) – https://www.w3schools.com/html/html5_video.asp
3. MDN Web docs (Audio Element) – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
4. W3 Schools (Video Element) – https://www.w3schools.com/html/html5_audio.asp
5. W3 Schools (Multimedia) – https://www.w3schools.com/html/html_media.asp
