<video>
Slouží k vytvoření elementu pro video soubor
<audio>
Slouží k vytvoření elementu pro audio soubor
<audio>/<video> atributy
- controls - přidává ovládání k media elementu - tlačítka pro spuštění, vypnutí, hlasitost, stažení...
- muted - ztlumí zvuk pro media element
- autoplay - spustí automaticky media element - od novějších verzí prohlížečů musí být doprovázen atributem muted bez kterého se jinak media automaticky nespustí
- poster - náhledový obrázek pro video
<source>
Slouží k specifikaci media zdrojů pro různé media elementy - audio, video, picture
Zároveň slouží k specifikování alternativních souborových zdrojů pro dané medium - pokud se prohlížeči nepodaří načíst hlavní zdroj z různých důvodů, vybere alternativní zdroj pro dané medium (například vybere jiný souborový formát)
<source> atributy
- type - specifikuje MIME-type pro daný zdroj - audio/mpeg, video/mp4...
- src - specifikuje URL pro dané medium
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video muted autoplay controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Project - projects/audiovideo
JavaScript
const videoPlayer = document.getElementById("videoPlayer");
const ppButton = document.getElementById("ppButton");
const videoPlay = document.getElementById("video-play");
const videoPause = document.getElementById("video-pause");
const forwardButton = document.getElementById("forwardButton");
const backButton = document.getElementById("backButton");
const fullscreenButton = document.getElementById("fullscreenButton");
const muteButton = document.getElementById("muteButton");
const pipButton = document.getElementById("pipButton");
const changeValue = 5;
ppButton.onclick = () => {
// vlastnost paused - vraci jestli je medium pozastaveno
if (videoPlayer.paused) {
showPause();
// funkce play() - spousti medium
videoPlayer.play();
return;
}
showPlay();
// funkce pause() - pozastavuje medium
videoPlayer.pause();
};
backButton.onclick = () => {
// vlastnost currentTime - vraci soucasnou stopu v sekundach
videoPlayer.currentTime -= changeValue;
};
forwardButton.onclick = () => {
videoPlayer.currentTime += changeValue;
};
fullscreenButton.onclick = () => {
// funkce requestFullscreen() - hodi video do fullscreenu
videoPlayer.requestFullscreen();
};
muteButton.onclick = () => {
// vlastnost volume - vraci hodnotu hlasitosti pro medium - 0 je muted (0%), 1 je nejvyssi hlasitost (100%)
if (videoPlayer.volume === 0) {
videoPlayer.volume = 1;
return;
}
videoPlayer.volume = 0;
};
// PIP - picture in picture - male video okenko, ktere jde vypichnout z nasi stranky a nasledne ruzne umistit po nasi plose
pipButton.onclick = () => {
// vlastnost pictureInPictureElement - vraci jestli je dokument v PIP modu
if (document.pictureInPictureElement) {
// funkce exitPictureInPicture() - ukoncuje PIP mod
document.exitPictureInPicture();
return;
}
// funkce requestPictureInPicture() - hodi video do PIP modu
videoPlayer.requestPictureInPicture();
};
const showPlay = () => {
videoPlay.style.display = "block";
videoPause.style.display = "none";
};
const showPause = () => {
videoPlay.style.display = "none";
videoPause.style.display = "block";
};
// pro audio plati stejne funkce, jen nektere od videa postrada (nejsou z logiky veci potreba)
const audioPlayer = document.getElementById("audioPlayer");
const muteButtonAudio = document.getElementById("muteButtonAudio");
const backButtonAudio = document.getElementById("backButtonAudio");
const forwardButtonAudio = document.getElementById("forwardButtonAudio");
const audioPlay = document.getElementById("audio-play");
const audioPause = document.getElementById("audio-pause");
const ppButtonAudio = document.getElementById("ppButtonAudio");
ppButtonAudio.onclick = () => {
if (audioPlayer.paused) {
showAudioPause();
audioPlayer.play();
return;
}
showAudioPlay();
audioPlayer.pause();
};
muteButtonAudio.onclick = () => {
if (audioPlayer.volume === 0) {
audioPlayer.volume = 1;
return;
}
audioPlayer.volume = 0;
};
backButtonAudio.onclick = () => {
audioPlayer.currentTime -= changeValue;
};
forwardButtonAudio.onclick = () => {
audioPlayer.currentTime += changeValue;
};
const showAudioPlay = () => {
audioPlay.style.display = "block";
audioPause.style.display = "none";
};
const showAudioPause = () => {
audioPlay.style.display = "none";
audioPause.style.display = "block";
};