5.1 Əlavə atributlar
HTML5-in multimedia elementləri, məsələn, <audio> və <video>, multimedia kontentinin idarə edilməsi üçün bir çox atribut təmin edir. Bu atributları başa düşmək, istifadəçilərin müxtəlif ehtiyaclarına uyğunlaşa bilən daha interaktiv və rahat veb səhifələr yaratmağa imkan verir. İndi <audio> və <video> elementləri üçün mövcud olan əlavə atributlara detallı baxış keçirək.
crossorigin atributu
crossorigin atributu, brauzerin digər domenlərdə yerləşən multimedia fayllarına sorğuları necə emal edəcəyini göstərir. Bu atribut iki dəyər ala bilər:
anonymous: sorğu hesablama məlumatları (cookies, avtorizasiya başlıqları və s.) daxil edilmədən yerinə yetiriliruse-credentials: sorğu hesablama məlumatları ilə yerinə yetirilir
Nümunə:
<audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
<video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>
<source> tagının atributları
<audio> və <video> elementləri daxilində bir neçə multimedia kontenti mənbəyini göstərmək üçün <source> tagları istifadə olunur. Bu, müxtəlif brauzerlərin fərqli formatları dəstəkləyə biləcəyinə görə kross-brauzer uyğunluğunu təmin etməyə kömək edir.
Nümunə:
<video controls width="600">
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.webm" type="video/webm">
<source src="videofile.ogv" type="video/ogg">
Brauzeriniz video elementini dəstəkləmir.
</video>
Subtitle və text track-lər üçün atributlar və xüsusiyyətlər
HTML5 <track> tagı vasitəsilə altyazılar, text track-lər və təsvirlər əlavə etməyə imkan verir. Bu element altyazılar, təsvirlər və bəliklər (chapters) kimi bir neçə text track tipini dəstəkləyir.
Nümunə:
<video controls width="600">
<source src="videofile.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
Brauzeriniz video elementini dəstəkləmir.
</video>
5.2 Multimedia elementlərini JavaScript ilə idarə etmək
<audio> və <video> elementləri JavaScript vasitəsilə playback-i idarə etmək üçün API təqdim edir. Bu, xüsusiləşdirilmiş idarəetmə elementləri yaratmağa və mürəkkəb playback ssenarilərini həyata keçirməyə imkan verir.
Nümunə:
<video id="myVideo" src="videofile.mp4" controls></video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="stopVideo()">Stop</button>
const video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function stopVideo() {
video.pause();
video.currentTime = 0;
}
Bu nümunədə düymələr JavaScript istifadə edərək videonu oynatmağa, pauzaya qoymağa və dayandırmağa imkan verir.
5.3 Multimedia elementlərinin event-ləri
<audio> və <video> elementləri çoxlu event-lər dəstəkləyir. Bu event-lər vasitəsilə çalğı vəziyyətində baş verən dəyişiklikləri izləmək və onlara reaksiya vermək mümkündür.
Əsas event-lər:
play: çalğı başlandıqda baş verirpause: çalğı dayandırıldıqda baş verirended: çalğı bitdikdə baş verirtimeupdate: cari vaxt çalğısı dəyişdikcə dövri olaraq baş verir
Event-lərin istifadəsinə nümunə:
<video id="myVideo" src="videofile.mp4" controls></video>
const video = document.getElementById("myVideo");
video.addEventListener('play', function() {
console.log('Video çalmağa başladı');
});
video.addEventListener('pause', function() {
console.log('Video dayandırıldı');
});
video.addEventListener('ended', function() {
console.log('Video bitdi');
});
video.addEventListener('timeupdate', function() {
console.log('Cari vaxt: ' + video.currentTime);
});
Bu kod multimedia elementinin əsas event-lərini izləmək üçün necə istifadə oluna biləcəyini göstərir.
GO TO FULL VERSION