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>
Merhaba kardeş.Bu Player`i nasıl siteye ekliyecez?
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.