Media API - Gestionarea videoclipurilor din JavaScript
Împreună cu noile elemente audio și video din HTML5 a fost adăugat un nou API în JavaScript pentru gestionarea acestor elemente. Cu ajutorul codului JavaScript putem obține elementele video și audio (ca și orice alt element) și le putem folosi proprietățile.
În JavaScript, aceste elemente sunt reprezentate de obiectul HTMLMediaElement, care cu ajutorul proprietăților, metodelor și evenimentelor permite gestionarea redării audio și video. Să menționăm cele mai importante proprietăți care ne pot fi utile pentru configurarea acestor elemente:
- playbackRate: setează viteza de redare. Implicit este 1
- src: returnează numele resursei redate, dacă este setată în codul HTML al elementului
- duration: returnează durata fișierului în secunde
- buffered: returnează durata acelei părți a fișierului care a fost deja tamponată și este gata pentru redare
- controls: setează sau returnează existența atributului controls. Dacă este setat, returnează true, altfel returnează false
- loop: setează sau returnează existența atributului loop. Dacă este setat, returnează true, altfel returnează false
- muted: setează sau returnează existența atributului muted
- preload: setează sau returnează existența atributului preload
- volume: setează sau returnează nivelul sunetului de la 0.0 la 1.0
- currentTime: returnează timpul curent de redare
Separat, pentru elementul video putem folosi o serie de proprietăți suplimentare:
- poster: setează sau returnează atributul poster
- height: setează sau returnează atributul height
- width: setează sau returnează atributul width
- videoWidth, videoHeight: pentru elementul video returnează lățimea și înălțimea videoclipului
De asemenea, trebuie să menționăm două metode cu ajutorul cărora putem gestiona redarea:
- play(): începe redarea
- pause(): oprește redarea
Evenimentele principale ale elementelor video și audio:
- canplaythrough: acest eveniment se declanșează după încărcarea paginii, dacă browserul determină că poate reda acest video/audio
- pause: evenimentul se declanșează atunci când redarea multimedia este oprită și este plasată în starea "paused"
- play: evenimentul se declanșează atunci când începe redarea fișierului
- volumechange: se declanșează la schimbarea nivelului de sunet al multimedia
- ended: se declanșează la finalizarea redării
- timeupdate: se declanșează la schimbarea timpului de redare
- error: este generat la apariția unei erori
- loadeddata: se declanșează când este încărcat primul cadru al fișierului video
- loadedmetadata: se declanșează după încărcarea metadatelor multimedia (durata redării, dimensiunile video etc.)
- seeking: se declanșează când utilizatorul începe să mute cursorul pe bara de redare pentru a se deplasa la o nouă poziție a fișierului audio sau video
- seeked: se declanșează când utilizatorul a terminat deplasarea la o nouă poziție pe bara de redare
Acum folosim unele dintre aceste proprietăți, evenimente și metode pentru a gestiona elementul video:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio în HTML5</title>
<style>
.hidden{
display:none;
}
#playBtn {
border: solid 1px #333;
padding: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<video width="400" height="300">
<source src="fox.mp4" type="video/mp4">
<source src="fox.webm" type="video/webm">
<source src="fox.ogv" type="video/ogg">
</video>
<div id="controls" class="hidden">
<a id="playBtn">Play</a>
<span id="timer">00:00</span>
<input type="range" step="0.1" min="0" max="1" value="0" id="volume" />
</div>
<script>
// obținem toate elementele
var videoEl = document.getElementsByTagName('video')[0],
playBtn = document.getElementById('playBtn'),
vidControls = document.getElementById('controls'),
volumeControl = document.getElementById('volume'),
timePicker = document.getElementById('timer');
// dacă browserul poate reda video, eliminăm clasa
videoEl.addEventListener('canplaythrough', function () {
vidControls.classList.remove('hidden');
videoEl.volume = volumeControl.value;
}, false);
// pornim sau oprim redarea
playBtn.addEventListener('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
}, false);
videoEl.addEventListener('play', function () {
playBtn.innerText = "Pause";
}, false);
videoEl.addEventListener('pause', function () {
playBtn.innerText = "Play";
}, false);
volumeControl.addEventListener('input', function () {
videoEl.volume = volumeControl.value;
}, false);
videoEl.addEventListener('ended', function () {
videoEl.currentTime = 0;
}, false);
videoEl.addEventListener('timeupdate', function () {
timePicker.innerHTML = secondsToTime(videoEl.currentTime);
}, false);
// calcularea timpului afișat
function secondsToTime(time){
var h = Math.floor(time / (60 * 60)),
dm = time % (60 * 60),
m = Math.floor(dm / 60),
ds = dm % 60,
s = Math.ceil(ds);
if (s === 60) {
s = 0;
m = m + 1;
}
if (s < 10) {
s = '0' + s;
}
if (m === 60) {
m = 0;
h = h + 1;
}
if (m < 10) {
m = '0' + m;
}
if (h === 0) {
fulltime = m + ':' + s;
} else {
fulltime = h + ':' + m + ':' + s;
}
return fulltime;
}
</script>
</body>
</html>La începutul codului JavaScript obținem toate elementele. Apoi, dacă browserul suportă video și îl poate reda, gestionăm evenimentul canplaythrough, setând nivelul sunetului și eliminând clasa hidden:
videoEl.addEventListener('canplaythrough', function () {
vidControls.classList.remove('hidden');
videoEl.volume = volumeControl.value;
}, false);Pentru a începe redarea, trebuie să gestionăm clickul pe linkul Play:
playBtn.addEventListener('click', function () {
if (videoEl.paused) { // dacă video-ul este oprit, pornim redarea
videoEl.play();
} else {
videoEl.pause();
}
}, false);Gestionând evenimentele de pornire și oprire a redării, putem schimba textul linkului:
videoEl.addEventListener('play', function () {
playBtn.innerText = "Pause";
}, false);
videoEl.addEventListener('pause', function () {
playBtn.innerText = "Play";
}, false);Gestionând evenimentul input, care apare la schimbarea valorii cursorului, putem sincroniza schimbarea valorii cursorului și volumul video-ului:
volumeControl.addEventListener('input', function () {
videoEl.volume = volumeControl.value;
}, false);Gestionarea evenimentului ended va permite resetarea timpului de redare:
videoEl.addEventListener('ended', function () {
videoEl.currentTime = 0;
}, false);Iar gestionarea evenimentului timeupdate va permite modificarea dinamică a indicatorului de timp de redare:
videoEl.addEventListener('timeupdate', function () {
timePicker.innerHTML = secondsToTime(videoEl.currentTime);
}, false);Pentru formatarea șirului de timp se folosește funcția auxiliară secondsToTime. În cele din urmă, vom obține următoarele elemente de redare:
Și în mod similar putem adăuga alte elemente, de exemplu, bara de redare, alte butoane.