DERSİMİZ KOD - HTML: controls

controls etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

HTML Multimedya Ders_5 Youtube Videoları

HTML Youtube Videoları

Bir html dökümanında, video oynatmanın en kolay yolu youtube videolarıdır.

Video Formatları İle Çalışmak

Farklı tarayıcıların farklı versiyonları, farklı video formatlarını destekler.

Videoların formatlarını değiştirmek, yani bir formattan başka bir formata dönüştürmek bazen zaman kaybına sebep olabilir.

Bu yüzden, video işini Youtube'a bırakmak belki de en kola yol olacaktır.

Youtube Videolarının Id Özelliği

Bir video oyanttığınızda, youtube bu videoya ait bir id değeri (XGSy3_Czz8k gibi) gösterir. Bu id değeri, adres çubuğunda, eşittirden sonraki kısımdır, son kısımdır.

Bu id değerini kullanabilir ve bu videoyu html dökümanınızda yayınlayabilirsiniz.

HTML ile Youtube Videosu Çalmak

Kendi videonuzu html sayfanızda çalmak için şu adımları izleyin:

Videonuzu youtube'a yükleyin. (Videonuza youtube'un verdiği id değerini kaydedin)
Web sayfanızda bir <iframe> elemanı tanımlayın.
src özelliğine videonuzun youtube adresini kopyalayıp yapıştırın.
width ve height özelliklerine istediğiniz değerleri atayarak, videonuzun büyüklüğünü ayarlayabilirsiniz.
Bunların dışında da, url'inize başka özellikler ekleyebilirsiniz.

Örneğe dikkat edelim:

Yotube Parametreleri (autoplay=1)

src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1" kodunun sonundaki,

autoplay=1

kısmı, parametre kısmıdır. Bu kısım farklı parametre ve değerler alabilir:

autohide

Değer 0: Oynatıcının kontrol düğmeleri, her zaman görünür.

Değer 1: Oynatıcının kontrol düğmeleri, video çalınmaya başlandığında otoamtik olarak gizlenir.

Değer 2 (varsayılan): Eğer oynatıcının ölçüleri 16:9 veya 4:3 ise, 1 değerini alır; değilse 0 değerini alır.

autoplay

Değer 0 (varsayılan): Oyantıcı yüklendiğinde, video otomatik olarak oynamayacaktır.

Değer 1: Oyantıcı yüklendiğinde, video otomatik olarak oynatılır.

controls

Değer 0: Oyantıcının kontrol düğmeleri gösterilmez. Video doğrudan çalınır.

Değer 1 (varsayılan): Oynatıcının düğmeleri gösterilir. Video hızlıca yüklenir.

Değer 2: Oynatıcının düğmeleri gösterilir, fakat, kullanıcı play tuşuna basmadan video yüklenmez.

loop

Değer 0 (varsayılan): Video sadece bir defa oynatılır.

Değer 1: Video sonsuza kadar tekrarlanır.

playlist

Oynatılacak video listesi bir virgül ile ayrılır. (Gerçek URL değerleri).

<object> ve <embed> Elemanları ile Youtube Videosu Ekleme

Tıpkı <iframe> gibi, <object> ve <embed> elemanları da youtube videoları içerebilir. Fakat youtube videosu yayınlamak için <iframe> içeriğini kullanmak tavsiye edilir.

Tavsiye edilen: <iframe width="420" height="315"

src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>

Tavsiye edilmez: <object width="420" height="315"

data="http://www.youtube.com/embed/XGSy3_Czz8k">
</object>

Tavsiye edilmez: <embed width="420" height="315"

src="http://www.youtube.com/embed/XGSy3_Czz8k">

sonraki ders için tıklayınız

HTML Multmedya Ders_2 Video

HTML5 Video

HTML5 sürümümden önce, web sayfalarında video göstermenin bir standardı yoktu.
HTML5 sürümünden önce, videolar sadece flash player gibi plug-in programları sayesinde gösterilebiliyordu.
HTML5 <video> elemanı, html dökümanına video dosyaları gömmemizi sağlayan standart yol olmuştur.

Tarayıcı Desteği

Aşağıda <video> elemanını destekeleyen en düşük tarayıcı versiyonları verilmiştir.

Element
<video>	4.0	9.0	3.5	4.0	10.5

HTML5 <video> Elemanı

Web sayfanızda bir video göstermek için <video> elemanı kullanılır. Aşağıda bu elemanın kullanımına dair bir örnek verilmiştir:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Tarayıcınız video tagını desteklemiyor.

</video>

Yukarıdaki kodları açıklayalım:

controls kodu, video oyantıcısına, play pause ve volume gib kontrol düğmeleri ekler.
width="320" height="240" kodları ile videomuza genişlik ve yükseklik kazandırıyoruz. Bu iki ebat özelliği her zaman tavsiye edilir.
width="320" height="240" özellekleri belirtilmezse, videomuz yüklenirken, sayfamızda bir takım titremeler olabilir. Çünkü, tarayıcımız, bu iki özellik olmadan, videomuzun ebatlarını bilemez.
Tarayıcınız video tagını desteklemiyor. Eğer, kullanıcının tarayıcısı, <video> elemanını desteklemiyorsa, <video>...</video> taglarındaki video içeriğinden sonraki içeriği gösterecektir.
Birden çok <source> elemanı ile farklı uzantılarda video dosyası tanımlanabilir. Tarayıcı birincisinden itibaren okumaya çalışacaktır. Okuyunca da diğer <source> elemanlarını görmezden gelecektir.

Yukarıdaki video sayfamızda şöyle görünecektir.

NOT:Video içeriğinde sorun varsa bu bizden kaynaklanıyordur. Siz kendi videolarınızı kendi sayfalarınıza yükleyerek pratik yapabilirsiniz

<video> Elemanının Autoplay Özeliği

Eğer videomuzun, sayfa yüklendiğinde, otomatik olarak başlamasını istiyorsak bu özelliği kullanıyoruz. Bu özellik kullanıldığında videomuzun play, pause ve volume gibi kontrol tuşları olmaz. Örneğe dikkat edelim:

Tarayıcınız video tagını desteklemiyor.

</video>

autoplay özelliği, Safari ve Opera tarayıcılarında, mobil cihazlarda (iphone, ipad gibi) çalışmaz.

HTML5 Video - Tarayıcı Desteği

Şu anda HTML5 <video> elemanı şu 3 uzantıyı/formatı desteklemektedir: MP4, WebM ve Ogg

Aşağıda, daha ayrtıntılı bir tablo görüyoruz:

Browser (Tarayıcı)	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (Opera 25'den sonra)	YES	YES

Yukarıdaki video formatlarının tipleri type="video/mp4" type="video/webm" type="video/ogg" şeklinde belirtilir.

HTML5 Video - Metotlar (Methods), Özellikler (Properties) ve Olaylar (Events)

HTML5, <video> elemanı için, metotlar, özellikler ve olaylar belirtmiştir.

Bütün bunlar; videolarımızı yüklmeye, durdurmaya, çalmaya olanak tanır, ses ve süre ayarları yapmamızı sağlar.

Aşağıda bir örnek verilmiştir. (Bu kodları anlamak için, JavaScript diline yabancı olmamak gereklidir.):

<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="buyuk()">Büyük Göster</button>
<button onclick="kucuk()">Küçük Göster</button>
<button onclick="normal()">Normal Göster</button>
<br>
<video id="video1" width="420">
<source src="videom.mp4" type="video/mp4">
<source src="videom.ogg" type="video/ogg">
Tarayıcınız HTML5 video tagını desteklemiyor
</video>
</div>

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

function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

function buyuk() {
myVideo.width = 560;
}

function kucuk() {
myVideo.width = 320;
}

function normal() {
myVideo.width = 420;
}

</script>

Bu kodlar ile videom.mp4 veya videom.ogg adındaki videomuzun ebatlarını değiştirebiliriz ve kendi üretimimiz olan play/pause tuşlarımız olur.

HTML5 Video Tagları

Tag	Tanımı
<video>	Bir video veya film tanımlar.
<source>	Çoklu medya dosyaları tanımlamamızı sağlar. Yani <video> ve <audio> dosyalarını birlikte tanımlayabilir.
<track>	Medya playera bir text yazmamızı sağlar.

sonraki ders için tıklayınız