vidply 1.0.0

package/src/icons/Icons.js

@@ -0,0 +1,183 @@
+/**
+ * SVG Icon Library for VidPly
+ * Optimized with common viewBox and fill attributes
+ */
+
+// SVG paths only (viewBox and fill added by wrapper)
+const iconPaths = {
+    play: `<path d="M8 5v14l11-7z"/>`,
+
+    pause: `<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>`,
+
+    stop: `<rect x="6" y="6" width="12" height="12"/>`,
+
+    rewind: `<path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/>`,
+
+    forward: `<path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/>`,
+
+    skipPrevious: `<path d="M6 6h2v12H6V6zm3 6l8.5 6V6L9 12z"/>`,
+
+    skipNext: `<path d="M16 6h2v12h-2V6zM6 6l8.5 6L6 18V6z"/>`,
+
+    restart: `<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>`,
+
+    volumeHigh: `<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>`,
+
+    volumeMedium: `<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>`,
+
+    volumeLow: `<path d="M7 9v6h4l5 5V4l-5 5H7z"/>`,
+
+    volumeMuted: `<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>`,
+
+    fullscreen: `<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>`,
+
+    fullscreenExit: `<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>`,
+
+    settings: `<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>`,
+
+    captions: `<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/>`,
+
+    captionsOff: `<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/><path d="M0 0h24v24H0z" fill="none"/>`,
+
+    pip: `<path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/>`,
+
+    speed: `<path d="M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44z"/><path d="M10.59 15.41a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z"/>`,
+
+    close: `<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>`,
+
+    check: `<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>`,
+
+    arrowUp: `<path d="M7 14l5-5 5 5z"/>`,
+
+    arrowDown: `<path d="M7 10l5 5 5-5z"/>`,
+
+    arrowLeft: `<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>`,
+
+    arrowRight: `<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>`,
+
+    loading: `<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>`,
+
+    error: `<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>`,
+
+    download: `<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>`,
+
+    link: `<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>`,
+
+    playlist: `<path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/>`,
+
+    language: `<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>`,
+
+    hd: `<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm7-1c0 .55-.45 1-1 1h-.75v1.5h-1.5V15H14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v4zm-3.5-.5h2v-3h-2v3z"/>`,
+
+    transcript: `<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>`,
+
+    audioDescription: `<path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"/><path d="M10.5 19c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>`,
+
+    audioDescriptionOn: `<path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"/><path d="M10.5 19c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><circle cx="19" cy="16" r="3" fill="#3b82f6"/><path d="M18.5 17.5l1-1 1.5 1.5" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+    signLanguage: `<path d="M12 2C10.34 2 9 3.34 9 5v4c0 .34.07.66.18.96L7.5 8.29C7.19 8.1 6.85 8 6.5 8 5.12 8 4 9.12 4 10.5v3c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-3c0-.28.22-.5.5-.5s.5.22.5.5V14l2 2v-1c0-.55.45-1 1-1s1 .45 1 1v2c0 .55.45 1 1 1s1-.45 1-1V9c0-.55.45-1 1-1s1 .45 1 1v8c0 2.21-1.79 4-4 4s-4-1.79-4-4v-2.83l-2.93-2.93A3.93 3.93 0 0 1 4 8c0-1.66 1.34-3 3-3 .83 0 1.58.34 2.12.88L11 7.76V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55.45 1 1 1s1-.45 1-1V5c0-1.66-1.34-3-3-3z"/>`,
+
+    signLanguageOn: `<path d="M12 2C10.34 2 9 3.34 9 5v4c0 .34.07.66.18.96L7.5 8.29C7.19 8.1 6.85 8 6.5 8 5.12 8 4 9.12 4 10.5v3c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-3c0-.28.22-.5.5-.5s.5.22.5.5V14l2 2v-1c0-.55.45-1 1-1s1 .45 1 1v2c0 .55.45 1 1 1s1-.45 1-1V9c0-.55.45-1 1-1s1 .45 1 1v8c0 2.21-1.79 4-4 4s-4-1.79-4-4v-2.83l-2.93-2.93A3.93 3.93 0 0 1 4 8c0-1.66 1.34-3 3-3 .83 0 1.58.34 2.12.88L11 7.76V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55.45 1 1 1s1-.45 1-1V5c0-1.66-1.34-3-3-3z"/><circle cx="19" cy="16" r="3" fill="#3b82f6"/><path d="M18.5 17.5l1-1 1.5 1.5" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
+
+    speaker: `<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>`,
+
+    music: `<path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7zm-1.5 16c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>`,
+
+    moreVertical: `<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>`,
+
+    moreHorizontal: `<path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>`
+};
+
+// Optimized wrapper that adds common SVG attributes
+const svgWrapper = (paths) => `<svg viewBox="0 0 24 24" fill="currentColor">${paths}</svg>`;
+
+// Export Icons object with SVG wrappers
+export const Icons = Object.fromEntries(
+    Object.entries(iconPaths).map(([key, value]) => [key, svgWrapper(value)])
+);
+
+export function getIcon(name) {
+    return Icons[name] || Icons.play;
+}
+
+export function createIconElement(name, className = '') {
+    const wrapper = document.createElement('span');
+    wrapper.className = `vidply-icon ${className}`.trim();
+    wrapper.innerHTML = getIcon(name);
+    wrapper.setAttribute('aria-hidden', 'true');
+    return wrapper;
+}
+
+/**
+ * Create the large centered play button overlay (complete SVG)
+ * @returns {SVGElement} Complete SVG element with circle background and play icon
+ */
+export function createPlayOverlay() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', 'vidply-play-overlay');
+    svg.setAttribute('viewBox', '0 0 80 80');
+    svg.setAttribute('width', '80');
+    svg.setAttribute('height', '80');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('role', 'presentation');
+    svg.style.cursor = 'pointer';
+    
+    // Create filter for drop shadow
+    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+    const filterId = `vidply-play-shadow-${Math.random().toString(36).substr(2, 9)}`;
+    const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
+    filter.setAttribute('id', filterId);
+    filter.setAttribute('x', '-50%');
+    filter.setAttribute('y', '-50%');
+    filter.setAttribute('width', '200%');
+    filter.setAttribute('height', '200%');
+    
+    const feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
+    feGaussianBlur.setAttribute('in', 'SourceAlpha');
+    feGaussianBlur.setAttribute('stdDeviation', '3');
+    
+    const feOffset = document.createElementNS('http://www.w3.org/2000/svg', 'feOffset');
+    feOffset.setAttribute('dx', '0');
+    feOffset.setAttribute('dy', '2');
+    feOffset.setAttribute('result', 'offsetblur');
+    
+    const feComponentTransfer = document.createElementNS('http://www.w3.org/2000/svg', 'feComponentTransfer');
+    const feFuncA = document.createElementNS('http://www.w3.org/2000/svg', 'feFuncA');
+    feFuncA.setAttribute('type', 'linear');
+    feFuncA.setAttribute('slope', '0.3');
+    feComponentTransfer.appendChild(feFuncA);
+    
+    const feMerge = document.createElementNS('http://www.w3.org/2000/svg', 'feMerge');
+    const feMergeNode1 = document.createElementNS('http://www.w3.org/2000/svg', 'feMergeNode');
+    const feMergeNode2 = document.createElementNS('http://www.w3.org/2000/svg', 'feMergeNode');
+    feMergeNode2.setAttribute('in', 'SourceGraphic');
+    feMerge.appendChild(feMergeNode1);
+    feMerge.appendChild(feMergeNode2);
+    
+    filter.appendChild(feGaussianBlur);
+    filter.appendChild(feOffset);
+    filter.appendChild(feComponentTransfer);
+    filter.appendChild(feMerge);
+    defs.appendChild(filter);
+    svg.appendChild(defs);
+    
+    // White circle background
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    circle.setAttribute('cx', '40');
+    circle.setAttribute('cy', '40');
+    circle.setAttribute('r', '40');
+    circle.setAttribute('fill', 'rgba(255, 255, 255, 0.95)');
+    circle.setAttribute('filter', `url(#${filterId})`);
+    circle.setAttribute('class', 'vidply-play-overlay-bg');
+    svg.appendChild(circle);
+    
+    // Play icon triangle (centered with optical adjustment)
+    const playTriangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+    playTriangle.setAttribute('points', '32,28 32,52 54,40');
+    playTriangle.setAttribute('fill', '#0a406e');
+    playTriangle.setAttribute('class', 'vidply-play-overlay-icon');
+    svg.appendChild(playTriangle);
+    
+    return svg;
+}
+

package/src/index.js

@@ -0,0 +1,34 @@
+/**
+ * VidPly - Universal Video Player
+ * Main Entry Point
+ */
+
+import { Player } from './core/Player.js';
+import { PlaylistManager } from './features/PlaylistManager.js';
+
+// Auto-initialize players
+function initializePlayers() {
+  const elements = document.querySelectorAll('[data-vidply]');
+  
+  elements.forEach(element => {
+    // Parse options from data attribute
+    const options = element.dataset.vidplyOptions 
+      ? JSON.parse(element.dataset.vidplyOptions)
+      : {};
+    
+    // Create player instance
+    new Player(element, options);
+  });
+}
+
+// Auto-initialize on DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializePlayers);
+} else {
+  initializePlayers();
+}
+
+// Export for manual initialization
+export { Player, PlaylistManager };
+export default Player;
+

package/src/renderers/HLSRenderer.js

@@ -0,0 +1,302 @@
+/**
+ * HLS Streaming Renderer
+ * Uses hls.js for browsers that don't natively support HLS
+ */
+
+export class HLSRenderer {
+  constructor(player) {
+    this.player = player;
+    this.media = player.element;
+    this.hls = null;
+  }
+
+  async init() {
+    // Check if browser natively supports HLS (Safari)
+    if (this.canPlayNatively()) {
+      this.player.log('Using native HLS support');
+      await this.initNative();
+    } else {
+      this.player.log('Using hls.js for HLS support');
+      await this.initHlsJs();
+    }
+  }
+
+  canPlayNatively() {
+    const video = document.createElement('video');
+    return video.canPlayType('application/vnd.apple.mpegurl') !== '';
+  }
+
+  async initNative() {
+    // Use HTML5 renderer for native HLS support
+    const HTML5Renderer = (await import('./HTML5Renderer.js')).HTML5Renderer;
+    const renderer = new HTML5Renderer(this.player);
+    await renderer.init();
+    
+    // Copy methods
+    Object.getOwnPropertyNames(Object.getPrototypeOf(renderer)).forEach(method => {
+      if (method !== 'constructor' && typeof renderer[method] === 'function') {
+        this[method] = renderer[method].bind(renderer);
+      }
+    });
+  }
+
+  async initHlsJs() {
+    // Hide native controls
+    this.media.controls = false;
+    this.media.removeAttribute('controls');
+    
+    // Load hls.js if not already loaded
+    if (!window.Hls) {
+      await this.loadHlsJs();
+    }
+
+    if (!window.Hls.isSupported()) {
+      throw new Error('HLS is not supported in this browser');
+    }
+
+    // Create hls.js instance with better error recovery
+    this.hls = new window.Hls({
+      debug: this.player.options.debug,
+      enableWorker: true,
+      lowLatencyMode: false,
+      backBufferLength: 90,
+      maxBufferLength: 30,
+      maxMaxBufferLength: 600,
+      maxBufferSize: 60 * 1000 * 1000,
+      maxBufferHole: 0.5,
+      // Network retry settings
+      manifestLoadingTimeOut: 10000,
+      manifestLoadingMaxRetry: 4,
+      manifestLoadingRetryDelay: 1000,
+      manifestLoadingMaxRetryTimeout: 64000,
+      levelLoadingTimeOut: 10000,
+      levelLoadingMaxRetry: 4,
+      levelLoadingRetryDelay: 1000,
+      levelLoadingMaxRetryTimeout: 64000,
+      fragLoadingTimeOut: 20000,
+      fragLoadingMaxRetry: 6,
+      fragLoadingRetryDelay: 1000,
+      fragLoadingMaxRetryTimeout: 64000
+    });
+
+    // Attach media element
+    this.hls.attachMedia(this.media);
+
+    // Load source - Get from attribute to avoid blob URL conversion
+    let src;
+    const sourceElement = this.player.element.querySelector('source');
+    if (sourceElement) {
+      // Use getAttribute to get the original URL, not the blob-converted one
+      src = sourceElement.getAttribute('src');
+    } else {
+      // Fallback to element's src attribute
+      src = this.player.element.getAttribute('src') || this.player.element.src;
+    }
+    
+    this.player.log(`Loading HLS source: ${src}`, 'log');
+    
+    if (!src) {
+      throw new Error('No HLS source found');
+    }
+    
+    this.hls.loadSource(src);
+
+    // Attach events
+    this.attachHlsEvents();
+    this.attachMediaEvents();
+  }
+
+  async loadHlsJs() {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/hls.js@latest';
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error('Failed to load hls.js'));
+      document.head.appendChild(script);
+    });
+  }
+
+  attachHlsEvents() {
+    this.hls.on(window.Hls.Events.MANIFEST_PARSED, (event, data) => {
+      this.player.log('HLS manifest loaded, found ' + data.levels.length + ' quality levels');
+      this.player.emit('hlsmanifestparsed', data);
+    });
+
+    this.hls.on(window.Hls.Events.LEVEL_SWITCHED, (event, data) => {
+      this.player.log('HLS level switched to ' + data.level);
+      this.player.emit('hlslevelswitched', data);
+    });
+
+    this.hls.on(window.Hls.Events.ERROR, (event, data) => {
+      this.handleHlsError(data);
+    });
+
+    this.hls.on(window.Hls.Events.FRAG_BUFFERED, () => {
+      this.player.state.buffering = false;
+    });
+  }
+
+  attachMediaEvents() {
+    // Use same events as HTML5 renderer
+    this.media.addEventListener('loadedmetadata', () => {
+      this.player.state.duration = this.media.duration;
+      this.player.emit('loadedmetadata');
+    });
+
+    this.media.addEventListener('play', () => {
+      this.player.state.playing = true;
+      this.player.state.paused = false;
+      this.player.state.ended = false;
+      this.player.emit('play');
+      
+      if (this.player.options.onPlay) {
+        this.player.options.onPlay.call(this.player);
+      }
+    });
+
+    this.media.addEventListener('pause', () => {
+      this.player.state.playing = false;
+      this.player.state.paused = true;
+      this.player.emit('pause');
+      
+      if (this.player.options.onPause) {
+        this.player.options.onPause.call(this.player);
+      }
+    });
+
+    this.media.addEventListener('ended', () => {
+      this.player.state.playing = false;
+      this.player.state.paused = true;
+      this.player.state.ended = true;
+      this.player.emit('ended');
+      
+      if (this.player.options.onEnded) {
+        this.player.options.onEnded.call(this.player);
+      }
+      
+      if (this.player.options.loop) {
+        this.player.seek(0);
+        this.player.play();
+      }
+    });
+
+    this.media.addEventListener('timeupdate', () => {
+      this.player.state.currentTime = this.media.currentTime;
+      this.player.emit('timeupdate', this.media.currentTime);
+      
+      if (this.player.options.onTimeUpdate) {
+        this.player.options.onTimeUpdate.call(this.player, this.media.currentTime);
+      }
+    });
+
+    this.media.addEventListener('volumechange', () => {
+      this.player.state.volume = this.media.volume;
+      this.player.state.muted = this.media.muted;
+      this.player.emit('volumechange', this.media.volume);
+    });
+
+    this.media.addEventListener('waiting', () => {
+      this.player.state.buffering = true;
+      this.player.emit('waiting');
+    });
+
+    this.media.addEventListener('canplay', () => {
+      this.player.state.buffering = false;
+      this.player.emit('canplay');
+    });
+
+    this.media.addEventListener('error', () => {
+      this.player.handleError(this.media.error);
+    });
+  }
+
+  handleHlsError(data) {
+    // Log detailed error info
+    this.player.log(`HLS Error - Type: ${data.type}, Details: ${data.details}, Fatal: ${data.fatal}`, 'warn');
+    if (data.response) {
+      this.player.log(`Response code: ${data.response.code}, URL: ${data.response.url}`, 'warn');
+    }
+    
+    if (data.fatal) {
+      switch (data.type) {
+        case window.Hls.ErrorTypes.NETWORK_ERROR:
+          this.player.log('Fatal network error, trying to recover...', 'error');
+          this.player.log(`Network error details: ${data.details}`, 'error');
+          setTimeout(() => {
+            this.hls.startLoad();
+          }, 1000);
+          break;
+          
+        case window.Hls.ErrorTypes.MEDIA_ERROR:
+          this.player.log('Fatal media error, trying to recover...', 'error');
+          this.hls.recoverMediaError();
+          break;
+          
+        default:
+          this.player.log('Fatal error, cannot recover', 'error');
+          this.player.handleError(new Error(`HLS Error: ${data.type} - ${data.details}`));
+          this.hls.destroy();
+          break;
+      }
+    } else {
+      this.player.log('Non-fatal HLS error: ' + data.details, 'warn');
+    }
+  }
+
+  play() {
+    const promise = this.media.play();
+    
+    if (promise !== undefined) {
+      promise.catch(error => {
+        this.player.log('Play failed:', error, 'warn');
+      });
+    }
+  }
+
+  pause() {
+    this.media.pause();
+  }
+
+  seek(time) {
+    this.media.currentTime = time;
+  }
+
+  setVolume(volume) {
+    this.media.volume = volume;
+  }
+
+  setMuted(muted) {
+    this.media.muted = muted;
+  }
+
+  setPlaybackSpeed(speed) {
+    this.media.playbackRate = speed;
+  }
+
+  switchQuality(levelIndex) {
+    if (this.hls) {
+      this.hls.currentLevel = levelIndex;
+    }
+  }
+
+  getQualities() {
+    if (this.hls && this.hls.levels) {
+      return this.hls.levels.map((level, index) => ({
+        index,
+        height: level.height,
+        width: level.width,
+        bitrate: level.bitrate,
+        name: `${level.height}p`
+      }));
+    }
+    return [];
+  }
+
+  destroy() {
+    if (this.hls) {
+      this.hls.destroy();
+      this.hls = null;
+    }
+  }
+}
+