1. Chap 3. Audio/Video api

2. Video Container
An audio or video file is really just a container file, similar to a ZIP archive file that contains a number of files.
Some of the popular video container formats include the following:
Audio Video Interleave (.avi)
Flash Video (.flv)
MPEG 4 (.mp4)
Matroska (.mkv)
Ogg (.ogv)

3. Audio and Video Codecs
Audio and video coders/decoders (codecs) are algorithms used to encode and decode a particular audio or video stream so that they can be played back.
Some example audio codecs are the following:
AAC
MPEG-3
Ogg Vorbis
Example video codecs are the following:
H.264
VP8
Ogg Theora

4. Restrictions Streaming audio and video.
That is, there is currently no standard for bitrate switching in HTML5 video
Media is restricted by HTTP cross-origin resource sharing.
Full-screen video is not scriptable
Because it could be considered a security violation to let a scriptable element take over the full screen.
Accessibility for audio and video elements is not fully specified yet.
Work is underway on a specification called WebSRT for subtitle support based on the popular SRT format.

5. Browser Support Browser support for HTML5 Video
Checking for Browser Support
JavaScript
var hasVideo = !!(document.createElement('video').canPlayType);
HTML Fallback content
<video src="video.ogg" controls>
Your browser does not support HTML5 video.
</video>
Browser
Details
Chrome
Version 3.0 and greater
Firefox
Version 3.5 and greater
Internet Explorer
Not supported
Opera
Version 10.5 and greater
Safari
Version 3.2 and greater

6. HTML USAGE Audio Video <audio controls>
<source src="johann_sebastian_bach_air.ogg">
<source src="johann_sebastian_bach_air.mp3">
An audio clip from Johann Sebastian Bach.
</audio>
Video
<video id="movies“ autoplay preload=“auto" width="400px" height="300px">
<source src="Intermission-Walk-in.ogv">
<source src="Intermission-Walk-in_512kb.mp4">
</video>

7. Attributes autoplay controls height pixels loop muted poster URL
Value
Description
autoplay
Specifies that the video will start playing as soon as it is ready
controls
Specifies that video controls should be displayed (such as a play/pause button etc).
height
pixels
Sets the height of the video player
loop
Specifies that the video will start over again, every time it is finished
muted
Specifies that the audio output of the video should be muted
poster
URL
Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload
auto metadata none
Specifies if and how the author thinks the video should be loaded when the page loads
src
Specifies the URL of the video file
width
Sets the width of the video player

8. Taking Control Common control functions Functions Behavior load()
Loads the media file and prepares it for playback. Normally does not need
to be called unless the element itself is dynamically created. Useful for
loading in advance of actual playback.
play()
Loads (if necessary) and plays the media file. Plays from the beginning
unless the media is already paused at another position.
pause()
Pauses playback if currently active.
canPlayType(type)
Tests to see whether the video element can play a hypothetical file of the
given MIME type.

9. WORKING WITH Audio <audio id="clickSound">
<source src="johann_sebastian_bach_air.ogg">
<source src="johann_sebastian_bach_air.mp3">
</audio>
<button id="toggle" onclick="toggleSound()">Play</button>
<script type="text/javascript">
function toggleSound() {
var music = document.getElementById("clickSound");
var toggle = document.getElementById("toggle");
if (music.paused) { //檢查是否已暫停
music.play();
toggle.innerHTML = "Pause";
} else {
music.pause();
toggle.innerHTML ="Play"; }
</script>

10. Events Events Description onabort oncanplay onended onerror
Script to be run on abort
oncanplay
Script to be run when a file is ready to start playing (when it has buffered enough to begin)
onended
Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")
onerror
Script to be run when an error occurs when the file is being loaded
onloadeddata
Script to be run when media data is loaded
onpause
Script to be run when the media is paused either by the user or programmatically
onplay
Script to be run when the media is ready to start playing
onplaying
Script to be run when the media actually has started playing
onprogress
Script to be run when the browser is in the process of getting the media data
onseeking
Script to be run when the seeking attribute is set to true indicating that seeking is active
onsuspend
Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
ontimeupdate
Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
onvolumechange
Script to be run each time the volume is changed which (includes setting the volume to "mute")

11. WORKING WITH VIDEO
function isVisible(el) {
var winTop = window.scrollY;
var winBottom = winTop + window.innerHeight;
var elTop = el.offsetTop;
var elBottom = elTop + el.offsetHeight;
return ((elBottom <= winBottom) && (elTop >= winTop)); }
function onBodyScroll() {
var video = document.getElementById('video');
if (isVisible(video)) {
video.play();
} else {
video.pause();
<body style="height: 3000px" onscroll="onBodyScroll()">
<div style="height: 1000px"></div>
<video id="video" controls>
<source src="video.ogv">
</video>
</body>