如何在线播放M3U8视频

浏览器支持情况

自定义控制栏

// 自定义播放控制
class CustomPlayer {
  constructor(videoElement) {
    this.video = videoElement;
    this.setupControls();
  }
  
  setupControls() {
    // 播放/暂停
    this.playBtn = document.getElementById('play-btn');
    this.playBtn.onclick = () => this.togglePlay();
    
    // 进度条
    this.progressBar = document.getElementById('progress');
    this.progressBar.oninput = (e) => {
      const time = (e.target.value / 100) * this.video.duration;
      this.video.currentTime = time;
    };
    
    // 音量控制
    this.volumeSlider = document.getElementById('volume');
    this.volumeSlider.oninput = (e) => {
      this.video.volume = e.target.value / 100;
    };
    
    // 全屏
    this.fullscreenBtn = document.getElementById('fullscreen');
    this.fullscreenBtn.onclick = () => this.toggleFullscreen();
    
    // 更新进度
    this.video.ontimeupdate = () => this.updateProgress();
  }
  
  togglePlay() {
    if (this.video.paused) {
      this.video.play();
      this.playBtn.textContent = '暂停';
    } else {
      this.video.pause();
      this.playBtn.textContent = '播放';
    }
  }
  
  updateProgress() {
    const percent = (this.video.currentTime / this.video.duration) * 100;
    this.progressBar.value = percent;
  }
  
  toggleFullscreen() {
    if (!document.fullscreenElement) {
      this.video.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  }
}

质量切换功能

// 手动质量切换
hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
  // 获取所有质量级别
  const levels = hls.levels;
  const qualitySelector = document.getElementById('quality');
  
  // 添加自动选项
  qualitySelector.innerHTML = '<option value="-1">自动</option>';
  
  // 添加各个质量选项
  levels.forEach((level, index) => {
    const option = document.createElement('option');
    option.value = index;
    option.textContent = `${level.height}p`;
    qualitySelector.appendChild(option);
  });
  
  // 质量切换事件
  qualitySelector.onchange = (e) => {
    hls.currentLevel = parseInt(e.target.value);
  };
  
  // 显示当前质量
  hls.on(Hls.Events.LEVEL_SWITCHED, function(event, data) {
    qualitySelector.value = data.level;
    console.log('当前质量:', levels[data.level].height + 'p');
  });
});

字幕支持

// 添加字幕轨道
hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, function(event, data) {
  const subtitleTracks = data.subtitleTracks;
  const subtitleSelector = document.getElementById('subtitles');
  
  subtitleSelector.innerHTML = '<option value="-1">关闭</option>';
  
  subtitleTracks.forEach((track, index) => {
    const option = document.createElement('option');
    option.value = index;
    option.textContent = track.name || track.lang;
    subtitleSelector.appendChild(option);
  });
  
  subtitleSelector.onchange = (e) => {
    hls.subtitleTrack = parseInt(e.target.value);
  };
});

iOS特殊处理

// iOS播放策略
const video = document.getElementById('video');

// 允许内联播放（iOS 10+）
video.setAttribute('playsinline', '');
video.setAttribute('webkit-playsinline', '');

// iOS低功耗模式检测
if (iOS && video.paused) {
  // 显示播放按钮提示
  showPlayButton();
  
  // 用户交互后播放
  playButton.onclick = () => {
    video.play().catch(err => {
      console.error('播放失败:', err);
    });
  };
}

// 处理iOS全屏
video.addEventListener('webkitbeginfullscreen', () => {
  console.log('进入全屏');
});

video.addEventListener('webkitendfullscreen', () => {
  console.log('退出全屏');
});

响应式设计

/* 响应式视频容器 */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 移动端控制栏 */
@media (max-width: 768px) {
  .controls {
    font-size: 14px;
    padding: 8px;
  }
  
  .control-button {
    width: 40px;
    height: 40px;
  }
}

CORS错误

自动播放失败

播放卡顿

黑屏或无画面