MooPlay.js – Kendi ortam oynatıcını tasarla

31Okunma
2 yorum

MooPlay.js

Böyle  paylaşımlar  yaptığım zaman içimde acayip bir  sevinç oluyor. Neden mi  ? Şimdiye  kadar karşılaştığım  web üzerinden video oynatmaya  yarayan eklentilerin teknolojilerin bana  göre  hem en kullanışlı  olanı hemde  en iyisi ( sadece bana göre ).  Eklentinin  en çok hoşuma  giden özelliği tam ekran modunda video  oynatmaya  geçiş yapıldığı zaman video eşit  bir  şekilde tam ekran boyutuna  kayarak geçiyor ve  site  düzeninde  hiçbir  değişiklik yada  arıza olmuyor. Geri küçültme  aynı  şekilde  tekrar  ediyor.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js ve Css dosya adresleri :

<link rel="stylesheet" href="source/demo.css" type="text/css" media="screen" charset="utf-8">
<!-- MooTools -->
<script src="Assets/mootools-1.2.4-core-nc.js" type="text/javascript"></script>
<script src="Assets/mootools-1.2.4.4-more.js" type="text/javascript"></script>
<!-- MavSelectBox -->
<script src="Assets/class.MavSelectBox.js" type="text/javascript"></script>
<!-- ProgressBar -->
<script src="Assets/ProgressBar.js" type="text/javascript"></script>
<!-- SubRipReader -->
<script src="Assets/mooplay.0.6.js" type="text/javascript"></script>
<script src="Assets/init.js" type="text/javascript"></script>
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div id="static_container">
    <div id="player">
        <video id="video">
            <source src="http://mintik.com/wp-content/uploads/2012/04/movie.mp4" type='video/mp4'>
                <source src="http://mintik.com/wp-content/uploads/2012/04/movie.ogg" type='video/ogg'>
        </video>
        <div id="subtitle"></div>
        <div id="controls_container">
            <div id="controls">
                <div class="layer"></div>
                <div class="pannel">
                    <div id="line1"> <a id="info" href="http://www.mintik.com/?p=5952" title="Mootools MooPlay" target="_blank"></a>

                        <select id="subtitles_select">
                            <option value="" class="none">no</option>
                            <option value="/media/subtitle/sintel_en.srt" class="en">en</option>
                            <option value="/media/subtitle/sintel_fr.srt" class="fr">fr</option>
                            <option value="/media/subtitle/sintel_es.srt" class="es">es</option>
                            <option value="/media/subtitle/sintel_de.srt" class="de">de</option>
                            <option value="/media/subtitle/sintel_it.srt" class="it">it</option>
                            <option value="/media/subtitle/sintel_nl.srt" class="nl">nl</option>
                            <option value="/media/subtitle/sintel_pl.srt" class="pl">pl</option>
                            <option value="/media/subtitle/sintel_pt.srt" class="pt">pt</option>
                            <option value="/media/subtitle/sintel_ru.srt" class="ru">ru</option>
                        </select> <a id="playpause" href="#"></a>
 <a id="mute" href="#"></a>

                        <div id="slider_volume">
                            <div id="full_volume"></div>
                            <div id="knob_volume"></div>
                        </div>
                        <div id="separator"></div> <a id="fullscreen" href="#"></a>

                    </div>
                    <div class="clear"></div>
                    <div id="line2">
                        <div class="time"> <span id="current_time_container">0:00:00</span>

                        </div>
                        <div id="progresses_bar">
                            <div id="load"></div>
                            <div id="time_tooltip"></div>
                            <div id="play_slider">
                                <div id="knob_slider"></div>
                            </div>
                        </div>
                        <div class="time">- <span id="remaining_time_container">0:00:00</span>

                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-03 tarihinde yayınlandı,Toplam 2830 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(2 yorum)
Yükleniyor...
Emre Yorumcu LV.1
2014-04-23 21:36:53 回 Yanıtla

Merhaba kardeş.Bu Player`i nasıl siteye ekliyecez?

    Ali Blogger
    2014-04-24 21:12:18 回 Yanıtla

    @Emre Yazmış olduğunuz yorumdan sonra gerekli dosya ve kaynak kodların hangi bölümlere ekleneceğini basit bir şekilde gösterdim. Eğer WordPress sisteminde bunu kullanmak istiyorsanız sitenizde gerekli bölümlere doğru şekilde dosya adreslerini ve html kodlarını yerleştirdikten sonra özel alanlar yardımıyla video player içinde kendi videolarınızı çalıştırabilirsiniz.