Elementy multimedialne

Transkrypt

Aplikacje internetowe
Podstawy programowania w języku JavaScript
Roman Simiński
[email protected]
www.siminskionline.pl
Elementy multimedialne
Nowe znaczniki semantyczne — audio
<audio src="traktor.mp3" controls autoplay loop preload="none">
Ta przeglądarka nie odtwarza dźwięku.
</audio>
controls — wyświetlanie panelu
sterowania odtwarzaniem,
autoplay — automatyczne
odtwarzanie od razy, gdy to możliwe,
MSIE
Opera
Chrome
loop — powtarzanie odtwarzania.
preload — wskazówka dla przeglądarki: jak postępować z dźwiękiem w trakcie
ładowania strony: auto — ładowanie pliku w trakcie ładowania strony;
metadata – ładowanie metadanych w trakcie ładowania strony; none — plik
nie powinien być ładowany w trakcie ładowania strony. Dla autoplay = true
atrybut preload jest ignorowany.
2
Nowe znaczniki semantyczne — audio + source
<audio controls>
<source src="traktor.mp3" type="audio/mpeg" />
<source src="traktor.ogg" type="audio/ogg" />
</audio>
Nieobowiązkowe
Nieobowiązkowe
Zaleca się stosowanie znacznika <source> dla <audio> and <video> — pozwala
to na określanie alternatywnych plików źródłowych dla multimediów,
przeglądarka może wybrać określony typ np. w zależności od wykorzystywanych
kodeków.
type — określa typ MIME dla pliku (dla audio zwykle: audio/ogg,
audio/mpeg).
Znaczenie atrybutu src jest oczywiste, kolejny atrybut media nie jest aktualnie
obsługiwany w żadnej ze znanych przeglądarek.
3
audio + source versus audio scr
<audio controls>
<source src="cos.mp3" type="audio/mpeg" />
</audio>
<audio src="cos.mp3" controls >
</audio>
Dynamiczna modyfikacja elementu source i jego atrybutów po wstawieniu go do
elementu audio (video również) nie przynosi oczekiwanych rezultatów.
Zaleca się stosowanie atrybutu src lub wykorzystania funkcji load().
4
Nowe znaczniki semantyczne — sterowanie elementem audio
. . .
function playSound()
{
var audioItem = document.getElementById( "player" );
if( audioItem )
audioItem.play();
}
function pauseSound()
{
if( audioItem )
audioItem.pause();
}
. . .
<body>
<audio id="player">
<source id= "playerSrc" src="traktor.mp3" type="audio/mpeg" />
</audio>
<input type="button" value="Odtwórz"
onclick="playSound()" />
<input type="button" value="Zatrzymaj" onclick="pauseSound()" />
</body>
5
Na marginesie — rożne odwołania do elementów
{
if( audioItem )
audioItem.play();
}
{
document.getElementById( "player" ).play();
}
6
Pokazywanie/ukrywanie panelu sterującego — controls
{
var audioElement = document.getElementById( "player" );
if( audioElement )
{
audioElement.controls = true;
audioElement.play();
}
}
. . .
function toggleControls()
{
if( audioElement )
audioElement.controls = !audioElement.controls;
}
. . .
<body>
<audio id="player" src="rock.ogg">
</audio>
<p>
<input type="button" value="Włącz/wyłącz panel" onclick="toggleControls()"
</p>
</body>
/>
7
Więcej na temat audio, przykład
. . .
<body>
<audio id="player" src="traktor.mp3" >
</audio>
<p id="filename"></p>
<p id="duration"></p>
<p id="volume"></p>
<input type="button" value="Głośniej" onclick="changeVolume(0.1)" />
<input type="button" value="Ciszej"
onclick="changeVolume(-0.1)" />
<input type="button" value="W kóło"
onclick="setRepeat()" />
</body>
. . .
8
Więcej na temat audio, przykład, cd ...
{
var fileInfo
= document.getElementById( "filename" );
var durationInfo = document.getElementById( "duration" );
var volumeInfo
= document.getElementById( "volume" );
}
fileInfo.innerHTML = audioElement.src;
durationInfo.innerHTML = audioElement.duration.toFixed( 2 );
volumeInfo.innerHTML = audioElement.volume.toFixed( 2 );
{
document.getElementById( "player" ).pause();
}
9
Więcej na temat audio, przykład, cd ...
function changeVolume( steep )
{
var volumeInfo
= document.getElementById( "volume" );
audioElement.volume += steep;
volumeInfo.innerHTML = audioElement.volume.toFixed( 2 );
}
function setRepeat()
{
document.getElementById( "player" ).loop = true;
}
10
Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku
<body>
<audio id="player" src="traktor.mp3" ontimeupdate="showCurrTime()" >
</audio>
<p id="filename"></p>
<p id="duration"></p>
<p id="current"></p>
<p id="volume"></p>
<input type="button" value="Głośniej" onclick="changeVolume(0.1)" />
<input type="button" value="Ciszej"
onclick="changeVolume(-0.1)" />
<input type="button" value="W kóło"
onclick="setRepeat()" />
</body>
11
Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku
. . .
function showCurrTime()
{
document.getElementById( "current" ).innerHTML =
document.getElementById( "player" ).currentTime.toFixed( 2 );
}
. . .
<body>
<audio id="player" src="traktor.mp3" ontimeupdate="showCurrTime()" >
</audio>
. . .
12
Wykorzystanie audio i dynamicznie dodanego elementu progress
var
var progressBar
progressBar == null;
null;
function
function initProgressBar(
initProgressBar( duration
duration ))
{{
progressBar
progressBar == document.createElement(
document.createElement( 'progress'
'progress' );
);
document.body.appendChild(
document.body.appendChild( progressBar
progressBar );
);
progressBar.value
progressBar.value == 0;
0;
progressBar.max
=
duration;
progressBar.max = duration;
}}
function
playSound()
{{
.. .. ..
volumeInfo.innerHTML
volumeInfo.innerHTML == audioElement.volume.toFixed(
audioElement.volume.toFixed( 22 );
);
if(
if( progressBar
progressBar ==
== null
null ))
initProgressBar(
initProgressBar( audioElement.duration
audioElement.duration );
);
}}
function
function showCurrTime()
showCurrTime()
{{
.. .. ..
progressBar.value
progressBar.value == document.getElementById(
document.getElementById( "player"
"player" ).currentTime;
).currentTime;
}}
13
Dynamicznie dodawany element audio i progress
<body>
<body>
<p>Wybierz:</p>
<p>Wybierz:</p>
<ul>
<ul>
<li><a
<li><a href="#"
href="#" onclick="playSong(
onclick="playSong( 'rock_s.ogg'
'rock_s.ogg' )">Rock</a></li>
)">Rock</a></li>
<li><a
<li><a href="#"
href="#" onclick="playSong(
onclick="playSong( 'jazz_s.ogg'
'jazz_s.ogg' )">Jazz</a></li>
)">Jazz</a></li>
<li><a
href="#"
onclick="playSong(
'folk_s.ogg'
)">Folk</a></li>
<li><a href="#" onclick="playSong( 'folk_s.ogg' )">Folk</a></li>
</ul>
</ul>
<input
<input type="button"
type="button" value="Zatrzymaj"
value="Zatrzymaj" onclick="pauseSound()"
onclick="pauseSound()" />
/>
</body>
</body>
14
Dynamicznie dodawany element audio i progress
var
var progressBar
progressBar == null;
null;
var
var audioElement
audioElement == null;
null;
*
function
function showProgres()
showProgres()
{{
progressBar.max
progressBar.max == audioElement.duration;
audioElement.duration;
progressBar.value
progressBar.value == audioElement.currentTime;
audioElement.currentTime;
}}
function
function playSong(
playSong( songName
songName ))
{{
if(
if( audioElement
audioElement ==
== null
null ))
{{
audioElement
audioElement == new
new Audio();
Audio();
document.body.appendChild( audioElement
audioElement );
);
audioElement.addEventListener(
"timeupdate",
audioElement.addEventListener( "timeupdate", showProgres,
showProgres, true
true );
);
}}
audioElement.src
audioElement.src == songName;
songName;
if(
if( progressBar
progressBar ==
== null
null ))
{{
progressBar
progressBar == document.createElement(
document.createElement( "progress"
"progress" );
);
progressBar
);
document.body.appendChild( progressBar );
}}
if(
if( progressBar.hidden
progressBar.hidden ))
progressBar.hidden
progressBar.hidden == false;
false;
}}
*
function
pauseSound()
{{
audioElement.pause();
progressBar.hidden
progressBar.hidden == true;
true;
}}
15
Różne sposoby tworzenia elementu audio
Wykorzystanie konstruktorów:
audioElement = new Audio();
audioElement.src = 'rock_s.ogg';
document.body.appendChild( audioElement );
. . .
audioElement = new Audio( 'rock_s.ogg' );
document.body.appendChild( audioElement );
. . .
Wykorzystanie funkcji createElement():
audioElement
audioElement == document.createElement(
document.createElement( 'audio'
'audio' );
);
audioElement.src
audioElement.src == 'rock_s.ogg';
'rock_s.ogg';
document.body.appendChild( audioElement
audioElement );
);
.. .. ..
16
Istnieje znacznie więcej możliwości programowej obsługi
Do wykrywania czy odtwarzanie trwa czy też zostało wstrzymane służy właściwość
paused.
function audio_play_pause()
{
var audioElement = document.getElementById("player");
if( audioElement.paused )
else
}
Jest jeszcze dużo więcej, choć oficjalnie jakby nie ma...:
http://www.w3.org/wiki/HTML/Elements/audio
https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-andaudio/
Copyright © Roman Simiński
17
Odtwarzanie sekwencji wideo — element video
<video src="wildlife.ogg" controls autoplay loop>
Ta przeglądarka nie odtwarza wideo.
</video>
Większość atrybutów znanych ze znacznika audio występuje również dla
znacznika video.
Chrome
FireFox
Opera
Wykorzystanie znacznika source:
<video controls poster="vid_poster.jpg">
<source src="wildlife.mp4" type="video/mp4" />
<source src="wildlife.ogg" type="video/ogg" />
</video>
18
Atrybut poster
<video src="wildlife.ogg" controls poster="vid_poster.jpg" >
</video>
Gdy autoplay == false, atrybut poster pozwala określić obraz który będzie
pokazywany do czasu wybrania gdy użytkownik nie naciśnie przycisku
odtwarzania.
Obraz ten jest również wyświetlany podczas ściągania sekwencji wideo.
Gdy obraz nie zostanie określony, wykorzystywana jest pierwsza klatka filmu.
19
Atrybuty width i height
<video width="200" height="150" autoplay controls poster="vid_poster.jpg">
</video>
<video width="320" height="240" autoplay controls poster="vid_poster.jpg">
</video>
20
Atrybuty width i height — uwagi
Atrybuty height i width określają odpowiednio, liczoną w pikselach, wysokość
i szerokość elementu video.
Zaleca się określanie wartości opu parametrów, co pozwala przeglądarce na
zarezerwowanie odpowiedniego obszaru podczas ładowania strony. Brak tych
wartości powoduje często zmiany układu strony — przeglądarka określi rozmiar
ostateczny rozmiar obczaru dopiero po załadowaniu sekwencji wideo.
Atrybuty height i width nie służą do zmiany (a w szczególności zmniejszenia
wymiarów) sekwencji wideo. I tak zostanie pobrany plik w jego oryginalnej wersji,
nawet jeżeli ma być wyświetlony w polu o małych wymiarach.
Przeskalowanie obrazu powinno wyć wykonywane przy użyciu odpowiedniego
oprogramowania przed zamieszczeniem sekwencji wideo na serwerze.
Przy okazji — istnieje atrybut muted, pozwalający na wyciszenie ścieżki audio
w sekwencji wideo, ale nie jest aktualnie obsługiwany przez żadną z przeglądarek.
21
Atrybuty width i height — uwagi, cd. ...
Jeżeli ustawione wartości atrybutów width i height nie pasują do proporcji obrazu
wideo, obraz ten nie jest dopasowywany do ustalonych wymiarow.
Obraz wideo zachowuje swoje proporcje i jest maksymalizowany w obszarze
elementu video.
Wymiary podaje się w pikselach bez podawania jednostki, inne jednostki mogą być
używane z wykorzystaniem mechanizmu stylów CSS.
300
200
<video src="wildlife.ogg" height="300" width="100" controls>
</video>
22
Ładowanie sekwencji wideo i atrybut preload
Przeglądarki bardzo podchodzą do sprawy ładowania sekwencji wideo.
Opera, Chrome i Safari automatycznie pobierają sekwencję wideo nawet gdy nie
jest automatycznie odtwarzana.
FireFox pobiera tyle, by określić pierwszą ramkę i czas trwania, być może aktualnie
Opera czyni podobnie.
Zastosowanie autoplay powoduje, że wideo jest ładowane tak szybko, jak to
możliwe.
Atrybut preload niekoniecznie jest dobrze interpretowany przez przeglądarki.
Aby uzyskać efekt preload="none" można:
<video id="player" controls>
</video>
<input type="button" value="Załaduj"
onclick="document.getElementById('player').src = 'wildlife.ogg'" />
23
Pobieranie informacji na temat rozmiarów obrazu wideo
Atrybuty videoWidth i videoHeight pozwalają na pobranie wewnętrznych
rozmiarów sekwencji wideo.
. . .
<script>
function showInfo() {
var player = document.getElementById("player");
var info
= document.getElementById("info");
info.innerHTML = player.videoWidth + "x" + player.videoHeight;
}
. . .
</script>
. . .
<video id="player" src = 'wildlife.ogg' width="150" height="100" controls>
</video>
<input type="button" value="Pokaż info" onclick="showInfo()" />
<p id="info"></p>
. . .
24
Wykrywanie informacji o obsłudze formatów
Nawet gdy element video jest obsługiwany, może się zdażyć że nie są obslugiwane
konkretne kodeki.
Dla elementu video istnieje metoda canPlayType() pozwalająca na wykrywanie
obsługiwanych formatów.
W przypadku gdy dany format nie jest obsługiwany, generowane jest zdarzenie
informujące o błędzie — można zdefiniować obsługę tego zdarzenia.
MSIE
FireFox
25
Metod canPlayType()
function showSupport() {
var info
var str;
str = "video/ogg: " + player.canPlayType('video/ogg') + "<br \/>";
str += "video/mp4: " + player.canPlayType('video/mp4') + "<br \/>";
info.innerHTML = str;
}
. . .
</video>
<input type="button" value="Pokaż info" onclick="showSupport()" />
<p id="info"></p>
. . .
MSIE
Chrome
FireFox
26
Metod canPlayType()
function showSupport() {
var info
var str;
str = "video/ogg: " + player.canPlayType('video/ogg') + "<br \/>";
str += "video/ogg codecs=theora, vorbis: "
+ player.canPlayType('video/ogg; codecs="theora, vorbis"')
+ "<br \/>";
info.innerHTML = str;
}
. . .
</video>
<input type="button" value="Pokaż info" onclick="showSupport()" />
<p id="info"></p>
. . .
27
Pobieranie informacji o odtwarzanej sekwencji
function setDuration() {
var duration = document.getElementById("player").duration;
document.getElementById("durInfo").innerHTML = "Całość: "
+ duration.toFixed(2);
document.getElementById("bar").max = duration;
}
function showInfo() {
var info
= document.getElementById("currInfo");
var bar
= document.getElementById("bar");
info.innerHTML = "Aktualnie: " + player.currentTime.toFixed(2);
bar.value = player.currentTime;
}
. . .
<video id="player" src = "wildlife.ogg" controls
ontimeupdate="showInfo()"
ondurationchange="setDuration()">
</video>
<p id="durInfo"></p>
<p id="currInfo"></p>
<input id="bar" type="range" step="any">
28
Sterowanie odtwarzaną sekwencją — ustawianie currentTime
. . .
function rewindVideo() {
var bar = document.getElementById("bar");
player.currentTime = bar.value;
}
. . .
<video id="player" src = "wildlife.ogg" controls
ontimeupdate="showInfo()"
ondurationchange="setDuration()">
</video>
<p id="durInfo"></p>
<p id="currInfo"></p>
<input id="bar" type="range" step="any"
onchange="rewindVideo()">
. . .
29

Elementy multimedialne

Transkrypt

Podobne dokumenty

MP5 Player Gamester

Osprey 530 - PMC System Integrator SA

Osprey 210 - PMC System Integrator SA

Philips BDL5571VL

Osprey 230 - PMC System Integrator SA

Monitor LCD 8"+TV USB i czytnik kart SD

Na wystawie takiej jak Audio Video Show nie mogło zabraknąć

Monitor LCD 9"+TV wejście VGA

Transmisja Postprodukcja Hosting

Wzmacniacz Dystrybucyjny audio i video 1:5CV