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

Preview

Ayarlar

Big Buck Bunny

0:00/0:00

Code

<%- include('modules/ui/VideoPlayer', {
  src:         'https://placeholdervideo.dev/1920x1080',
  poster:      'https://example.com/poster.jpg',
  title:       'Big Buck Bunny',
  qualities: [
    { label: '1080p',  value: 'https://example.com/video-1080p.mp4' },
    { label: '720p',   value: 'https://example.com/video-720p.mp4'  },
    { label: '480p',   value: 'https://example.com/video-480p.mp4'  },
  ],
  defaultQuality: 'https://example.com/video-1080p.mp4',
  subtitles: [
    { label: 'Türkçe', srclang: 'tr', src: '/subtitles/tr.vtt' },
    { label: 'English', srclang: 'en', src: '/subtitles/en.vtt' },
  ],
  audioTracks: [
    { label: 'Türkçe' },
    { label: 'English' },
  ],
}) %>

Yalnızca altyazı

Preview

Lecture — Episode 1

0:00/0:00

Code

<%- include('modules/ui/VideoPlayer', {
  src:    'https://example.com/lecture.mp4',
  title:  'Lecture — Episode 1',
  subtitles: [
    { label: 'Türkçe', srclang: 'tr', src: '/subtitles/tr.vtt' },
  ],
}) %>

Minimal (kontroller her zaman görünür)

Preview

0:00/0:00

Code

<%- include('modules/ui/VideoPlayer', {
  src:              'https://placeholdervideo.dev/1920x1080',
  autoHideControls: false,
}) %>

Otomatik oynat + sessiz

Preview

0:00/0:00

Code

<%- include('modules/ui/VideoPlayer', {
  src:          'https://example.com/promo.mp4',
  autoPlay:     true,
  startMuted:   true,
  loop:         true,
  poster:       'https://example.com/poster.jpg',
}) %>

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 */%>