HTML’ye Video Nasıl Eklenir?
Web sitenize video eklemenin birkaç yolu vardır. <embed>, <frame> ve <object> etiketleri, videoları bir HTML belgesine eklemek için kullanılıyordu. Ancak artık kullanımdan kaldırıldılar, bu nedenle <video> ve <iframe> etiketlerinin nasıl kullanılacağını anlamak için bir göz atalım.
HTML’ye video eklemek için <video> etiketini kullanın
<video> etiketi, kardeşi <audio> ile birlikte HTML5’te media çalıştırmak için eklenmiştir. HTML5 öncesi videoları görüntülemek için tarayıcılara eklenti kurarak videoyu yerleştirme(embed) yapılırdı. Artık <video> etiketi kaynak özelliğine bir video URL’si eklenerek tanımlanabilir. Bilgisayardan içe aktarılan veya harici bir web sitesi tarafından barındırılan videoları gömmek için kullanabilirsiniz.
Temel kullanım için, bir HTML belgesinde yapmamız gereken tek şey, video URL’sini <source> öğesini kullanarak video URL’sini eklemek ve web sitesi ziyaretçilerinin video seçeneklerini kontrol edebilmesi için kontroller özelliğini eklemek. Videonun boyutunu ayarlamak için width ve height özelliklerini kullanmak da önemlidir. Basit bir örnek görelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Tasarımkodlama</title> </head> <body> <video width="320" height="240" controls> <source src="http://techslides.com/demos/sample-videos/small.ogv" type=video/ogg> <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4> </video> </body> </html> |
src: video içeriğinin barındırıldığı URL’yi tanımlar,
type: dosyanın formatını tanımlar,
controls: içeriğin oynatılmasını kontrol etmek için belirtilmesi gerekli kontroller.
Ayrıca, video içeriğinin yüklenme şeklini etkilemek için kullanılabilecek birkaç isteğe bağlı özellik vardır. Bu özellikler şunları içerir:
autoplay: videonun hazır olur olmaz oynatılmaya başlayacağını belirtir,
loop: videonun her bittiğinde yeniden başlayacağını belirtir,
poster: oynatma başlayana kadar videonun posteri olarak görüntülenecek bir görüntü seçen,
preload: Yazarın, sayfa yüklendiğinde videonun nasıl yüklenmesi gerektiğini düşündüğünü söyler.
Hatırlanması gereken bir diğer kritik nokta da, tüm modern tarayıcıların <video> öğesini desteklediğidir.
Şu anda HTML5 <video> etiketi 3 tür video dosyasını desteklemektedir:
| Format | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Otomatik video oynatma nasıl ayarlanır
Video için otomatik oynatmayı ayarlamak üzere, aşağıdaki gibi <video> etiketi için autoplay özelliğini eklemeniz yeterlidir:
|
1 2 3 |
<video width="320" height="240" autoplay> |
Otomatik oynatılan video için “controls” seçeneğine sahip olmayı etkinleştirmek istemeniz durumunda otomatik oynatma kontrollerini ayarlayın.
Otomatik video oynatmayı ayarlama örneği:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Tasarımkodlama</title> </head> <body> <video width="320" height="240" controls autoplay> <source src="http://techslides.com/demos/sample-videos/small.ogv" type=video/ogg> <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4> </video> </body> </html> |
<iframe> etiketini kullanarak Youtube’dan videolar ekleyin
HTML’de video oynatmanın en kolay yolu, kaynak olarak YouTube’u kullanmaktır. Öncelikle videoyu YouTube’a yüklemeniz veya web sayfanızdaki <iframe> öğesine eklenecek olan mevcut bir videonun gömme kodunu kopyalamanız gerekir.
YouTube videosunun gömme bağlantısına sahip olmak için şu basit adımları izleyin:
- Videoyu YouTube’da açın ve paylaş düğmesine tıklayın.
- Yerleştir kodunu açın.
- Kaynak bağlantısını kopyalayın.
Yerleştir bağlantısını kopyalarken, <iframe> öğenizin src’si olarak HTML belgenize ekleyebilirsiniz. Ayrıca videonuzun genişliğini ve yüksekliğini tanımlayın. Şimdi nasıl görüneceğini görelim.
<iframe> etiketini kullanarak Youtube’dan video ekleme örneği:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Tasarımkodlama</title> </head> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/GuZRA5Tz-P4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </body> </html> |
Yorum Yap