如何用MediaElement.js实现视频全屏？升级至4.2.8后双击全屏失效求助

实现MediaElement.js的全屏功能有几种常用方式，我给你梳理下：

• 借助内置控件触发：默认情况下，MediaElement.js的播放器控件自带全屏按钮，只要初始化时没禁用这个功能就行。你可以在配置的features数组里明确包含fullscreen，确保控件显示：

  angular.element('video').mediaelementplayer({
    features: ['playpause', 'progress', 'fullscreen'], // 务必保留fullscreen项
    // 其他配置参数
  });
  

• 通过API手动触发：如果需要自定义触发逻辑（比如双击、自定义按钮点击），可以直接调用MediaElement实例的全屏方法。比如在success回调里拿到实例后绑定双击事件：

  success: function (mediaElement, domObject) {
    // 给播放器容器绑定双击事件
    domObject.addEventListener('dblclick', function() {
      if (mediaElement.isFullscreen()) {
        mediaElement.exitFullscreen();
      } else {
        mediaElement.enterFullscreen();
      }
    });
  }
  

• 注意浏览器限制：全屏操作必须由用户主动触发（比如点击、双击），不能自动执行，否则会被浏览器的安全机制拦截，这是所有浏览器的通用规则。

结合你提供的代码片段来看，大版本升级（2.x→4.x）导致功能失效，大概率是MediaElement.js的API或DOM结构发生了变化，我给你分析几个可能的原因和解决办法：

1. 事件绑定的目标元素变了
   旧版本中你可能直接绑定事件到<video>元素，但新版本里MediaElement.js会生成一个外层容器（比如.mejs-container），双击事件可能被容器拦截，或者旧选择器找不到正确元素。建议直接用success回调里的domObject（播放器容器实例）来绑定事件：

   success: function (mediaElement, domObject) {
     domObject.addEventListener('dblclick', function() {
       // 用toggleFullscreen()可以一键切换全屏状态，比判断更简洁
       mediaElement.toggleFullscreen();
     });
   }
   

2. API方法名大小写变更
   旧版本的全屏方法可能是enterFullScreen()（大写S），但新版本统一改为enterFullscreen()（小写s），如果你的旧代码用了大写S，升级后就会报错失效，检查下方法名是否正确。

3. 默认功能未启用
   新版本可能需要手动开启全屏相关支持，确保初始化配置的features数组里包含fullscreen，同时可以开启enableKeyboard（部分场景下会关联双击行为）：

   angular.element('video').mediaelementplayer({
     features: ['playpause', 'progress', 'fullscreen'],
     enableKeyboard: true,
     success: function (mediaElement, domObject) {
       // 自定义双击逻辑
       domObject.addEventListener('dblclick', () => mediaElement.toggleFullscreen());
     }
   });
   

4. 依赖内部DOM类名的代码失效
   你代码里的$(" .mejs-time-hand...片段没写完，但如果旧代码依赖了MediaElement.js内部的DOM类名（比如.mejs-time-handle），新版本的DOM结构可能已经变化，导致事件绑定失败。建议尽量使用官方提供的API操作，不要依赖内部私有类名。

另外，你生成video标签时用了<和>，要确保渲染后的HTML是正确的<video>标签，没有转义错误，否则播放器初始化也会出问题。测试时可以打开浏览器控制台，看看有没有“方法不存在”“元素找不到”之类的报错，能快速定位问题。

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