Scribd
Upload
2 views

HTML Video Audio Coding Placeholder

The document provides instructions on adding a coding-themed background to a PowerPoint presentation and covers multimedia concepts in HTML, including how to embed video and audio. It discusses common video and audio formats, browser support, and methods for controlling multimedia using JavaScript. The summary emphasizes the ease of using HTML5 for multimedia and the importance of ensuring cross-browser compatibility.

Uploaded by

deguiaarvin03
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

HTML Video Audio Coding Placeholder

The document provides instructions on adding a coding-themed background to a PowerPoint presentation and covers multimedia concepts in HTML, including how to embed video and audio. It discusses common video and audio formats, browser support, and methods for controlling multimedia using JavaScript. The summary emphasizes the ease of using HTML5 for multimedia and the importance of ensuring cross-browser compatibility.

Uploaded by

deguiaarvin03
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Add Your Own Coding Background

• To add a coding-themed background:


• 1. Download a coding-related image from Unsplash, Pexels, or
Pixabay.
• 2. Open this PowerPoint file.
• 3. Right-click on a slide → Select 'Format Background'.
• 4. Choose 'Picture or Texture Fill' and insert your downloaded
image.
• 5. Click 'Apply to All' to use the background across all slides.

• Now, let's begin the presentation!


HTML Video and Audio

Computer Programming – TVL ICT


[Your Name & Section]
Learning Objectives
• • Understand multimedia concepts in HTML.
• • Identify different video and audio formats.
• • Learn how to embed or link video and audio in a webpage.
Introduction to Multimedia
• • Multimedia includes sound, music, videos, movies, and
animations.
• • Early browsers supported only text, later adding colors,
fonts, and images.
• • HTML5 now makes embedding multimedia easier.
Adding Video in HTML
• • Use the <video> element to show videos on a webpage.

• Example:
• <video width='400' controls>
• <source src='video.mp4' type='video/mp4'>
• Your browser does not support the video tag.
• </video>

• • Attributes: controls, autoplay, loop.


Video Formats & Browser Support
• • Common video formats:
• - MP4 (recommended by YouTube)
• - WebM
• - Ogg

• • Not all browsers support all formats; always provide


multiple sources.
Adding Audio in HTML
• • Use the <audio> element to embed sound files.

• Example:
• <audio controls>
• <source src='audio.mp3' type='audio/mpeg'>
• Your browser does not support the audio element.
• </audio>

• • Supports attributes like autoplay, loop, and muted.


Audio Formats & Browser Support
• • Common audio formats:
• - MP3 (best for compressed music)
• - WAV (high quality, large file size)
• - Ogg (open-source alternative)
Methods, Properties & Events
• • HTML DOM provides control over video/audio using
JavaScript.

• • Methods: .play(), .pause(), .load()


• • Properties: .duration, .volume, .currentTime
• • Events: 'play', 'pause', 'ended'
Autoplay Considerations
• • Some browsers restrict autoplay to prevent unwanted noise.

• • Workaround:
• - Use muted autoplay (autoplay muted).
• - Allow user interaction before playing.
Activity & Questions
• • Match file extensions with their media type.
• • Identify which formats are supported by different browsers.
• • Answer:
• - How do you make a video autoplay in HTML?
• - How do you add audio in HTML?
Summary
• • HTML5 makes adding multimedia easy.
• • Use <video> and <audio> with correct formats.
• • Ensure cross-browser compatibility.
• • JavaScript can enhance multimedia control.

You might also like