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

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ç:



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...

 

Ellerine sağlık devrem.

 

Ellerine sağlık devrem.

 

Saolun devrelerim...

 

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 ?

 

"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.

 

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>

 

Ellerine sağlık devremim

 

Sağol devrem"im".

 

Eline koluna sağlık devrem

 

Devrem ben mobilden 920text editor ile calisiyorum herneyse normal video ekledim ama youtubeden video ekleyince hata veriyor neden olabilir

 

Nasıl bir kod yazıp nasıl bir hata aldığını belirtirsen yardımcı olabilirim devrem.

 

<embed src="http://m.youtube.com/watch?v=ogfcHHyq_fY" height="400" width="400">

Hem https kullanip denedim bide height ve width ı silip denedim oluyor bu web sayfasina ulasilamiyor diyor

 

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...

 

Ayni video telefonumdada var ama neyse yindede saol

 

CSS dersleri başladı mı Link var mı ?

 

Burada neredeyse tüm linkeri var ERVAH-I-EZEL devremin.

 

Link=>https://forum.ayyildiz.org/konu/hack-arşiv-profosyonel-olun-teknodib.121764/

 

Devrem linkleri vermiş:

Sağol devrem.

 

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