////Bootstrap popover ile inline player yapımı.

Bootstrap popover ile inline player yapımı.

Bu yazımızda Bootstrap popover kullanarak basit bir inline player yapımından bahsedeceğim.
Öncelikle getbootstrap.com adresinden Bootstrap’ın güncel versiyonu indirip gerekli css ve javascript dosyalarını projemize ekleyerek başlayabiliriz.

Dosyaları indirmek yerine cdn üzerinden de kullanabilirsiniz.

<!-- Minify Edilmiş Güncel CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Tema Dosyası (Opsiyonel) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Minify Edilmiş Güncel JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap için gerekli dosyaları çektikten sonra player eklemek istediğimiz nesnenin özelliklerine aşağıdaki parametreleri giriyoruz.

data-toggle="popover" // Bootstrap'e bu elemana popover eklediğimizi söylüyoruz. 
data-html="true" // popover içine html ile player gömmemizi sağlıyor. 
data-content="" // Buraya html olarak player kodlarını ekliyoruz. 
data-container="body" // Bu özellik popover ın herhangi bir overflow problemi yaşamaması için body elementini container olarak almasını sağlıyor.

data-content ile belirtilen içerik alanına da HTML5 oynatıcımızı ekliyoruz.

<audio controls autoplay>
    <source src='/account/arama-kayitlari/5c8d0572-c2bd-464e-9785-216e045d67c3/stream' type='audio/ogg'> 
    <source src='/account/arama-kayitlari/5c8d0572-c2bd-464e-9785-216e045d67c3/stream' type='audio/wav'>
    Tarayıcınız bu özelliği desteklememektedir.
</audio>

Bu işlemlerden sonra yapmamız gereken küçük bir düzeltme kaldı. Bu da Bootstrap’ın popover genişliği sabitlenmiş durumda. Oynatıcımızın sığması için popover genişliğini max-width değerini değiştirerek yeniden belirliyoruz.

.popover
  max-width: 330px

Sonuç olarak projemize bootstrap dosyalarını çektikten sonra aşağıdaki kodla inline bir oynatıcıya sahip oluyoruz.

<a class="player-popover" title="" data-toggle="popover" data-html="true"
   data-content="<audio controls autoplay><source src='/account/arama-kayitlari/5c8d0572-c2bd-464e-9785-216e045d67c3/stream' type='audio/ogg'> <source src='/account/arama-kayitlari/5c8d0572-c2bd-464e-9785-216e045d67c3/stream' type='audio/wav'>Tarayıcınız bu özelliği desteklememektedir.</audio>"
   data-placement="left" href="#" data-original-title="Ses Kaydını Dinle">
    <i class="fa fa-volume-up listen-call-record"></i>
</a>

İyi çalışmalar.

tarafından|2018-02-08T14:16:31+00:00Ocak 18, 2017|Kategoriler: Geliştirici Makaleleri, Genel|Yorum yok
Bu yazı faydalı mıydı? Hayır | 0 Evet | 4

Yazar Hakkında:

Siz de fikrinizi belirtin