HTML - Video ve Audio

Html5 ile birlikte multimedia dosyalarini herhangi bir plugine ihtiyac duymadan sayfamiza ekleyebilecegiz. Hatta Javascript kullanarak eklenen video icerigini ihtiyac duyabilecegimiz bircok acidan kontrol edebilecegiz.(Baslat,durdur ses artir/azalt gibi.Ve ayni zamanda Css kullanarak eklenen icerige gorsel guzellikler katabilecegiz)

Sayfamiza video icerigi eklemek icin <video> ogesini kullanacagiz.
Sayfamiza ses icerigi eklemek icin <audio> ogesini kullanacagiz.



<video> icin Genel kullanim bicimi asagidaki gibidir.

<video width="400" height="300" controls autoplay loop>
		<source src="dosya.mp4" type="video/mp4">
		<source src="dosya.ogg" type="video/ogg">
		Tarayiciniz <b>&lt;video&gt;</b> elementini tanimiyor :(
</video>

Bu kod sayfamiza belirtilen boyutlarda ve tarayicinin anladigi formattaki video dosyasini kontrol cubuklariyla birlikte(baslat-durdur gibi) otomatik baslayacak ve tekrarlayacak sekilde ekler.

veya asagidaki gibi bir kullanimida tercih edebilirsiniz.
<video src="http://www.olmayanvideositesi.com.de/html5.mp4" controls>
	Tarayiciniz <b>&lt;video&gt;</b> elementini tanimiyor :(
  </video>



<audio> icin Genel kullanim bicimi asagidaki gibidir.
<audio src="audio.ogg" controls autoplay loop>
	Tarayiciniz <b>&lt;audio&gt;</b> elementini tanimiyor :(
</audio>

width Eklenen ogenin genisligini ayarlamak icin kullanilir
height Eklenen ogenin yuksekligni ayarlamak icin kullanilir
poster Video icin temsili bir resim adresidir.Video oynatulincaya kadar gorunur olur
controls Standart HTml5 denetim cubuklarinin gosterilip gosterilmeyecegini ayarlama islevini saglar
src Kaynak dosya adresidir
autoplay Dosyanin otomatik oynatilip oynatilmayacagi islevini ayarlar
loop Otomatik tekrarlama islevini saglar
preload Buyuk dosyalarin onbellege alinma durumunu ayarlar. asagidaki degerleri alabilir
none onyukleme yapilmaz
auto Medya dosyasi onbellege alinir.
metadataDosyanin sadece meta verileri onbellege alinir.

<Source> Elemani
Farkli tarayicilar icin farkli formatta media icerigi ayarlayabilmemizi saglar,tarayici anladigi/destekledigi ilk formati buldugunda dosyayi oynatir.


Video Kontrol Ornegi


Ornegi daha iyi incelemek icin yukarlarda calisan video varsa durdurun.



Ses Ayarla:

<video width="400" height="300" id="dosya">
		<source src="kaynak/ders.mp4" type="video/mp4">
		<source src="dosya.ogg" type="video/ogg">
		Tarayiciniz <b>&lt;video&gt;</b> elementini tanimiyor :(
	</video>
	<br>
	<button onclick="baslatDurdur()">Baslat/Durdur</button>	<br>
	Ses Ayarla:<input type="range" min="0" max="1" step="0.01" id="sesdegeri" style="width:200px;" />
	
<br><br>

<script>
var dosya=document.getElementById("dosya");

function baslatDurdur(){
	if(dosya.paused){
			dosya.play();
	}else{
		dosya.pause();
	}

}


		$("#sesdegeri").on("change mousemove",function(){
			dosya.volume=$(this).val();
		});
</script>

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com