在Angular项目中使用JWPlayer 8.21如何禁用视频暂停与拖动进度功能

你的原有代码存在两个核心问题：

1. seek事件中获取的event.position是用户拖动的目标位置，不是当前真实播放进度，存错值会导致seek逻辑完全失效
2. 未拦截键盘空格、控制栏按钮点击等其他可能触发暂停、拖动的操作入口

实现步骤 #

1. 优先从UI层面禁用操作（最稳妥） #

直接在初始化配置里隐藏进度条、播放暂停按钮，用户看不到对应控件自然无法操作，保留你需要的音量、全屏等功能即可。

2. 事件拦截兜底 #

就算用户通过快捷键、控制台调用等方式触发暂停/拖动，也通过事件监听强制恢复正常播放状态。 #

修正后的完整代码（适配Angular场景） #

import { Component, AfterViewInit } from '@angular/core';
// 注意先正确引入JWPlayer类型声明

@Component({
  selector: 'app-video-player',
  template: `<div id="player"></div>`
})
export class VideoPlayerComponent implements AfterViewInit {
  // 存储实时真实播放进度
  private realPlayPosition = 0;
  private player: any;

  ngAfterViewInit(): void {
    this.player = jwplayer('player')
      .setup({
        file: 'https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8',
        autostart: true,
        width: '100%',
        // 若不需要任何控件直接将controls设为false即可，以下为保留部分控件的配置
        controls: true,
        skin: {
          controlbar: {
            // 仅保留音量、全屏按钮，移除播放/暂停、进度条等不需要的控件
            items: [
              { type: 'volume' },
              { type: 'fullscreen', position: 'right' }
            ]
          }
        }
      })
      // 实时同步真实播放进度
      .on('time', (event) => {
        this.realPlayPosition = event.position;
      })
      // 拦截所有暂停操作，强制恢复播放
      .on('pause', () => {
        this.player.play();
      })
      // 拦截播放区域点击，避免触发暂停
      .on('displayClick', (event) => {
        event.preventDefault();
        this.player.play();
      })
      // 拦截键盘空格操作，禁止空格触发暂停
      .on('key', (event) => {
        if (event.keyCode === 32) {
          event.preventDefault();
        }
      })
      // 拦截所有seek操作，强制回到真实播放位置
      .on('seek', (event) => {
        if (Math.abs(event.position - this.realPlayPosition) > 0.5) {
          event.preventDefault();
          this.player.seek(this.realPlayPosition);
        }
      });
  }
}

补充说明 #

如果你的场景是直播流，本身就不需要进度条，直接把controls设为false，再保留pause、displayClick事件的拦截逻辑即可，代码更精简。

内容的提问来源于stack exchange，提问作者Anh Ha