wiki:ReDesign/VideoPlayer

Video přehrávač

Pro přehrávání videa byl použit modul mediaElement.js https://www.mediaelementjs.com

Přehrávač se skládá z HTML kódu, JS a CSS.

1. HTML kód

HTML kód je implementován v JSP šabloně video/watch.jsp.

Do <video> tagu je nastaven atribut poster, který načítá náhledový obrázek videa. Uvnitř <video> tagu jsou vkládány jednotlivé zdrojové video soubory. Souborům nastavujeme typ a kvalitu.

<div class="media-wrapper center">
  <video id="player1" width="640" height="360" style="width:100%;height:100%;" controls preload="none" poster="${imgUrl}">
    <c:if test="${ab.state.videoLinkNameSD != null}">
      <source src="${videoUrlSD}" type='video/mp4'  data-quality="SD"/>
    </c:if>
    <c:if test="${ab.state.videoLinkNameHD != null}">
      <source src="${videoUrlHD}" type='video/mp4'data-quality="HD"/>
    </c:if>
    <c:if test="${ab.state.videoLinkNameFullHD != null}">
      <source src="${videoUrlFullHD}" type='video/mp4' data-quality="FullHD"/>
    </c:if>
  </video>
</div>

2. JS script
JS provede spuštění mediaElement.js přehrávače. Ve skriptu se nejprve provede nastavení aktuálního jazyka pro ovládací prvky. Následně JS vyhledá všechny video a audio elementyna stránce a provede spuštění přehrávače. Ze strany uživatelskéhorozhraní jde o přípravu pro případné vícenásobné video elementy na jedné stránce, nebo pro přehrávání audio obsahu.

Do funkce MediaElementPlayer?() se předává parametr video element a sada parametrů, která provádí konfiguraci přehrávače a načítá do něj doplňky.

<script>
  <c:set var="ddlLanguage"><f:message key="ddlLocale" /></c:set>
  <c:if test="${ddlLanguage == 'cs'}" >
    mejs.i18n.language('cs'); 
  </c:if>
  <c:if test="${ddlLanguage != 'cs'}" >
    mejs.i18n.language('en');
  </c:if>

  var mediaElements = document.querySelectorAll('video, audio');

  for (var i = 0, total = mediaElements.length; i < total; i++) {
    new MediaElementPlayer(mediaElements[i], {
      features: ['playpause', 'loop', 'volume', 'current', 'progress', 'duration', 'skipback', 'jumpforward', 'speed', 'quality', 'fullscreen']
     });
  };
</script>

Konfigurační část features obsahuje seznam ovládacích prvků a doplňků, které má přehrávač načíst. V seznamu je respektováno pořadí zapsaných prvků, které se ve výsledku promítne do výsledné podoby přehrávače.

3. Měně známé ovládací prvky:

  • loop – přehrávání videa ve smyčce,
  • skipback – skok zpět o 30 vteřin,
  • skipforward – skok vpřed o 30 vteřin,
  • speed – menu pro zvolení rychlostí přehrávání videa.
Last modified 19 months ago Last modified on 04/18/19 09:24:49