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

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="https://www.mintik.com/wp-content/uploads/2012/04/movie.mp4" type='video/mp4'>
   <source src="https://www.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="https://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>