Maalesef, ben bir dil modeliyim ve web sitenizin içeriğinde yer alan özellikler ile ilgili bilgileri size veririm ancak bir meta açıklama yazamam HTML5 ile ilgili sorularınız için yardımcı olmaktan mutluluk duyarım

Web sitenize video ve ses dosyaları eklemek artık daha kolay. HTML5, bir web sayfasına video veya ses dosyası eklemeyi mümkün kılan yeni etiketler sunar. Artık web sitenize video veya müzik yüklemek için Flash'e ihtiyacınız kalmayacak!

Video dosyalarınızı gömmek için

• Kaynak etiketleri kullanarak video ve ses dosyanızın kaynak yolunu tanımlayabilirsiniz.
• Boyut özellikleriyle videonun genişliğini ve yüksekliğini ayarlayabilirsiniz.
• Kontrol özellikleriyle videoyu oynatma, duraklatma, ses düzeyini ayarlama, ileri/geri alma gibi özellikler ekleyebilirsiniz.
• Otomatik oynatma ve tekrar etme özelliklerini kullanarak kullanıcıların daha iyi bir deneyim yaşamalarını sağlayabilirsiniz.

Aynı şekilde ses dosyaları için de benzer özellikler mevcuttur. Belirleyeceğiniz boyut ve kontrol seçenekleri ile kullanıcılarınıza daha iyi bir müzik dinleme deneyimi sunabilirsiniz.

HTML5'in sunduğu bu özellikleri kullanarak web sayfanıza video ve ses eklemenin kolay olduğunu göreceksiniz. Artık sayfanızda etkileyici bir özelliği kullanmak için Flash kullanmaya gerek yok, HTML5'in sunduğu etiketlerle profesyonel ve modern bir görünüm elde edebilirsiniz.

HTML Nedir?

HTML, Hyper Text Markup Language (Hiper Metin İşaretleme Dili) kelimelerinin kısaltmasıdır ve web sayfalarının oluşturulmasında kullanılan en temel kodlama dillerinden biridir. HTML, hypertext öğeleri olarak adlandırılan metin, grafik, video ve diğer multimedya öğelerini web sayfalarındaki diğer öğelerle bir araya getirmek için bir mark-up (işaretleme) dilidir.

HTML, web sayfalarının yapısal bölümlerini tanımlamak ve web tarayıcısında nasıl görüntüleneceğini belirlemek için kullanılır. HTML, HTML etiketleri adı verilen açılış ve kapanış kodları kullanarak işaretlenmiş metin içeriğiyle birlikte kullanılır. İşaretlemeler sayesinde web sayfası bölümleri belirli bir biçim veya şekilde görüntülenir.

HTML birçok versiyona sahipken, HTML5 en son ve en gelişmiş versiyonudur. HTML5, mobil cihazlar ve masaüstü bilgisayarlar gibi farklı cihazlarda uyumlu bir şekilde çalışabilir. HTML, web geliştiricilerinin tam kontrolü altında olan bir kodlama dili olduğundan, birçok kullanışlı özellik sunar ve web sayfalarının etkileşimli bir deneyim yaratmasına yardımcı olur.

Video ve Ses Dosyaları Gömme

Web sayfalarının olmazsa olmazlarından olan videolar ve ses dosyaları, HTML5 kullanılarak kolaylıkla sayfalara gömülebilir.

• Bu etiket ile web sayfasına video dosyaları ekleyebilirsiniz. Videonun kaynağı (source) ve boyutları (width, height) belirtilmelidir. Video dosyanızın kaynak dosyasının yolunu belirlemek için kaynak etiketleri (source) kullanılmalıdır. Bu etiket ayrıca video oynatma sırasında kontrol seçeneklerinin görüntülenmesini sağlayan controls, videoyu sayfa yüklendiğinde otomatik olarak oynatan autoplay ve video bittikten sonra tekrar oynatmayı sağlayan loop özelliklerine sahiptir.
• Bu etiket ile web sayfasına ses dosyaları ekleyebilirsiniz. Ses dosyasının kaynağı (source) ve boyutları (width, height) belirtilmelidir. Ses dosyanızın kaynak dosyasının yolunu belirlemek için kaynak etiketleri (source) kullanılmalıdır. Bu etiket ayrıca ses dosyası oynatma sırasında kontrol seçeneklerinin görüntülenmesini sağlayan controls, ses dosyasını sayfa yüklendiğinde otomatik olarak oynatan autoplay ve ses dosyası bittikten sonra tekrar oynatmayı sağlayan loop özelliklerine sahiptir.

Video ve ses dosyalarının web sayfalarına gömülmesi, ziyaretçilerin sayfaları daha interaktif hale getirerek daha kolay takip etmelerine olanak sağlar. HTML5'in

HTML5'in

Video dosyanızın genişliği ve yüksekliği için kodunuzda width ve height özelliklerini belirleyebilirsiniz. Ayrıca, kullanıcıların videonu kontrol edebilmesi için controls özelliğini ekleyebilirsiniz. Videonuzun otomatik olarak oynatılmasını isterseniz, autoplay özelliğini ekleyebilirsiniz. Eğer videonuzun sonunda tekrar oynatılmasını istiyorsanız loop özelliğini kullanabilirsiniz.

Kaynak Belirleme

Video dosyasının internet adresi (URL) belirtilerek sayfa içine gömülebilir. Bunu yapmak için <source> etiketi kullanılır. Video dosyasının farklı formatları olduğundan, farklı kaynak etiketleri kullanılması gerekebilir. Bu kaynak etiketleri “src” özelliği ile belirtilir. Aşağıdaki örnek kodda MP4 formatındaki bir video dosyasının iki farklı kaynağı tanımlanmıştır.

Özellik	Açıklama
type	Video dosyasının formatını belirler
src	Video dosyasının kaynağı

Örnek kod:

<video controls>     <source src="video.mp4" type="video/mp4">     <source src="video.webm" type="video/webm"></video>

Yukarıdaki örnekte, tarayıcınız video dosyasını çalabileceği bir formatı seçer ve oynatır. Eğer tarayıcınız .webm formatını desteklemiyorsa, MP4 formatındaki video dosyasını oynatacaktır.

Boyut Ayarlama

- width: Bu özellik, videonun genişliğini belirler. Genişlik piksel cinsinden girilir. Örneğin, width="600" şeklinde kullanılır. - height: Bu özellik, videonun yüksekliğini belirler. Yükseklik de piksel cinsinden girilir. Örneğin, height="400" şeklinde kullanılır.- controls: Bu özellik, videonun oynatma kontrollerinin gösterilip gösterilmeyeceğini belirler. Bu özellik varsayılan olarak "true" durumunda olur. Yani, videonuzda kontrol kutucukları gösterilecektir. Eğer bu özelliği "false" olarak belirlerseniz, kontrol kutucukları görünmez olacaktır. - autoplay: Bu özellik, videonun otomatik olarak oynatılmasını sağlar. Varsayılan olarak, bu özellik "false" durumundadır. Eğer videoyu sayfa yüklenirken otomatik olarak oynatmak istiyorsanız, bu özelliği "true" olarak belirleyebilirsiniz. - loop: Bu özellik, videonun sonsuz döngüde oynatılıp oynatılmayacağını belirler. Varsayılan olarak, bu özellik "false" durumundadır. Eğer videosunun otomatik olarak tekrarlanmasını istiyorsanız, bu özelliği "true" olarak belirleyebilirsiniz.

- width: videonun genişliği

Videonun Genişliği Ayarlama:

Bunun yanı sıra, videonun farklı cihazlarda doğru boyutta oynatılabilmesi için responsive yapıda (uyumlu) olması da önemlidir. Bunun için, CSS kodu kullanarak media queryleri oluşturabilirsiniz.

Örneğin:

@media screen and (max-width: 768px) {   video {width: 100%;}}

Bu kod, 768 pikselden daha küçük ekranlarda (mobil cihazlar vb.) videonun tam ekran genişliğinde gösterilmesini sağlar.

Ayrıca, videonun genişlik özelliğinin yanı sıra yükseklik (height) özelliği de kullanılarak, videonun boyutları tam olarak ayarlanabilir.

- height: videonun yüksekliği

Videonun Yüksekliği, Width ile Birlikte Önemlidir

Videonun boyutları belirlenirken width özelliğinin yanında height özelliği de kullanılmalıdır. Genellikle videonun oranı dikdörtgendir, bu nedenle yükseklik ve genişlik oranı doğru bir şekilde belirtilmelidir. Örneğin, 1920 piksel genişliğinde ve 1080 piksel yüksekliğinde olan bir video için width="1920" ve height="1080" özellikleri kullanılabilir. Bu şekilde, videonun web sayfasında doğru boyutlarda görüntülenmesi sağlanır.

Bunun yanı sıra, videonun boyutları mobil cihazlar için optimize edilmelidir. Çoğu mobil cihazda videonun boyutu büyük olduğu için yavaş yükleme süreleri nedeniyle sorunlar yaşanabilir. Bu nedenle, videonun boyutu, mobil cihazlarda oynatıldığında bile kaliteli ve yeterli görüntü kalitesi sağlayacak şekilde optimize edilmelidir.

- controls: videoyı oynatırken kontrol seçeneklerinin görüntülenmesini sağlar

HTML5 ile

- autoplay: sayfa yüklendiğinde video otomatik olarak oynatılır

Ayrıca, otomatik oynatmanın yanı sıra, ses seviyesi de kontrol edilmelidir. Kullanıcıların istemedikleri bir anda yüksek sesli bir video oynatılması, olumsuz bir kullanıcı deneyimine neden olabilir. Bu nedenle, video dosyasının ses seviyesi kontrol edilerek, kullanıcının kontrolüne bırakılmalıdır.

- loop: video bittikten sonra tekrar oynatılır.

Video dosyalarınızın otomatik olarak tekrar oynatılmasını sağlamak için loop özelliğini kullanabilirsiniz. Bu özellik sayesinde video dosyası sona erdiğinde otomatik olarak başa dönecek ve tekrar oynatmaya başlayacaktır.

Loop özelliğini kullanabilmek için,

<video width="640" height="360" controls autoplay loop>  <source src="video.mp4" type="video/mp4">  <source src="video.webm" type="video/webm"></video>

Yukarıdaki örnekte loop özelliği, loop="true" olarak belirtilmiştir. Bu sayede video dosyası oynatıldıktan sonra otomatik olarak tekrar oynatmaya başlayacaktır.

Web sayfalarına ses dosyaları ekleme işlemi

Kaynak etiketleri (source) kullanılarak, eklemek istediğiniz ses dosyasının kaynağı belirtilir. Farklı formatlarda ses dosyaları olduğu için, kaynak etiketleri de ses dosya formatına uygun olarak belirlenmelidir. Örneğin, bir MP3 dosyası için aşağıdaki gibi bir kaynak etiketi kullanılabilir:

<source src="sesDosyam.mp3" type="audio/mpeg">

Ses dosyasının boyutu, width ve height özellikleri kullanılarak belirlenebilir. Örneğin, aşağıdaki kod satırı, ses dosyasının genişliğini 300 piksel olarak ayarlar:

<audio src="sesDosyam.mp3" width="300">

Ayrıca, kontrol seçeneklerinin görüntülenmesini sağlamak için controls özelliği kullanılabilir. Böylece, kullanıcılar ses dosyasını oynatırken ileri, geri, duraklat ve oynat tuşlarına sahip olabilirler. Ayrıca, sayfa yüklendiğinde otomatik olarak oynatmak için autoplay özelliği de kullanılabilir. Ses dosyası bittikten sonra tekrar oynatmak için loop özelliği de mevcuttur.

Kaynak Belirleme

Ses dosyasının html5 ile web sayfalarına eklenmesi için kaynak belirtmek gereklidir. Ses dosyasının kaynak dosyasının yolunu tanımlamak için kaynak etiketleri (source) kullanılmalıdır.

Bazı durumlarda ses dosyasının formatına göre farklı kaynak etiketleri kullanmanız gerekebilir.Bu kaynak etiketleri içinde ses dosyasının formatını belirleyen type özelliği bulunmaktadır. Örneğin wav formatında bir ses dosyası için type="audio/wav", mp3 formatında bir ses dosyası için ise type="audio/mpeg" şeklinde kaynak etiketi kullanmalısınız.

Boyut Ayarlama

• controls: Bu özellik, ses dosyasını oynatırken kontrol seçeneklerinin görüntülenmesini sağlar. Kullanıcılara ses seviyesini ayarlama, duraklatma, ileri veya geri sarmanın yanı sıra oynatma durumunu da kontrol etme imkanı verir.
• autoplay: Bu özellik, sayfa yüklendiğinde ses dosyasının otomatik olarak oynatılmasını sağlar. Bu özellik sayesinde kullanıcılar, ses dosyalarını manuel olarak oynatmak yerine, sayfa yüklenirken dosyaların otomatik olarak başlamasını tercih edebilirler.
• loop: Bu özellik, ses dosyasının bittikten sonra tekrar oynatılmasını sağlar. Bu sayede, kullanıcılar, web sayfasında bulunan ses dosyalarının her zaman oynatılmasını garanti altına alabilirler.

Boyut ayarlama, web sayfalarında bulunan ses dosyalarının uygun şekilde gösterilmesini sağlar. Ses dosyalarının doğru şekilde gömülmüş olması, web sayfasının kullanıcı dostu olmasını ve kullanıcıların web sayfasındaki işlemlerini daha kolay yapmasını sağlar.

- controls: ses dosyasını oynatırken kontrol seçeneklerinin görüntülenmesini sağlar

Ayrıca, controls özelliği ile video dosyalarında olduğu gibi, ses dosyalarınızda da oynatma seçeneği için bir ilerleme çubuğu oluşturabilirsiniz. Böylece kullanıcılar, hangi noktadan başlayacaklarını ve hangi noktada duracaklarını belirleyebilirler.

- autoplay: sayfa yüklendiğinde ses dosyası otomatik olarak oynatılır

• autoplay özelliği şu şekilde kullanılabilir:

Ayar	Açıklama
autoplay	Ses dosyasının otomatik olarak oynatılacak mı yoksa elle başlatılması mı gerekiyor belirtir. Bu ayarın değeri 'autoplay' olarak belirlenir.

Buna ek olarak, kullanıcıya ses dosyasını kontrol etme seçeneği sunmak için

- loop: ses dosyası bittikten sonra tekrar oynatılır.

Ses dosyalarınızı

Loop, anlam olarak tekrar etmek anlamına gelir. Dolayısıyla, bu özellik sayesinde, ses dosyanız bitince, tekrar başa dönerek sürekli olarak çalmaya devam eder.

Bu kodda, "loop" kelimesi, özelliği aktif hale getirmektedir. Böylece, ses dosyanız web sayfanızda sürekli olarak çalmaya başlayacaktır.

Ses dosyalarınızı HTML5 ile gömme işlemi oldukça kolaydır. Birkaç etiket kullanarak, ses dosyalarınızı web sayfalarınıza ekleyebilirsiniz. Ancak, ses dosyanızın sayfanızda sürekli olarak çalmasını istiyorsanız, "loop" özelliğini kullanmanız gerekmektedir. Bu özellik, ses dosyanızı sürekli olarak tekrar ederek çalmaya devam edecektir.