1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

Html Dersleri-7 Video-ses-flash Ve Göstergeler (son Konu)

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 6 Nisan 2017 tarihinde açılan konu

Konu Durumu:
Yanıtlara kapalı.
  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,797

    Özel Mesaj
    Tüm devrelerime tekrar merhabalar. Uzun süredir forumda çevrimiçi olamıyoruz çoğumuz. Malum okul, sınavlar vs...

    Önceki dersimizde "frames" yani çerçeveler konusunu işlemiştik. Bu dersimizde ise HTML5 ile gelen bazı güzel etiketleri anlatacağım. Önceki dersin sonunda dediğim gibi bu ders son konu olacak. Buyrun önceki derslerin linkleri:

    1. DERS
    2. DERS
    3. DERS
    4. DERS
    5. DERS
    6. DERS (Önceki Ders)

    1- <embed> Etiketi

    Pek fazla detayı olmayan, pek çok konuda işimize yarayabilecek bir etiket. Web sayfamıza video, ses, flash dosya eklememizi sağlıyor. Birkaç parametresi var. İlki "src" parametresidir. Bu parametreyi önceki derslerde görmüştük. Ekleyeceğimiz dosyanın yolunu belirleyen parametredir. Örnek olarak bir video ekleyelim:

    HTML:
    <embed src="video.mp4">
    Buradaki püf nokta videonun uzantısını da yazmaktır. Eğer yazmazsak videomuz sayfamızda görüntülenmeyecektir. Ayrıca "src" kısmına mesela youtube'den bir videonun linki de eklenebilir. Bilgisayarınızda kayıtlı bir video olmak zorunda değil.

    Diğer iki parametre ise yine önceki derslerde öğrendiğimiz "height" ve "width" parametreleridir.

    HTML:
    <embed src="video.mp4" height="300" width="300">
    300X300 boyutunda bir video oluşturmuş olduk. Bu kullanım flash dosyalar için de geçerlidir. Flash dosyaların uzantısı genellikle "swf" olarak kullanılır. Siz
    dosyanızın uzantısını bilmiyorsanız dosyaya sağ tıklayıp "özellikler" diyerek öğrenebilirsiniz. Bir örnek yapalım:

    HTML:
    <embed src="dosya.swf" height="300" width="300">
    Gördüğünüz gibi kullanışta bir fark yok. Ses dosyalarında da aynı şey geçerlidir. Sadece ses dosyalarında mantıken "height" ya da "width" kullanma ihtiyacı yoktur. Çünkü müzikte görüntü yoktur.

    <embed src="müzik.mp3">

    İleride bunları büyük çoğunlukla "javascript" ile yapacaksınız ama öğretmiş olalım.


    2- İlerleme Göstergeleri

    Örneğin bir program yüklerken programın ne kadarının yüklendiğini gösteren bir araç bulunur. Bu aracı HTML sayfamıza eklemek için 2 adet yol mevcut.

    A- <progress> Etiketi

    Kullanımı şu şekildedir:

    HTML:
    <progress value="32" max="100"></progress>
    Burada gözümüze iki adet parametre çarpıyor. Birincisi "max" adlı parametre. İkincisi ise "value" adlı parametre. Daha deminki örneği göz önünde bulundurursak
    şu anda programımız %32 (yüzde otuz iki) oranında yüklenmiş durumdadır. Mantığı anladığınızı tahmin ederek şu örneği yapıyorum:

    HTML:
    1. Durum: <progress value="25" max="100"></progress>
    2. Durum: <progress value="50" max="100"></progress>
    3. Durum: <progress value="70" max="100"></progress>
    Sonuç:
    [​IMG]


    Burada "max" parametresi "100" olmak zorunda değil aslında. Şöyle örnek verilebilir:

    HTML:
    4. Durum: <progress value="50" max="100"></progress>
    5. Durum  <progress value="25" max="50"></progress>
    Gördüğünüz üzere iki durumun da sonucu eşit. Bunun nedeni "yüzde elli" ile "ellide yirmi beş" 'in orantı oluşturmasıdır.

    B- <meter> Etiketi

    Bu da "progress" etiketi ile benzer işlevde ama bir farkı var. Mesela Windows kullananlar bilir, sabit diskimiz aşırı dolduğunda gösterge kırmızı; normal bir doluluk oranında ise yeşil olarak görünmektedir. Bu etiket çok kullanılmaz çünkü tarayıcı desteği açısından sıkıntıları mevcuttur ama yine de gösterelim:

    HTML:
    <meter min="0" max="100" low="30" optimum="60" high="100" value="95"></meter>
    
    <meter min="0" max="100" low="30" optimum="60" high="90" value="75"></meter>
    
    <meter min="0" max="100" low="30" optimum="60" high="90" value="20"></meter>
    Hemen açıklayalım: "max" ve "value" değerlerinin ne işe yaradığını zaten biliyorsunuz. "min" burada alınabilecek en küçük değeri belirtiyor.
    "low", "optimum" ve "high" parametrelerini daha deminki örnek ile açıklıyorum. Şimdi sabit diskimizdeki dosya miktarı "yüzde otuz" 'a kadar boş, "yüzde otuzdan yüzde altmışa" kadar normal ve "yüzde altmıştan yüzde yüze" kadar dolu değerinde görünecektir.

    Biraz karışık gibi görünse de kodları tek tek deneyerek uygulayabilirsiniz. Son olarak bir not belirtmek istiyorum:

    Diyelim ki biz bir dosya indireceğiz ve dosya indikçe göstergedeki artış daha fazla olacak. Maalesef şuan onu yapacak bilgiden siz de ben de mahrumum. Bunu yapmak için "JavaScript" ya da "Php" gibi sunucu dilleri öğrenmek gerekiyor...


    Evet devrelerim, HTML Derslerimizin sonuna geldik ve Allah'a şükür en az orta düzey HTML biliyoruz. Bundan sonra CSS derslerine geçeceğiz ve sayfamızı görsel anlamda güzelleştirmeye başlayacağız. Ancak benim biraz ara vermem gerekiyor. Annem derslerden dolayı bilgisayarda fazla durmama izin vermiyor. Her neyse, selametle kalın. Allah başarılarınızı daim etsin, zihin açıklığı versin. Hayırlı akşamlar... :)



     
  2. Rebell33 Guest

    • Guest
    Katılım:
    29 Nisan 2017
    Mesaj:
    10
    Alınan Beğeniler:
    14

    Özel Mesaj
    Ellerine sağlık devrem.
     
    Enter-Code ve ERVAH-I-EZEL bunu beğendi.
  3. OoBilgeKaganoO Atıldı

    • Guest
    Katılım:
    11 Nisan 2017
    Mesaj:
    141
    Alınan Beğeniler:
    163

    Özel Mesaj
    Ellerine sağlık devrem.
     
    MrTuRkIsH ve ERVAH-I-EZEL bunu beğendi.
  4. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,797

    Özel Mesaj
    Saolun devrelerim... :)
     
    Enter-Code ve Flyingfinger bunu beğendi.
  5. Tonjukuk Guest

    • Guest
    Katılım:
    12 Temmuz 2017
    Mesaj:
    17
    Alınan Beğeniler:
    10

    Özel Mesaj
    Devrem bu video kontrol tuşlarını kaldırmak yani videoyu zorla izlettirme durumu oluşturmak gibi bir şey yapabilir miyiz varsa kodunu yazar mısın ?
     
    Enter-Code ve ERVAH-I-EZEL bunu beğendi.
  6. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,797

    Özel Mesaj
    "Embed" etiketi basit ve işi gören bir etikettir, bu yüzden fazla özellik değiştirme seçeneği bulunmuyor. Onun yerine alternatif olarak "Video" etiketini kullanabilirsin. Anlatımı burada mevcut:
    http://www.m5bilisim.com/webokulu/etiketler/etiket-video.php
    http://www.webcebir.com/167-html5-video-ekleme-dersi.html

    Burada yazanlardan anladığımıza göre eğer etiketimize ek olarak "controls" isimli bir parametre vermezsek sayfada herhangi bir kontrol nesnesi gözükmeyecek ve böylece kullanıcı doğal olarak videoyu da durduramayacaktır. ;)
     
    Enter-Code, Tonjukuk ve Flyingfinger bunu beğendi.
  7. Tonjukuk Guest

    • Guest
    Katılım:
    12 Temmuz 2017
    Mesaj:
    17
    Alınan Beğeniler:
    10

    Özel Mesaj
    Sağolasın devrem ben bu kodlarla işimi hallettim fakat senin önerdiğin yöntemi de deneyeceğim :)
    Videom sessizdi bunu sesli videoya denesek sesi çalar mı bilmiyorum çünkü yabancı bir kaynaktan aldım. Fakat benim işimi gördü.
    <html>
    <head>

    <style type="text/css">

    .background-wrap {
    position: fixed;
    z-index: -1000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    }


    #video-bg-elem {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    }

    </style>

    </head>
    <body>

    <div class="background-wrap">

    <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"
    <source src="video.mp4" type="video/mp4">
    Video not supported
    </video>
    </div>
     
    Enter-Code ve ERVAH-I-EZEL bunu beğendi.
  8. Flyingfinger Atıldı

    • Guest
    Katılım:
    18 Şubat 2017
    Mesaj:
    5,094
    Alınan Beğeniler:
    10,537

    Özel Mesaj
    Ellerine sağlık devremim :)
     
    Enter-Code ve ERVAH-I-EZEL bunu beğendi.
  9. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,797

    Özel Mesaj
    Sağol devrem"im". :)
     
    Enter-Code, Flyingfinger ve BAYULKEN bunu beğendi.
  10. BAYULKEN Atıldı

    • Guest
    Katılım:
    10 Aralık 2016
    Mesaj:
    1,682
    Alınan Beğeniler:
    4,536

    Özel Mesaj
    Eline koluna sağlık devrem :)
     
    HARDEF, Enter-Code ve ERVAH-I-EZEL bunu beğendi.
  11. El-Biruni Guest

    • Guest
    Katılım:
    19 Temmuz 2017
    Mesaj:
    441
    Alınan Beğeniler:
    512

    Özel Mesaj
    Devrem ben mobilden 920text editor ile calisiyorum herneyse normal video ekledim ama youtubeden video ekleyince hata veriyor neden olabilir
     
    Enter-Code ve ERVAH-I-EZEL bunu beğendi.
  12. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,797

    Özel Mesaj
    Nasıl bir kod yazıp nasıl bir hata aldığını belirtirsen yardımcı olabilirim devrem.
     
  13. El-Biruni Guest

    • Guest
    Katılım:
    19 Temmuz 2017
    Mesaj:
    441
    Alınan Beğeniler:
    512

    Özel Mesaj
    ERVAH-I-EZEL bunu beğendi.
  14. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,797

    Özel Mesaj
    Devrem "Embed" etiketi ile sadece senin bilgisayar veya telefonunda olan bir videonun adresini belirtebilirsin. İnternet adresi ile video göruntülemek için şu linkteki konuya bakabilirsin:
    http://www.bilisimzirve.com/html-youtube-video-ekleme.html
    İyi forumlar... ;)
     
    Enter-Code bunu beğendi.
  15. El-Biruni Guest

    • Guest
    Katılım:
    19 Temmuz 2017
    Mesaj:
    441
    Alınan Beğeniler:
    512

    Özel Mesaj
    Ayni video telefonumdada var ama neyse yindede saol
     
    MYWWW, ERVAH-I-EZEL ve Enter-Code bunu beğendi.
  16. fedakarlik Guest

    • Guest
    Katılım:
    13 Ağustos 2017
    Mesaj:
    18
    Alınan Beğeniler:
    23

    Özel Mesaj
    CSS dersleri başladı mı Link var mı ?
     
    ERVAH-I-EZEL ve El-Biruni bunu beğendi.
  17. El-Biruni Guest

    • Guest
    Katılım:
    19 Temmuz 2017
    Mesaj:
    441
    Alınan Beğeniler:
    512

    Özel Mesaj
    Burada neredeyse tüm linkeri var ERVAH-I-EZEL devremin.
     
    ERVAH-I-EZEL bunu beğendi.
  18. El-Biruni Guest

    • Guest
    Katılım:
    19 Temmuz 2017
    Mesaj:
    441
    Alınan Beğeniler:
    512

    Özel Mesaj
  19. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,797

    Özel Mesaj
    BAYULKEN bunu beğendi.
  20. BAYULKEN Atıldı

    • Guest
    Katılım:
    10 Aralık 2016
    Mesaj:
    1,682
    Alınan Beğeniler:
    4,536

    Özel Mesaj
    Senin konuların bir başka oluyordu devrem sen konularına devam etmedikçe ben yol haritamı kaybetmiş gibi oldu
    etrafta boş boş geziyorum can sıkıntısından felan kız oyunları oynuyorum :D
     
    HARDEF ve ERVAH-I-EZEL bunu beğendi.
Konu Durumu:
Yanıtlara kapalı.

Bu Sayfayı Paylaş