Chrome浏览器使用VideoJS时视频无法拖动、拖动后从头播放问题

1. 确保VideoJS在视图就绪后初始化 #

Angular组件中，必须在ngAfterViewInit钩子中完成VideoJS初始化，避免DOM未就绪导致的事件绑定异常：

import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import videojs from 'video.js';
import 'videojs-seek-buttons';

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
  @ViewChild('videoElement') videoElement!: ElementRef;
  player: any;

  ngAfterViewInit(): void {
    this.player = videojs(this.videoElement.nativeElement, {
      controls: true,
      autoplay: false,
      preload: 'auto',
      seekButtons: {
        forward: 10,
        back: 5
      }
    });
  }

  ngOnDestroy(): void {
    if (this.player) {
      this.player.dispose();
    }
  }
}

2. 修正服务器端视频资源配置 #

Chrome对视频分段加载的Range请求校验更严格，需确保服务器：

• 返回Accept-Ranges: bytes响应头
• 支持Range请求并返回206 Partial Content状态码
• 跨域视频资源配置正确的CORS规则，允许当前域名访问

3. 排查Chrome缓存特性干扰 #

部分Chrome版本的媒体缓存策略会引发拖动异常，可在地址栏输入chrome://flags/#media-cache-size，将其设置为Disabled，重启浏览器后测试。

4. 验证videojs-seek-buttons插件冲突 #

暂时移除插件初始化，测试原生VideoJS是否正常拖动：

// 注释seekButtons配置，测试原生功能
this.player = videojs(this.videoElement.nativeElement, {
  controls: true,
  autoplay: false,
  preload: 'auto'
});

若原生功能正常，说明插件与Chrome事件监听存在冲突，可升级插件到最新版本，或手动绑定跳转按钮替代插件：

this.player.on('ready', () => {
  // 添加向前10秒按钮
  const forwardBtn = this.player.controlBar.addChild('button', {
    text: '+10s',
    clickHandler: () => {
      this.player.currentTime(this.player.currentTime() + 10);
    }
  });
  // 将按钮插入到全屏按钮前
  this.player.controlBar.el().insertBefore(forwardBtn.el(), this.player.controlBar.fullscreenToggle.el());
});

5. 隔离Zone.js对VideoJS的干扰 #

Angular的Zone.js可能劫持VideoJS事件循环，导致时间更新异常，可在NgZone外初始化播放器：

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

ngAfterViewInit(): void {
  this.ngZone.runOutsideAngular(() => {
    this.player = videojs(this.videoElement.nativeElement, { /* 配置项 */ });
  });
}

内容的提问来源于stack exchange，提问作者H. Pardess