Multiple videojs players in the same react component
Working on react app (Step-By-Step Assembly Instructions), showing onClick some movies. Any step could contain 1 to 6 movies. Can't map movie paths (sources) to multiple videojs players.
I would like to dinamically show some movies in react component using videojs. I'm using example ( https://docs.videojs.com/tutorial-react.html ) from videojs as a template. Everything work just fine with a static scene - separate 'videoJsOptions' with sources known in advance, and separate components... When I'm trying to dynamically create VideoPlayers within the map or foreach, I have a problem's trying to create const in every step of the loop. E.g. how to create dynamic const's name...
So, could anybody help me - how to map movies from the state?
{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} />;
})}
The error, I'm receiving, is: "VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media."
reactjs video.js
asked Dec 30 '18 at 15:02
bebabeba
627
add a comment |
Working on react app (Step-By-Step Assembly Instructions), showing onClick some movies. Any step could contain 1 to 6 movies. Can't map movie paths (sources) to multiple videojs players.
I would like to dinamically show some movies in react component using videojs. I'm using example ( https://docs.videojs.com/tutorial-react.html ) from videojs as a template. Everything work just fine with a static scene - separate 'videoJsOptions' with sources known in advance, and separate components... When I'm trying to dynamically create VideoPlayers within the map or foreach, I have a problem's trying to create const in every step of the loop. E.g. how to create dynamic const's name...
So, could anybody help me - how to map movies from the state?
{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} />;
})}
The error, I'm receiving, is: "VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media."
reactjs video.js
asked Dec 30 '18 at 15:02
bebabeba
627
add a comment |
Working on react app (Step-By-Step Assembly Instructions), showing onClick some movies. Any step could contain 1 to 6 movies. Can't map movie paths (sources) to multiple videojs players.
I would like to dinamically show some movies in react component using videojs. I'm using example ( https://docs.videojs.com/tutorial-react.html ) from videojs as a template. Everything work just fine with a static scene - separate 'videoJsOptions' with sources known in advance, and separate components... When I'm trying to dynamically create VideoPlayers within the map or foreach, I have a problem's trying to create const in every step of the loop. E.g. how to create dynamic const's name...
So, could anybody help me - how to map movies from the state?
{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} />;
})}
The error, I'm receiving, is: "VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media."
reactjs video.js
asked Dec 30 '18 at 15:02
bebabeba
627
Working on react app (Step-By-Step Assembly Instructions), showing onClick some movies. Any step could contain 1 to 6 movies. Can't map movie paths (sources) to multiple videojs players.
I would like to dinamically show some movies in react component using videojs. I'm using example ( https://docs.videojs.com/tutorial-react.html ) from videojs as a template. Everything work just fine with a static scene - separate 'videoJsOptions' with sources known in advance, and separate components... When I'm trying to dynamically create VideoPlayers within the map or foreach, I have a problem's trying to create const in every step of the loop. E.g. how to create dynamic const's name...
So, could anybody help me - how to map movies from the state?
{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} />;
})}
The error, I'm receiving, is: "VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media."
reactjs video.js
reactjs video.js
asked Dec 30 '18 at 15:02
bebabeba
627
asked Dec 30 '18 at 15:02
bebabeba
627
edited Dec 31 '18 at 7:46
beba
asked Dec 30 '18 at 15:02
bebabeba
627
asked Dec 30 '18 at 15:02
bebabeba
627
asked Dec 30 '18 at 15:02
bebabeba
627
627
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I should never post a question in the evening. Things look better in the morning. Just removed curly braces and everything is just fine.
src: themovie
BTW, is there any smarter way to map a filename paths to the dinamically created players?
answered Dec 31 '18 at 8:06
bebabeba
627
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53978696%2fmultiple-videojs-players-in-the-same-react-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I should never post a question in the evening. Things look better in the morning. Just removed curly braces and everything is just fine.
src: themovie
BTW, is there any smarter way to map a filename paths to the dinamically created players?
answered Dec 31 '18 at 8:06
bebabeba
627
add a comment |
I should never post a question in the evening. Things look better in the morning. Just removed curly braces and everything is just fine.
src: themovie
BTW, is there any smarter way to map a filename paths to the dinamically created players?
answered Dec 31 '18 at 8:06
bebabeba
627
add a comment |
I should never post a question in the evening. Things look better in the morning. Just removed curly braces and everything is just fine.
src: themovie
BTW, is there any smarter way to map a filename paths to the dinamically created players?
answered Dec 31 '18 at 8:06
bebabeba
627
I should never post a question in the evening. Things look better in the morning. Just removed curly braces and everything is just fine.
src: themovie
BTW, is there any smarter way to map a filename paths to the dinamically created players?
answered Dec 31 '18 at 8:06
bebabeba
627
edited Dec 31 '18 at 21:54
answered Dec 31 '18 at 8:06
bebabeba
627
answered Dec 31 '18 at 8:06
bebabeba
627
answered Dec 31 '18 at 8:06
bebabeba
627
627
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53978696%2fmultiple-videojs-players-in-the-same-react-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
