The Latest on
HTML5 Media
Silvia Pfeiffer
Use your cursor keys to move forward and backward through the slides.
Best viewed in Firefox 4beta
Video Element & Video Manipulation
<video controls poster="HelloWorld.png" width="500">
<source src="HelloWorld.mp4" type="video/mp4">
<source src="HelloWorld.webm" type="video/webm">
<source src="HelloWorld.ogv" type="video/ogg">
</video>
video {
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
video { video, video:hover {
height: 200px; position: relative;
padding: 10px; border: 5px solid black;
left: 50px; transition-property: all;
top: 50px; transition-duration: 0.5s;
background-color: white; transition-timing-function: linear;
} }
video:hover {
height: 250px;
padding: 15px;
left: 25px;
top: 25px;
background-color: black;
}
Cool filters, but only work in Firefox with in-line SVG
<video controls height="270" width="480" >
<source src="HelloWorld.mp4" type="video/mp4">
<source src="HelloWorld.webm" type="video/webm">
</video>
<canvas width="400" height="300" style="border: 1px solid black;">
</canvas>
<script>
window.onload = function() {
initCanvas();
}
var context;
function initCanvas() {
video = document.getElementsByTagName("video")[0];
canvas = document.getElementsByTagName("canvas")[0];
context = canvas.getContext("2d");
video.addEventListener("timeupdate", paintFrame, false);
}
function paintFrame() {
context.drawImage(video, 0, 0, 160, 80);
}
</script>
context.drawImage(video, 0, 0, w, h);
frame = context.getImageData(0, 0, w, h);
for (var i = 0; i < frame.data.length; i += 4) {
r += frame.data[i];
g += frame.data[i + 1];
b += frame.data[i + 2];
}
ambience.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
output = context.createImageData(w, h);
// Loop over each pixel of input file
for (x = 0; x < w; x++) {
for (y = 0; y < h; y++) {
// index in output image
i = x + w*y;
for (c = 0; c < 4; c++) {
output.data[4*i+c] = frame.data[4*i+c];
}
// make pixels transparent
r = frame.data[i * 4 + 0];
g = frame.data[i * 4 + 1];
b = frame.data[i * 4 + 2];
if (!(r > 200 && g > 200 && b > 200))
output.data[4*i + 3] = 0;
}
}
// Draw the ImageData object.
context.putImageData(output, 0, 0);
rctxt.translate(0,160);
rctxt.scale(1,-1);
gradient = rctxt.createLinearGradient(0, 105, 0, 160);
gradient.addColorStop(1, "rgba(255, 255, 255, 0.3)");
gradient.addColorStop(0, "rgba(255, 255, 255, 1.0)");
rctxt.fillStyle = gradient;
rctxt.drawImage(video, 0, 0, 320, 160);
function isSkin(rn, gn, bn, base) {
if (rn > 0.35 && rn < 0.5 && gn > 0.2 && gn < 0.5 && bn > 0.2 && bn < 0.35
&& base > 250) {
return true;
} else {
return false;
}
}
PAUSE
- Log onto Web Server
- Upload Video and Poster
- Create Web page
- Make sure Mime Type is correct
- Fallback for old browsers
<video controls poster="HelloWorld.png" width="500">
<source src="HelloWorld.mp4" type="video/mp4">
<source src="HelloWorld.webm" type="video/webm">
<source src="HelloWorld.ogv" type="video/ogg">
</video>
Your browser does not support the <code>video</code> element.
<a href="HelloWorld.webm">Download it</a> instead.
<video controls poster="HelloWorld.png" width="500">
<source src="HelloWorld.mp4" type="video/mp4">
<source src="HelloWorld.webm" type="video/webm">
<source src="HelloWorld.ogv" type="video/ogg">
</video>
<object type="application/x-shockwave-flash" data="player.swf" width="854" height="504">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=video.mp4">
<!--[if IE]><param name="movie" value="player.swf"><![endif]-->
<p>Your browser can’t play HTML5 video. <a href="HelloWorld.webm">Download
it</a> instead.</p>
</object>
Audio Element & Audio Manipulation
<audio controls>
<source src="revolve.mp3" type="audio/mp4">
<source src="revolve.ogg" type="audio/ogg">
</audio>
http://videos.mozilla.org/serv/blizzard/audio-slideshow/
Media Accessibility
- Captions and Subtitles
- Audio Descriptions
- External Text Files
- In-band content
WEBVTT FILE
1
00:00:08,124 --> 00:00:10,742
Workstations and high end personal computers have been able to
2
00:00:10,742 --> 00:00:14,749
manipulate digital audio pretty easily for about fifteen years now.
3
00:00:14,749 --> 00:00:17,470
It's only been about five years that a decent workstation's been able
4
00:00:17,470 --> 00:00:21,643
to handle raw video without a lot of expensive special purpose hardware.
WEBVTT FILE
00:00:15.000 --> 00:00:17.950 A:end D:vertical
在左边我们可以看到...
00:00:18.160 --> 00:00:20.080 A:end D:vertical
在右边我们可以看到...
00:00:20.110 --> 00:00:21.960 A:end D:vertical S:70% L:40%
...捕蝇草械.
WEBVTT FILE
1
00:00:10.000 --> 00:00:12.210
<00:00:10.035>Chocolate <00:00:11.000>Rain
2
00:00:12.210 --> 00:00:15.910
<00:00:13.250>Some <00:00:13.500>stay <00:00:13.750>dry <00:00:14.25>and
<00:00:14.50>others <00:00:15.00>feel <00:00:15.25>the <00:00:15.50>pain
3
00:00:15.910 --> 00:00:15.920
<00:00:16.000>Chocolate <00:00:16.500>Rain
The <track> Element
<video src="media/sintel.ogv" poster="media/poster_sintel.png" controls width="50%">
<track kind="subtitles" src="text/vid1-en.vtt" srclang="en" label="English" default>
<track kind="subtitles" src="text/vid1-fr.vtt" srclang="fr" label="Français">
<track kind="subtitles" src="text/vid1-de.vtt" srclang="de" label="Deutsch">
<track kind="captions" src="text/vid1-cap.vtt" srclang="en" label="English">
<track kind="descriptions" src="text/vid1-desc.vtt" srclang="en" label="English">
<track kind="chapters" src="text/vid1-chap.vtt" srclang="en" label="English">
<track kind="metadata" src="text/vid1-json.vtt" srclang="en" label="English">
</video>
- WebVTT format improvements
- JS implementations
- Browser Vendors to support markup and format
Silvia Pfeiffer
blog.gingertech.net
silviapfeiffer1@gmail.com
@silviapfeiffer
Thanks go to the Blender organisation and to Creative Commons for their videos.