2 - Multimedia
Michel Buffa
Juin 2016
buffa@unice.fr
Michel Buffa
buffa@unice.fr
Multimedia
See the Pen Rotating video by W3Cx (@w3devcampus) on CodePen.
Multimedia, plus jamais ça !
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>
</object>
HTML5 <video> tag !
<video controls autoplay>
<source src=video.webm type=video/webm>
<source src=video.ogg type=video/ogg>
<source src=video.mp4 type=video/mp4>
</video>
<video controls>
<source src=http://mainline.essi.fr/HTML5slides/assets/videos/video.webm type=video/webm>
<source src=http://mainline.essi.fr/HTML5slides/assets/videos/video.ogg type=video/ogg>
<source src=http://mainline.essi.fr/HTML5slides/assets/videos/video.mp4 type=video/mp4>
</video>
This video tag is cool man (by Anat Cooperman)!
See the Pen RedMonster not cool by W3Cx (@w3devcampus) on CodePen.
Support des Codecs, longtemps la guerre des browsers...
This codec war is NOT cool man (by Arthur De Val)!
See the Pen Not cool monster by W3Cx (@w3devcampus) on CodePen.
<video> est un pur élément du DOM, on peut utiliser CSS3...
<style>
video {
width: 100px;
transition: all 0.5s ease-in-out;
}
video:hover, video:focus {
width: 600px;
transform: rotate(45deg);
}
</style>
API JavaScript très complète
L'élément <track> permet d'ajouter des sous-titres, des metadata (JSON)
Format WebVTT
<video height="272" width="640" controls>
<source src="myMovie.mp4" type="video/mp4">
<source src="myMovie.webm" type="video/webm">
<track src="mysubtitle.vtt" kind="captions" default>
</video>
configurer le serveur HTTP pour le type MIME :
<Files mysubtitle.vtt>
ForceType text/vtt;charset=utf-8
</Files>
Example de vidéo avec des sous-titres
On peut inclure plusieurs pistes, en differents langages:
<video src="brave.webm">
<track kind=subtitles src=brave.en.vtt srclang=en label="English">
<track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the
Hard of Hearing">
<track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
<track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>
Le format WebVTT
Timestamps (appelés "CUE") et valeurs
WEBVTT
00:00:01.000 --> 00:00:02.042
(drumbeat)
00:00:07.167 --> 00:00:12.025
(plaintive violin solo playing)
00:00:15.000 --> 00:00:18.183
(wind whistling)
00:00:24.167 --> 00:00:27.025
(orchestra music swells)
00:00:43.033 --> 00:00:43.192
(weapons clash)
The WebVTT format
Les CUEs peuvent avoir un ID (utile pour JS API), et peuvent inclure du HTML, du style CSS styling, etc.
9 00:00:21.000 --> 00:00:22.000 to hear from <u>you</u> Opening 00:00:00.000 --> 00:00:30.000 Welcome to our <i>nice film</i> 00:00:56.000 --> 00:01:00.000 <v Tarzan>Me Tarzan... <v Jane>That would make me Jane!
Démo avec positionnement et styles
EBVTT
00:00:01.000 --> 00:00:05.000
These captions test some features of the WebVTT formats
00:00:06.000 --> 00:00:10.000 line:5%
This cue is positioned at the top of the video
00:00:11.000 --> 00:00:15.000 position:5% align:start
This cue is positioned at the left side of the video.
Track JavaScript API
On peut écouter les évènements CUE/track depuis du JS.
Onpeut ajouter des objets JSON (metadata) aux CUEs...
WEBVTT
Wikipedia
00:01:15.200 --> 00:02:18.800
{
"title": "State of Wikipedia",
"description": "Jimmy Wales talking ...",
"src": "http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/120px-Wikipedia-logo-v2.svg.png",
"href": "http://en.wikipedia.org/wiki/Wikipedia"
}
Démonstration : vidéo et google maps/street view
Effets spéciaux : canvas + video + transformations 2D
See the Pen Video destruction by W3Cx (@w3devcampus) on CodePen.
Effets spéciaux : incrustation
Principe :
- dessiner les frames de la video dans un canvas hidden,
- prendre les pixels de la video 2 s'ils ne sont pas verts,
- sinon les prendre dans la video 1,
- dessiner le résultat dans un canvas visible
Capture Webcam : l'API getUserMedia
JS BingetUserMedia, juste quelques lignes de code
<video id="output" autoplay autoplay>Fallback msg here.</video>
<script>
function onSuccess(stream) {
var output = document.getElementById('output').src = stream;
}
function onError() {
// getUserMedia API not supported, or another application is using the webcam !
}
if (navigator.getUserMedia) {
navigator.getUserMedia({video:true}, onSuccess, onError);
}
</script>
Autre démos
- Déjà vu : exploding video, mais avec la webcam !
- Photomaton
- Paul Neave's WebGL Camera Effects
- Detection d'humeurs
- Dessinez en temps réel avec la video de la webcaml