mediaelement.js播放器集成后加载异常，需三次点击播放按钮

嗨，我来帮你搞定这个mediaelement.js播放器要点击三次才能加载的糟心事！结合你说的情况——单独访问播放器页面正常，嵌入iframe后就出问题，大概率是iframe加载时机和播放器初始化的配合出了问题，下面给你几个针对性的排查和解决方向：

1. 确保iframe完全加载后再初始化播放器 #

当你点击按钮打开iframe时，iframe的内容可能还没完全加载完成，这时候就去初始化mediaelement.js，肯定会失败，导致需要多次点击重试。你可以在父页面里监听iframe的load事件，等它彻底加载完再触发播放器初始化：

// 给你的播放按钮绑定点击事件
document.querySelector('.your-play-button-class').addEventListener('click', function() {
  const playerIframe = document.getElementById('your-iframe-id');
  
  // 先判断iframe是否已经加载完成
  if (playerIframe.contentWindow.document.readyState === 'complete') {
    initPlayerInIframe(playerIframe);
  } else {
    // 还没加载完就监听load事件，加载完成后再初始化
    playerIframe.addEventListener('load', function() {
      initPlayerInIframe(playerIframe);
      // 移除事件监听，避免重复触发
      playerIframe.removeEventListener('load', arguments.callee);
    });
  }
});

// 封装初始化播放器的函数
function initPlayerInIframe(iframe) {
  // 调用iframe内部的mediaelement初始化方法
  const player = iframe.contentWindow.mejs.players.init();
  // 直接触发播放
  iframe.contentWindow.document.querySelector('.mejs-playbutton').click();
}

2. 检查iframe页面的播放器初始化时机 #

在你的youtube.php页面里，别把mediaelement的初始化代码直接扔在页面顶部，要等DOM完全就绪后再执行，不然播放器可能找不到对应的DOM元素：

// 在youtube.php里添加这个监听，确保DOM加载完再初始化
document.addEventListener('DOMContentLoaded', function() {
  // 初始化mediaelement播放器
  const mediaPlayer = new MediaElementPlayer('your-video-element-id', {
    // 你的自定义配置，比如功能按钮
    features: ['playpause', 'progress', 'volume', 'fullscreen'],
    success: function(mediaElement, domObject) {
      // 初始化成功后的回调，这里可以做些日志或者状态更新
      console.log('播放器初始化成功啦');
    }
  });
});

3. 避免重复创建iframe或重复初始化 #

如果你的播放按钮每次点击都会创建新的iframe，或者重复初始化播放器，很容易导致冲突，出现加载异常。你可以做个判断，确保iframe只创建一次：

let existingIframe = null;

document.querySelector('.your-play-button-class').addEventListener('click', function() {
  if (!existingIframe) {
    // 第一次点击时创建iframe
    existingIframe = document.createElement('iframe');
    existingIframe.src = 'http://escuchala.com/includes/youtube.php?id=VRJmcxCrAOA';
    existingIframe.id = 'unique-player-iframe';
    // 可以加些样式控制显示
    existingIframe.style.display = 'block';
    document.body.appendChild(existingIframe);
    
    // 监听加载完成后初始化
    existingIframe.addEventListener('load', function() {
      initPlayerInIframe(existingIframe);
    });
  } else {
    // 已经有iframe了，直接触发播放
    const mediaElement = existingIframe.contentWindow.document.querySelector('video');
    if (mediaElement) {
      mediaElement.play();
    }
  }
});

4. 检查iframe的sandbox属性（如果有设置） #

如果你的iframe加了sandbox属性，要确保它允许脚本执行和媒体播放，不然播放器会被限制：

<iframe src="your-player-url" sandbox="allow-scripts allow-media-playback allow-same-origin"></iframe>

先从这几个方向排查，应该能解决三次点击才能加载的问题！

内容的提问来源于stack exchange，提问作者Alejandro de la cruz