17 Ekim 2014 img_html5_html5

HTML5 – Dom Kullanarak Kontrolü Ele Alın!

img_html5_html5

HTML5 <video> elementinin kendine has metotları, özellikleri ve etkinlikleri vardır.

Örneğin metotlarından bazıları videoyu oynatmaya, durdurmaya ve yüklemeye yarar. Örneğin, sizi uyarabilir DOM etkinlikleri de vardır, <video> elementi çalmaya başladığında, duraklatıldı, sona erdi vb.

Aşağıdaki örnek basit bir şekilde bir <video> elementinin nasıl kullanılacağını göstermektedir.

<!DOCTYPE html>
<html>
<body>
<div style=”text-align:center”>
<button onclick=”playPause()”>Play/Pause</button>
<button onclick=”makeBig()”>Big</button>
<button onclick=”makeSmall()”>Small</button>
<button onclick=”makeNormal()”>Normal</button>
<br />
<video id=”video1″ width=”420″>
<source src=”mov_bbb.mp4″ type=”video/mp4″ />
<source src=”mov_bbb.ogg” type=”video/ogg” />
Your browser does not support HTML5 video.
</video>
</div>
<script type=”text/javascript”>
var myVideo=document.getElementById(“video1″);
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
<p>Video courtesy of <a href=”http://www.bigbuckbunny.org/” target=”_blank”>Big Buck Bunny</a>.</p>
</body>
</html>


Örnekte  iki metot çağırılmıştır: play() ve pause(). Ve ayrıca iki özellik kullanılmıştır : paused ve width.

Videoların kullanımı için aynı zamanda biraz javascript bilgisi de gerekiyor.

 

HTML5 <video> – Metot, Özellik, ve Etkinlik

Aşağıdaki tablo, çoğu tarayıcı tarafından desteklenen Video metotları, özellikleri ve etkinliklerini listeler:

Metot__________________ Özellik_____________________ Etkinlik______________
play() currentSrc Play
pause() currentTime Pause
load() videoWidth Progress
canPlayType videoHeight Error
Duration Timeupdate
Ended Ended
Error Abort
Paused Empty
Muted Emptied
Seeking Waiting
Volume loadedmetadata
Height
width

 

Not: Video özelliklerinden sadece videoWidth ve videoHeight hemen kullanılabilir.Videonun içeriği yüklendikten sonra diğer özellikleri kullanılabilir hale geçmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu sitenin sunucu alt yapısı Netiyi tarafından karşılanmaktadır. Kaçak bahis