在React项目中使用MediaElement.js仅显示控制面板无法正常播放求助

解决方案 #

按以下步骤依次排查修正即可解决问题：

• 修正资源链接格式：你当前填写的YouTube地址缺少https协议头，MediaElement无法识别无协议的第三方资源地址，修改为完整路径：https://www.youtube.com/watch?v=twYp6W6vt2U
• 解决配置冲突：你在config中设置了controls:0，同时又给组件传了controls属性，二者优先级冲突会导致控制逻辑异常，统一配置逻辑即可，如需开启控制栏可直接删除config中的controls:0配置
• 补全样式引入：必须引入MediaElement对应的样式文件才能正常渲染播放器，在组件顶部添加引入代码：import 'mediaelement/build/mediaelementplayer.min.css'
• 调整传参格式：多数版本的MediaElement React组件支持直接传入原生数组/对象作为参数，无需提前用JSON.stringify转换，转换后的字符串反而可能无法被组件正确解析为资源配置
• 检查网络环境：播放YouTube资源需要当前网络可正常访问YouTube，源地址本身无法加载也会出现仅渲染面板的情况

修正后参考代码

import 'mediaelement/build/mediaelementplayer.min.css'
// 其他引入省略

const YourComponent = () => {
  const sources = [
    {src: 'https://www.youtube.com/watch?v=twYp6W6vt2U', type: 'video/youtube'},
  ]
  const config = {}
  const tracks = {}

  return (
    <div className="player-wrapper">
      <MediaElement
        id="player1"
        preload="none"
        controls
        width="640"
        height="800"
        mediaType="video"
        poster=""
        sources={sources}
        options={config}
        tracks={tracks} 
      />
    </div>
  )
}

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