时间戳

首页 > 解决方案 > 同一反应组件中的多个 videojs 播放器

reactjs - 同一反应组件中的多个 videojs 播放器

问题描述

使用 react 应用程序（逐步组装说明），显示 onClick 一些电影。任何步骤都可以包含 1 到 6 部电影。无法将电影路径（源）映射到多个 videojs 播放器。

我想使用 videojs 在反应组件中动态地显示一些电影。我正在使用来自 videojs 的示例（https://docs.videojs.com/tutorial-react.html）作为模板。在静态场景中一切正常 - 将“videoJsOptions”与预先知道的来源分开，并分开组件......当我尝试在地图或 foreach 中动态创建 VideoPlayers 时，我在尝试创建 const 时遇到了问题循环的步骤。例如，如何创建动态 const 的名称......那么，有人可以帮我吗 - 如何从该州映射电影？

{this.state.movies.map(themovie => {
    rbr++;
    this["something"+rbr] = {
    autoplay: false,
    controls: true,
    height: 320,
    width: 480,
    sources: [{
        src: {themovie},
        type: 'video/mp4'
    }]
};
    return <VideoPlayer { ...this["something"+rbr] } key={rbr} />;
})}

我收到的错误是：“VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) 找不到此媒体的兼容来源。”

标签： reactjsvideo.js

解决方案

我不应该在晚上发布问题。早上情况看起来好多了。刚刚删除了花括号，一切都很好。

src: themovie

顺便说一句，有没有更聪明的方法将文件名路径映射到动态创建的播放器？

推荐阅读