VideoPlayer

Organism
HTML5 video oynatıcı. Kalite, altyazı, ses kanalı, oynatma hızı seçimi; özel WebVTT altyazı overlay; otomatik gizlenen kontroller; geliştirici kontrolü.
Tam özellikli

Ayarlar
Big Buck Bunny
0:00/0:00
Yalnızca altyazı

Lecture — Episode 1
0:00/0:00
Minimal (kontroller her zaman görünür)

0:00/0:00
Otomatik oynat + sessiz

0:00/0:00
Source modules/ui/VideoPlayer.ejs
<%
var _id              = locals.id              || ('vp-' + Math.random().toString(36).substr(2, 9));
var _poster          = locals.poster          || '';
var _title           = locals.title           || '';
var _autoPlay        = locals.autoPlay        || false;
var _loop            = locals.loop            || false;
var _startMuted      = locals.startMuted      || false;
var _qualities       = locals.qualities       || [];
var _defaultQuality  = locals.defaultQuality  || (_qualities.length > 0 ? _qualities[0].value : '');
var _defaultQualityLabel = (function() {
  if (!_qualities.length) return 'Auto';
  var match = _qualities.filter(function(q) { return q.value === _defaultQuality; })[0];
  return match ? match.label : (_qualities[0] ? _qualities[0].label : 'Auto');
})();
var _subtitles       = locals.subtitles       || [];
var _audioTracks     = locals.audioTracks     || [];
var _autoHideControls = (locals.autoHideControls !== undefined) ? locals.autoHideControls : true;
var _className       = locals.className       || '';

var _src = locals.src || '';
var _sources = Array.isArray(_src)
  ? _src
  : (typeof _src === 'string' ? [{ src: _src }] : [_src]);

var _hasSettings = true; // always show gear (speed is always available)
var _hasSubs     = _subtitles.length > 0;
var _hasQualities = _qualities.length > 0;
var _hasAudio    = _audioTracks.length > 1;

var _speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
%>



  <%/* ── Video element ── */%>
  

  <%/* ── Loading spinner ── */%>
  
    
  

  <%/* ── Centre play overlay ── */%>
  
    
      
    
  

  <%/* ── Subtitle overlay ── */%>
  
    
  

  <%/* ── Controls layer ── */%>
  

    <%/* Vignette */%>
    

    <%/* ── Settings panel ── */%>
    

      <%/* Main view */%>
      
        
          
          Ayarlar
        
        

          <% if (_hasQualities) { %>
          
          <% } %>

          

          <% if (_hasSubs) { %>
          
          
          <% } %>

          <% if (_hasAudio) { %>
          
          <% } %>

        
      

      <%/* Quality sub-view */%>
      <% if (_hasQualities) { %>
      
        
        
          <% _qualities.forEach(function(q) { %>
          
          <% }); %>
        
      
      <% } %>

      <%/* Speed sub-view */%>
      
        
        
          <% _speeds.forEach(function(s) { %>
          
          <% }); %>
        
      

      <%/* Subtitles sub-view */%>
      <% if (_hasSubs) { %>
      
        
        
          
          <% _subtitles.forEach(function(sub, i) { %>
          
          <% }); %>
        
      

      <%/* Subtitle size sub-view */%>
      
        
        
          <% var _fontSizes = [
               { key: 'sm', label: 'Küçük',     size: '0.8rem'  },
               { key: 'md', label: 'Orta',       size: '1rem'    },
               { key: 'lg', label: 'Büyük',      size: '1.3rem'  },
               { key: 'xl', label: 'Çok Büyük',  size: '1.65rem' }
             ];
             _fontSizes.forEach(function(fs) { %>
          
          <% }); %>
        
      
      <% } %>

      <%/* Language sub-view */%>
      <% if (_hasAudio) { %>
      
        
        
          <% _audioTracks.forEach(function(track, i) { %>
          
          <% }); %>
        
      
      <% } %>

    <%/* end settings panel */%>

    <%/* ── Controls bar ── */%>
    

      <% if (_title) { %>
      <%= _title %>
      <% } %>

      <%/* Progress bar */%>
      
        
        
        
        
        
      

      <%/* Control buttons */%>
      

        

        

        

        <%/* Volume */%>
        
          
          
            
          
        

        <%/* Time */%>
        
          0:00/0:00
        

        <%/* Settings */%>
        

        <%/* Fullscreen */%>
        

      
    
  <%/* end controls layer */%>