VideoJS Player Kullanımı

Photo of author
Mert Dirilik
Yayın Tarihi:
Güncelleme:

Bu yazıda VideoJS player Kullanımına dair anlatımlar bulunmaktadır. Bir çok uzantıda video formatını mobil ve bilgisayar destekli olarak paylaşabilirsiniz.

VideoJS player, websitenizde video oynatabilmek için geliştirilmiştir. İsminden anlaşılacağı üzere js tabanlı bir kütüphanedir. Kolay kullanım ve açık kaynak kodlu oluşu sayesinde kendinize göre düzenleyebilirsiniz. Kontrol bar bölümünden ise tema yazabilirsiniz.

VideoJS Player Entegrasyonu

VideoJS bir çok uzantıyı desteklemektedir.
Videojs player websitenizde video oynatmak için kullanabileceğiniz güzel ve ücretsiz bir alternatif.

Öncelikle VideoJS kendi sitesinden ücretsiz olarak dosyaları indirelim. Alternatif olarak sizlere kendi düzenlemiş olduğum player dosyalarını konunun en alt bölümünde vereceğim. VideoJS ücretsiz olarak CDN hizmeti vermekte. CDN kodları ile kullanımı ise şu şekildedir:

<head>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
 poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
 <source src="MY_VIDEO.mp4" type="video/mp4">
<source src="MY_VIDEO.webm" type="video/webm">
     <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
 </video>
  <script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
</body>

 

CDN ile kullanım:

1- Kendimize player.html adında bir dosya oluşturup kodları içerisinde atalım.
2- type’video/mp4′ bölümünü oynatmak istediğimiz video türüne göre değiştirelim.
3- “src” adresine video adresimizi yazalım.

İşlem bu kadar android , ios ve masaüstü cihazlarda hiç bir sorun olmadan rahatlıkla çalışmaktadır. HLS yayınlarını yani canlı stream kaynaklarınıda bu player ile gösterebilirsiniz. HLS yayın vermek istiyorsanız kodlar üzerinde yapacağınız tek değişiklik video type bölümünü type=”application/x-mpegURL olarak belirleyin.

Ayrıca yayınlara alt yazı , kalite seçenekleri ekleyebilmeniz mümkün bunun için yardımcı dökümana göz atabilirsiniz. VideoJS eklentisi Xtream Codes ve diğer bir çok panel ile uyumlu olarak çalışmaktadır. Bu sayede VideoJS Player Kullanım işlemini tamamlamış olduk. Son olarak Jwplayer yada mediaElement gibi kütüphaneler yerine oldukça yaygın kullanılır.

Kendi özelleştirdiğim player kütüphanesini Buradan indirebilirsiniz.

Photo of author

Mert Dirilik

Eğitimli insanlar topluma borçludurlar. Bir işin nasıl yapılabileceğini biliyorken bir başkasının yapamadığını görüp susmaları kendilerini yetiştiren o topluma ihanettir.

“VideoJS Player Kullanımı” üzerine 14 yorum

  1. video.js sitesinde hangi dosyayı indireceğiz indir diye bir şey var ona tıklayınca hiçbir şey olmuyor dosyalarda yok sitesinde nasıl kurulum yapılacak çözemedim yardımcı olabilir misiniz

    Cevapla

    • Bu soruyu sorduğunuza göre konuya çok uzaksınız. Terminal üzerinden de indirebilirsiniz, head içinde de çağırabilirsiniz. Çok farklı yolları var önce kendi metodunuzu belirlemeniz gerekiyor. İlle dosya indireyim derseniz github üzerinden projeye erişebilirsiniz. Biraz daha araştırma yaparsanız daha sağlıklı şekilde ilerleyebilirsiniz.

      Cevapla

  3. merhaba

    çok yararlı oldu teşekkür ederim.

    playerı uyguladım. Mobilde sayfa tabları veya uygulamalar arası geçişlerde yayın durmakta. sürekli yayın verir hale nasıl getirebilirim?

    Cevapla

    • Html tagına şu şekilde ekleme yapabilirsin : ‘<'video-js autoplay src=..." veya javascript ile onload eventinden sonra : "videojs('player', {autoplay: true});" kodu ile autoplay özelliği eklerseniz video kaynağı otomatik olarak başlar.

      Cevapla

  4. Wmaracından geliyorum bu konuya inanın o kadar puling denedim ki bir türlü yapamadım çok teşekkür ediyorum tıkır tıkır çalışıyor

    Cevapla

  6. plung buldum ama entegre edemiyorum. vaktiniz var ise ftp den mediaplayer.php den ayarlanması plung eklenmesi gerekiyor ekleyebilirmisiniz

    Cevapla

  7. ovoo yazılımı kullanılıyorum cms .. player olarak video.js kullanıyor ama google reklam kodunu koyacağımyeri bulamadım yardımcı olabılırmısınız

    Cevapla

    • Video.js için load eventini js ile kontrol eden küçük bir fonksiyon yazabilirsiniz. Örnek olarak video src kaynağını ilk load oluşunda boş getirip video alanına bir reklam divi eklersiniz. Reklam geç yaptıktan sonra veya reklam bittikten sonra js kodu ile videojs kaynağını güncelleyip görüntü gelmesini sağlayabilirsiniz. Ancak sizin reklam koyma işleminiz biraz daha detaylı olmasını istiyorsanız(video anında reklam çıkması gibi), videojs plugin kullanmanızı tavsiye ederim. Reklam plugin kullanımı için kaynağı ise şuradan bulabilirsin : videojs-contrib-ads

      Cevapla

Yorum yapın