Medya Etiketleri

HTML5 ile gelen ActiveX, Flash Player, Quicktime gibi web eklentilerine ihtiyaç duymadan ses ve video gibi medya dosyalarımızın oynatılabildiği etiketlerdir.

<audio> etiketi

Sayfamızda bir ses dosyası çalmak istediğimizde kullandığımız etikettir. Daha önceden sayfamızda müzik çalmak için ilk önce flash player eklentisini eklememiz daha sonra da dosyamızı sayfamıza embed etmemiz, yani gömmemiz gerekiyordu. Artık tek yapmamız gereken <audio> etiketini kullanmak.

    <audio controls preload="none" style="width: 420px;">
        <source src="http://www.zinzinzibidi.com/web_tasarim/Content/media/song.mp3" type="audio/mpeg">
        <source src="http://www.zinzinzibidi.com/web_tasarim/Content/media/song.ogg" type="audio/ogg">
        Tarayıcınız HTML5 Audio formatını desteklemiyor
    </audio>
    

Çıktımız ise şu şekilde olacaktır:

<audio> etiketi içine yazılan atıflardan bahsedeyim biraz. controls atfı müzikçaların tarayıcımızda gözükmesini sağlıyor. preload="none" ile kullanıcı sayfaya girdiğinde müziğin önceden yüklenmesini engelliyor. style atfı ile müzik çaların genişliğini belirledik.

Burada asıl dikkat etilmesi gereken etiket <source>'tur. source dilimizde kaynak anlamına gelir ve müzikçalarda çalacak parçanın kaynak adreslerini içerir. type atfı ile dosyanın formatını belirtmeliyiz. mp3 formatını Google Chrome ve Safari tarayıcıları desteklemektedir. Buna rağmen diğer birçok tarayıcı hâlâ bu formatı desteklemediği için ikinci bir seçenek olarak ogg formatını kullanıyoruz. Bu formatı ise Firefox ve Opera tarayıcıları desteklemektedir. Örneğin; Firefox kullanan bir kullanıcı bu sayfaya girdiğinde mp3 formatı çalışmayacak ve tarayıcı parçayı ogg formatında çalmaya başlayacaktır.

Eğer bir parçayı sayfanın içine gömüp, kullanıcı tarafından görüntülenmesini istemiyorsak ve sayfaya girdiği andan itibaren ses dosyamızı çalıştırmak istiyorsak aşağıdaki kodları kullanmalısınız.

    <audio autoplay="autoplay">
        <source src="http://www.zinzinzibidi.com/web_tasarim/Content/media/song.mp3" type="audio/mpeg">
        <source src="http://www.zinzinzibidi.com/web_tasarim/Content/media/song.ogg" type="audio/ogg">
    </audio>
    

Sinir bozucu olmaması adına bu kodların çıktısını vermiyorum.

<video> etiketi

<audio> etiketinde olduğu gibi artık HTML5 ile Flash eklentisi yüklemenize gerek yok. Sitenize doğrudan <video> etiketi ile video yükleyebilirsiniz.

        <video width="480" controls>
            <source src="http://zinzinzibidi.com/Areas/web_tasarim/Content/media/video.mp4" type="video/mp4"/>
            <source src="http://zinzinzibidi.com/Areas/web_tasarim/Content/media/video.ogv" type="video/ogg"/>
            Tarayıcınız HTML5 Video formatını desteklemiyor
        </video>
    

Çıktımız ise şu şekilde olacaktır:

<audio> etiketinde olduğu gibi sayfanızı ziyaret edenlerin doğrudan video izlemesini sağlayabilirsiniz. Bunun için aşağıdaki kodları kullanmalısınız. Bununla birlikte loop özelliği videonuzun bir döngü içinde sonsuza dek çalışmasını sağlar. Bu özelliği kaldırırsanız videonuz sadece bir kez gösterilecektir.

    <video width="480" controls autoplay loop>
        <source src="http://www.zinzinzibidi.com/Areas/web_tasarim/Content/media/video.mp4" type="video/mp4"/>
        <source src="http://www.zinzinzibidi.com/Areas/web_tasarim/Content/media/video.ogv" type="video/ogg"/>
        Tarayıcınız HTML5 Video formatını desteklemiyor
    </video>
    

Sayfanızı ziyaret eden kullanıcıların video çalıştırmaya başlamadan önce videonun önceden yüklenmesini isteyebilirsiniz. Bunun için ise preload özelliğini kullanmalısınız.

    <video width="480" controls preload>
        <source src="http://www.zinzinzibidi.com/Areas/web_tasarim/Content/media/video.mp4" type="video/mp4"/>
        <source src="http://www.zinzinzibidi.com/Areas/web_tasarim/Content/media/video.ogv" type="video/ogg"/>
        Tarayıcınız HTML5 Video formatını desteklemiyor
    </video>
    

Audio ve Video için MimeType'lar

Birçok sunucu HTML5 Audio ve Video özelliklerini desteklememektedir. Bunun için sitenizin web.config dosyasının içine aşağıdaki kodları eklemelisiniz.

    <staticContent>
        <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
        <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
        <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
        <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
        <mimeMap fileExtension=".webm" mimeType="video/webm" /> 
        <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
        <mimeMap fileExtension=".spx" mimeType="audio/ogg" /> 
        <mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
        <mimeMap fileExtension=".svgz" mimeType="images/svg+xml" /> 
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".otf" mimeType="font/otf" />
        <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
    </staticContent>
    

Eğer web.config dosyasını nasıl oluşturacağınızı bilmiyorsanız ilk önce host hizmeti sunan firmanız ile iletişime geçin. Sizin için bir web.config dosyası oluşturacaklardır. Daha sonra beraber yapacağımız sitelerde web.config dosyasını Visual Studio bizim için oluşturacak. Bunun için şimdiden sıkıntıya girmeye gerek yok. =)

<img /> etiketi atıfları

Daha önceden <img /> etiketini kullanmış ve bu etiketin sadece alt atfını kullanmıştık. Şimdi ise <img /> etiketinin sıklıkla kullanılan diğer atıflarını inceleyeceğiz.

    <img src="~/Areas/web_tasarim/img/lacin.jpg" alt="laçin ağaçları" title="Laçin ağaçları" width="360"/><br/>
    <img src="~/Areas/web_tasarim/img/lacin.jpg" alt="laçin ağaçları" title="Laçin ağaçları" height="80"/><br/>
    <img src="~/Areas/web_tasarim/img/lacin.jpg" alt="laçin ağaçları" title="Laçin ağaçları" width="360" height="80"/>
    

Çıktımıza bakalım:





title atfı başlık anlamındadır. Fare ile resimlerin üzerine geldiğinizde "Laçin ağaçları" yazacaktır. İşte title atfı bu işe yarar. Bunu daha önce birçok sitede görmüş olmalısınız. width ve height atıfları ile resminize genişlik ve yükseklik değerleri verebilirsiniz. Buna rağmen width ve height atfının beraber kullanılması tavsiye edilmez. Resminizin oranını bozar ve orantısız görünmesini sağlar. Bu sebeble ya sadece width ya da height atfını kullanmalısınız.

    <img src="~/Areas/web_tasarim/img/lacin.jpg" alt="laçin ağaçları" title="Laçin ağaçları" width="40%"/><br/>
    <img src="~/Areas/web_tasarim/img/lacin.jpg" alt="laçin ağaçları" title="Laçin ağaçları" width="20%"/>
    

Çıktımıza bakalım:




Eğer responsive ya da mobile bir site yapıyorsanız pixel değerleri yerine yüzde değerleri kullanmalısınız. Resminiz tarayıcı çözünürlüğüne göre yeniden boyutlacaktır. Görüntü kalitesini düşürmemek için kullanacağınız resmin çözünürlüğünün de yüksek olmasına özen göstermelisiniz.

İleri HTML5 derslerini burada bitiriyorum arkadaşlar. Umarım faydalı olmuştur. Hazırsanız artık CSS3 öğrenmeye başlayabilirsiniz.