Angular4集成JWPlayer在IE失效，Chrome等浏览器正常运行

结合你提供的代码和场景，我来梳理几个常见的排查方向和解决方案：

1. 先排查JWPlayer的兼容性与加载问题 #

• 确认JWPlayer版本支持IE：JWPlayer 8及以上版本对IE11还有官方支持，如果你用的是更老的版本，大概率会出现兼容性问题，建议升级到支持IE的稳定版本。
• 检查IE控制台报错：按F12打开IE开发者工具，先看Console标签有没有脚本错误（比如jwplayer对象未定义），再看Network标签确认JWPlayer的脚本文件是否成功加载——IE里经常会因为跨域、CSP策略或者脚本加载顺序问题导致资源加载失败。
• 替换原生DOM操作为Angular推荐方式：你直接用document.getElementById获取元素，在IE里可能因为Angular的变更检测时机问题，导致初始化时元素还未渲染完成。建议改用ViewChild：

  import { ViewChild, ElementRef } from '@angular/core';
  
  // 在组件类里定义
  @ViewChild('videoWrapper') videoWrapper: ElementRef;
  
  // 初始化播放器时替换成
  const wrapperEl = this.videoWrapper.nativeElement;
  if (wrapperEl) {
    // 后续的player.remove和setup逻辑
  }
  

  对应的HTML也要给元素加模板引用：

  <div #videoWrapper id="video_wrapper"></div>
  

2. 优化JWPlayer初始化逻辑 #

• 清理播放器引用残留：你当前的代码只调用了this.player.remove()，但没有置空引用，IE里可能会因为旧实例残留导致新初始化失败，建议补充：

  if (this.player) {
    this.player.remove();
    this.player = null; // 置空避免引用残留
  }
  

• 监听播放器就绪事件再操作：IE的JS执行速度较慢，播放器初始化可能是异步的，直接setup后可能还未就绪，建议绑定ready事件确保播放时机：

  this.player = jwplayer(wrapperEl).setup({
    file: jwSrc,
    width: vidWidth,
    aspectratio: '16:9',
    type: 'mp4',
    debug: true // 开启debug模式，方便在控制台查看播放器日志
  });
  
  this.player.on('ready', () => {
    this.player.play(); // 就绪后再触发播放
  });
  

• 检查视频编码格式：IE对MP4的编码有严格要求，必须是H.264视频编码 + AAC音频编码，如果你的视频不符合这个标准，哪怕JWPlayer初始化正常也无法播放。

3. 确认Angular4的IE兼容性配置 #

Angular4本身需要额外配置才能在IE正常运行，你需要检查：

• polyfills.ts文件：确保引入了IE所需的垫片，比如：

  import 'core-js/es6/symbol';
  import 'core-js/es6/object';
  import 'core-js/es6/function';
  import 'core-js/es6/parse-int';
  import 'core-js/es6/parse-float';
  import 'core-js/es6/number';
  import 'core-js/es6/math';
  import 'core-js/es6/string';
  import 'core-js/es6/date';
  import 'core-js/es6/array';
  import 'core-js/es6/regexp';
  import 'core-js/es6/map';
  import 'core-js/es6/weak-map';
  import 'core-js/es6/set';
  import 'core-js/es7/reflect';
  import 'zone.js/dist/zone';
  

• tsconfig.json配置：确保compilerOptions里的target设置为es5：

  "compilerOptions": {
    "target": "es5",
    // 其他配置...
  }
  

4. 排查元素样式问题 #

你代码里设置了marginLeft，在IE里可能因为盒模型差异，导致video_wrapper元素被移出可视区域或者尺寸为0。可以用IE开发者工具的Elements标签查看元素的实际样式，确保元素是可见状态（display不为none、visibility为visible），且有足够宽高。

内容的提问来源于stack exchange，提问作者JianChao Chen