Bu makale, HTML5 video ve ses dosyalarının tarayıcılarda oynatılması için örnekler ve demolar içermektedir MP4 formatındaki video dosyalarının HTML5 video etiketi kullanılarak nasıl oynatılacağı, WebM formatındaki video dosyalarının yedeklenmesi, HTML5 audio etiketleri ile ses dosyalarının nasıl oynatılabileceği ve ses oynatma kontrollerinin nasıl eklenileceği anlatılmaktadır Ayrıca, HTML5 Canvas ve HTML5 Audio etiketlerinin birleştirilmesi sonucunda grafik ve seslerin nasıl bir arada kullanılabileceği örnekleri de verilmektedir Kenarlıklarla birlikte video oynatma da açıklanarak videonun daha iyi görüntülenebilmesi sağlanmaktadır
HTML5 video ve ses dosyaları tarayıcıda oynatılabilecek en uygun formatta sunulabilmektedir. Bu makalemizde HTML5 video ve ses dosyaları için örnekler ve demolar açıklayacağız. HTML5'in güncellemesi ile birlikte gelen video ve ses etiketleri, web uygulamalarının daha verimli ve kullanıcı dostu olmasını sağlamaktadır.
Okuyucularımız için hazırladığımız bu makalede mp4 formatındaki video dosyalarının HTML5 video etiketi kullanarak nasıl oynatılabileceği ve kenarlıklarla birlikte nasıl özelleştirilebileceği örneklendirilirken, desteklenmeyen tarayıcılar için WebM formatındaki video dosyalarının yedeklenmesi de örneklendirilmiştir. Ses dosyaları için de benzer şekilde HTML5 audio etiketleri ile nasıl oynatılabileceği anlatılmakta ve ses oynatma kontrolleri nasıl eklenir bunun yapılışı açıklanmaktadır.
Makalemiz ayrıca HTML5 Canvas ve HTML5 Audio etiketlerinin birleştirilmesi sonucunda grafik ve seslerin nasıl bir arada kullanılabileceğini de anlatmaktadır. Animasyonlu ses kaydı oluşturma örneği ile kullanıcıların uygulamalarında yaratıcı olmaları hedeflenmektedir.
Video Dosyaları
HTML5 video etiketi, internet sayfalarında video dosyalarının tarayıcılarda oynatılmasına olanak sağlayan bir özelliktir. Bu etiket, video dosyalarının oynatılması için hedeflenen tarayıcı türüne göre bir dizi format seçeneği sunar. Bu seçenekler arasında MP4, WebM ve OGG gibi formatlar bulunur.
MP4 formatında bir video dosyasını HTML5 video etiketi kullanarak oynatmak için, öncelikle video dosyasının yolunu belirlemek gerekir. Ardından, oynatıcı kontrollerini eklemek ve istenen boyutlarda video boyutunu ayarlamak için çeşitli öznitelikler kullanılabilir. Bunlar arasında "controls", "width", "height" ve "poster" gibi özellikler yer alır. Örneğin:
<video controls width="500" height="300" poster="thumbnail.jpg"> <source src="video.mp4" type="video/mp4"> <p>Tarayıcınız video oynatmayı desteklemiyor.</p></video>Bu kod, "video.mp4" adlı video dosyasını 500 piksel genişlikte ve 300 piksel yükseklikte oynatmak için kullanılır. Ayrıca, videonun oynatıcı kontrolleri gösterilir ve "thumbnail.jpg" adlı bir görüntü, videonun yükleme sırasında görüntülenen kısımlara yerleştirilir.
WebM formatındaki bir video dosyasını oynatmak için, HTML5 video etiketi yine kullanılır. Ancak, WebM formatının MP4 formatından farklı olarak desteklenmediği bazı tarayıcılar vardır. Bu durumda, video dosyasına erişim için yedek video dosyaları eklemek gerekebilir. Örneğin:
<video controls width="500" height="300"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> <source src="video.mp4" type="video/mp4"> <p>Tarayıcınız video oynatmayı desteklemiyor.</p></video>Bu kod, tarayıcının WebM formatını desteklememesi durumunda, video dosyasına erişim için yedek olarak OGG ve MP4 formatındaki dosyaları da kullanır.
HTML5 video etiketi ayrıca, kenarlıklarla birlikte video dosyalarının nasıl oynatılacağını da örneklendirir. Bu, videonun çevresinde stilize edilmiş bir çerçeve görüntülemek için "frameborder" özelliğinin kullanılmasını içerir. Örneğin:
<video controls width="500" height="300" frameborder="1"> <source src="video.mp4" type="video/mp4"> <p>Tarayıcınız video oynatmayı desteklemiyor.</p></video>Bu kod, "video.mp4" adlı video dosyasını 500 piksel genişlikte ve 300 piksel yükseklikte oynatmak için kullanılır ve videonun etrafında 1 piksellik bir kenarlık gösterir.
HTML5 video etiketi ile ilgili diğer özellikler hakkında daha fazla bilgi için, HTML5 video özelliklerine ilişkin belgeleri araştırabilirsiniz.
mp4 Formatında Video Oynatma
HTML5 video etiketi kullanarak mp4 formatındaki video dosyaları tarayıcıda oynatılabilir. Aşağıdaki örnek kod mp4 formatındaki video dosyası olan "video.mp4" dosyasını oynatacaktır:
<video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"></video> |
Yukarıdaki kod örneğinde "width" ve "height" özellikleri video player boyutlarını belirlemek için kullanılır. "controls" özelliği video oynatma kontrollerini gösterir. "source" etiketi video dosyasının kaynak dosyasını belirtir. "type" özelliği video dosyasının dosya tipini belirtir.
Bu etiket kombinasyonu, video dosyalarının oynatılmasını sağlar. Ancak, farklı tarayıcılar farklı video formatlarını desteklediğinden, doğru formatın kullanıldığından emin olunmalıdır.
Kontrollerin Eklenmesi
HTML5 video etiketi kullanarak video dosyalarının tarayıcılarda oynatılması oldukça kolaydır. Ancak, video oynatma işlemi sırasında kontrollerin eklenmesi, video oynatmayı daha verimli hale getirebilir.
Kontrollerin eklenmesi için, controls özelliği kullanılır. Bu özellik, oynatma çubuğu, oynatma, duraklatma, ses ve ileri-geri sarma tuşlarını otomatik olarak videoya ekler.
Bu özelliği kullanabilmek için, < video controls >< /video > kodunu kullanmanız yeterlidir. Bu şekilde, tarayıcılarda video oynatırken kullanıcılara daha fazla kontrol imkanı sağlanır.
Kenarlıklarla Birlikte Video Oynatma
HTML5 video etiketi ile video dosyaları tarayıcılarda oynatılırken, kenarlıklarla birlikte oynatma sağlanabilir. Bu özellik, videonun daha iyi görüntülenebilmesini sağlamaktadır.
Bir video dosyasını kenarlıklarla birlikte oynatmak için, video etiketine width ve height özellikleri eklenerek boyutlandırma yapılabilir. Örneğin:
| Kod | Ekran Görüntüsü |
|---|---|
|  |
Bu örnekte, video dosyasının genişliği 500, yüksekliği 300 olarak ayarlanmıştır. Kenarlıklar sayesinde video daha etkili bir şekilde oynatılabilir.
Benzer şekilde, kenarlıklarla birlikte oynatmak için video dosyasına bir çerçeve eklemek de mümkündür. Bu, video dosyasının etrafına bir çerçeve ekleyerek daha net bir şekilde görüntülemeyi sağlayabilir. Örneğin:
| Kod | Ekran Görüntüsü |
|---|---|
|  |
Bu örnekte, video dosyasının etrafına 1 piksellik siyah bir çerçeve eklenmiştir.
Kenarlıklarla birlikte oynatma, video dosyalarının daha net ve profesyonel bir şekilde sunulmasını sağlar. Yapılan ayarlamalar ile video dosyalarının kullanıcılar açısından mümkün olan en iyi şekilde görüntülenmesi hedeflenir.
WebM Formatında Video Oynatma
WebM formatı Google tarafından geliştirilmiştir ve diğer popüler video formatlarından daha az kullanılmaktadır. Ancak, çoğu modern tarayıcı tarafından desteklenen WebM formatında video dosyalarının oynatılması mümkündür.
HTML5 video etiketi kullanarak WebM formatındaki video dosyalarını oynatmak için type="video/webm" özelliği kullanılmalıdır. WebM formatını desteklemeyen tarayıcıların kullanıcılarına video dosyasını oynatamayacağı uyarısı verilir. Bu sorunu çözmek için <video> etiketi içinde bir yedek video dosyası da eklemek gerekebilir.
WebM formatında video oynatmak için kullanıcının tarayıcı ayarlarında belirli bir eklentiye ihtiyaç duymadan hazır bir şekilde oynatılabileceği için, bu formatın avantajı büyüktür. Ancak, WebM formatı henüz yeterince yaygınlaşmamış olabilir ve bu nedenle, video dosyalarınızın tarayıcılarınız tarafından desteklenip desteklenmediğini kontrol etmek önemlidir.
Yedek Video Dosyalarının Eklenmesi
HTML5 video etiketi, modern tarayıcılar tarafından destekleniyor olsa da, bazı eski tarayıcılarda hala sorunlar yaşanabilir. Bu tür durumlar için yedek video dosyalarının eklenmesi önemlidir. Desteklenmeyen tarayıcılarda bir yedek video dosyası gösterilebilir. Bu, video dosyasının boş bir alan yerine izleyiciye sunulmasını sağlar.
Bir yedek video dosyası eklemek için, WebM formatında bir dosya oluşturun. Yedek video dosyasını oluşturduktan sonra, video etiketine bir kaynak ekleyin ve ilgili WebM dosyasını belirtin. Böylece, tarayıcının video dosyasını oynatamaması durumunda, yedek video dosyası otomatik olarak gösterilir.
Video Oynatma Ve Durdurma
HTML5 video etiketi sayesinde tarayıcılarda video dosyalarının oynatılması oldukça kolaydır. Bunun yanı sıra, HTML5 video etiketi kullanarak video dosyasının oynatılması ve durdurulması da mümkündür.
Video dosyalarını HTML5 video etiketi ile oynatmak için, öncelikle src özelliği kullanarak video dosyasının kaynağını tanımlamalısınız. Daha sonra, controls özelliğini kullanarak video oynatma kontrollerini ekleyebilirsiniz. Bu sayede, kullanıcılar videoyu durdurabilir, oynatabilir, ileri veya geri sarabilirler.
| Özellik | Açıklama |
|---|---|
| autoplay | Video otomatik olarak oynatılır. |
| loop | Video sürekli olarak tekrarlanır. |
| muted | Video sessiz olarak oynatılır. |
Ayrıca, autoplay ve loop özelliklerini kullanarak video dosyasını otomatik olarak oynatılmasını ve sürekli olarak tekrarlanmasını sağlayabilirsiniz. Aynı şekilde, muted özelliğini kullanarak videoyu sessiz olarak oynatabilirsiniz.
HTML5 video etiketi sayesinde video dosyalarının oynatılması ve durdurulması oldukça kolaydır. Bu sayede, kullanıcılar videoyu durdurabilir, tekrar oynatabilir veya ileri ve geri sara bilirler. Bunun yanı sıra, autoplay ve loop özelliklerini kullanarak videonun otomatik olarak oynatılmasını veya tekrarlanmasını sağlayabilirsiniz.
Ses Dosyaları
HTML5 ile birlikte web sayfalarında ses dosyaları da oynatılabiliyor. Bunun için kullanılan etiket audio etiketidir. Bu etiket sayesinde kullanıcılar web sayfasında ses dosyalarını arka planda oynatılabilirler.
Ses dosyaları için, ses dosyasının URL'si src öznitelikleri kullanılarak belirtilir. Şu şekilde kullanılır: <audio src="sescalisma.mp3"></audio>. Bu şekilde basit bir ses dosyası oynatılabiliyor. Ancak burada bir problem vardır, ses dosyası sürekli açık kalmaktadır.
Ses dosyaları için kontrollerin eklenmesi de gereklidir. Aksi takdirde kullanıcılar ses dosyasını durduramaz veya tekrar başlatamazlar. Kontrolleri eklemek için, bir controls etiketi kullanılabilir. Şu şekilde kullanılır: <audio src="sescalisma.mp3" controls></audio>.
Bunun yanı sıra, bir metin kutusu da kullanılabilir. Bu kutu sayesinde dosyanın ses seviyesi kontrol edilebilir. Şu şekilde kullanılır: <audio src="sescalisma.mp3" controls><p>Tarif ne uzun olursa olsun, tatlı yemeği afiyetle yemek zorundasın.</p></audio>.
Basit Bir Ses Dosyası Oynatma
HTML5 audio etiketi, web sitelerinde ses dosyaları oynatmak için kullanılabilir. Basit bir ses dosyasını oynatmak için, önce audio etiketi oluşturulmalı ve src özelliği belirtilmelidir. Daha sonra kontrollerin eklenmesi için controls özelliği de eklenmelidir.
Bir ses dosyası oynatmak için, aşağıdaki kodu kullanabilirsiniz:
Bu kod, tarayıcınızda "sesdosyası.mp3" adlı bir ses dosyasını oynatır ve kontrol düğmelerini ekler. Eğer tarayıcınız ses dosyasını desteklemiyorsa, "Tarayıcınız ses dosyasını desteklemiyor" metnini görürsünüz. Böylece kullanıcılar, tarayıcıları ses dosyasını oynatamadığında nedenini anlayabilirler.
Basit bir ses dosyasını oynatmak için kullanabileceğiniz HTML5 audio etiketlerini örneklendirdik. Bu örneği kullanarak, kendi web sitenizdeki ses dosyalarını rahatlıkla oynatabilirsiniz.
Kontrollerin Eklenmesi
HTML5 audio etiketi kullanılarak ses dosyalarının oynatılması sırasında bazı kontrol öğeleri eklenmek istenebilir. Bu özellikleri eklemek için bazı özellikler kullanılabilir.
Örneğin, controls özelliği, ses oynatıcısına bazı varsayılan kontrolleri eklemek için kullanılır. Aşağıdaki örnek kodda, controls özelliği kullanılarak BasitSes.mp3 adlı ses dosyasının tarayıcıda nasıl oynatılabileceği görülmektedir.
<audio src="BasitSes.mp3" controls></audio>
Ayrıca, autoplay özelliği, ses dosyasının otomatik olarak oynatılması için kullanılır. Örneğin;
<audio src="BasitSes.mp3" controls autoplay></audio>
Kontroller, bazı tarayıcılarda otomatik olarak görüntülenmeyebilir. Bu durumda, preload özelliği kullanılabilir. preload özelliği, tarayıcının ses dosyasını önceden yüklemesine izin verir.
<audio src="BasitSes.mp3" controls preload="auto"></audio>
Ek olarak, loop özelliği, ses dosyasının tekrar tekrar oynatılması için kullanılabilir. Aşağıdaki örnekte, Ses.mp3 adlı ses dosyası sonsuz tekrar için ayarlanmıştır.
<audio src="Ses.mp3" controls loop></audio>
Sonuç olarak, HTML5 audio etiketi kullanılarak ses dosyalarının tarayıcıda oynatılması oldukça kolaydır ve bazı önemli özelliklere sahiptir. Kontrollerin eklenmesi, autoplay, preload ve loop gibi özelliklerle ses dosyasının kontrol edilmesi kolaylaştırabilir ve internet sitenizde kullanıcı deneyimini artırabilir.
Grafik Ve Ses
HTML5 Canvas ve HTML5 Audio etiketleri birleştirilerek, web sayfalarında grafik ve seslerin bir arada kullanılması mümkün hale gelir. Bu teknolojinin kullanımı sayesinde etkileyici bir web sayfası oluşturmak daha da kolay hale gelir. Örneğin, bir oyun sayfası, bir müzik dinleme platformu veya bir etkileşimli animasyon.
HTML5 Canvas etiketi, bir web sayfası üzerinde grafikler, çizimler ve resimler oluşturmak için kullanılır. Bu etiket, web sayfasındaki bir kanvası (boş bir alan) temsil eder. Bu alana, JavaScript kullanarak şekiller, çizgiler, resimler vb. eklenir. HTML5 Audio etiketi ise, web sayfası üzerinde ses dosyaları çalmak için kullanılır. Bu etiket, desteklenen web tarayıcıları sayesinde çok çeşitli ses dosyalarını destekler.
Birleştirilerek kullanıldıklarında, HTML5 Canvas ve HTML5 Audio etiketleri, kullanıcılara sitenizde harika bir deneyim sunabilir. Örneğin, bir animasyonda müzik çalınabilir, bir oyun sayfasında oyunun müzikleri çalınabilir veya bir video sayfasında ses efektleri eklenebilir. Bunun yanında bu teknoloji sayesinde, kullanıcılar interaktif bir web sayfası deneyimi yaşayabilir.
Birleştirilmiş grafik ve ses teknolojisi kullanıldığında, web tasarımcılar daha önce elde edilmesi zor olan çok çeşitli tasarımları oluşturabilirler. Geleneksel yapıların ötesine geçerek, etkileyici web sayfaları oluşturulabilir. Ayrıca, düzgün bir şekilde yapılandırılmış web sayfaları, SEO optimizasyonu için de büyük bir avantaj sağlayabilir.
Animasyonlu Ses Kaydı Oluşturma
HTML5 Canvas ve HTML5 Audio etiketleri bir arada kullanılarak grafik ve sesin nasıl birleştirilebileceği örnekler verilmiştir. Bu örnekte, animasyonlu bir ses kaydı nasıl oluşturulur görebilirsiniz.
İlk önce, HTML belgesinde bir canvas oluşturduğunuzdan emin olun. Bu canvas üzerinde animasyonlu grafikler oluşturulacak. Daha sonra, HTML5 Audio etiketi kullanarak oynatılacak ses dosyasını yükleyin.
| Kod Örneği: |
|---|
var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var audio = new Audio('sesdosyasi.mp3');function draw(){ //animasyon grafikleri çizilir}function playAudio(){ audio.play();}canvas.addEventListener('click', playAudio);requestAnimationFrame(draw); |
Burada, canvas değişkeni üzerinde bir olay dinleyici eklenir. Kullanıcı tıkladığında, playAudio işlevi çağrılır ve sonra animasyon grafikleri çizilir.
Her animasyon çerçevesi çizildiğinde, requestAnimationFrame işlevi çağrılır. Bu sayede, tarayıcı kendi kendine animasyonu yönlendirebilir.Örneğin, playAudio() işlevi, ses dosyasını tek bir çalma tuşuna bağlayabilir. Alternatif olarak, kullanıcının tıkladığı noktaya bağlayabilirsiniz. Bu örnekte, canvas'e tıklanmasını beklemek için bir olay dinleyici ekledik.
Bu şekilde, HTML5 Canvas ve HTML5 Audio etiketlerini bir arada kullanarak animasyonlu ses kaydı oluşturulabilir. Aynı zamanda, bu örnekler diğer HTML5 ses ve video örnekleri gibi, HTML yapısının güçlü yönlerini de gösterir.