Dynamically Loading video from localhost and getting 206 Partial Content
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am using a simple react stack with redux. I am then dynamically pulling in data with video locations in from a google spreadsheet, this means that I need to import the video files in on the fly:
//videoType is the name of the row for videos in the spreadsheet
const videoType = 'outVideo';
const videoData = await import(`../../media/${video[videoType]}`);
this.setState({[videoType]: videoData.default});
This also means that video assets are loaded in as soon as the component has rendered but as a promise:
This will then be loaded into the component and when the time is right display the video (so that we have assets available on the html5 video tag at initiation on the element:
<div className="outVideo">
{outVideo !== "" &&
<video
ref={this[`outVideo${reference}`]}
autoPlay="autoplay"
playsInline="playsinline"
>
<source
src={outVideo}
type="video/mp4"/>
</video>
}
</div>
I have just switched from 800kb files to 95mb files and while I will get these down, I am curious why the videos just display as white space and no video:
My understanding is it shouldn't be using 206
javascript html5 reactjs video
asked Nov 25 '18 at 1:42
Jamie HutberJamie Hutber
13.8k25102177
add a comment |
I am using a simple react stack with redux. I am then dynamically pulling in data with video locations in from a google spreadsheet, this means that I need to import the video files in on the fly:
//videoType is the name of the row for videos in the spreadsheet
const videoType = 'outVideo';
const videoData = await import(`../../media/${video[videoType]}`);
this.setState({[videoType]: videoData.default});
This also means that video assets are loaded in as soon as the component has rendered but as a promise:
This will then be loaded into the component and when the time is right display the video (so that we have assets available on the html5 video tag at initiation on the element:
<div className="outVideo">
{outVideo !== "" &&
<video
ref={this[`outVideo${reference}`]}
autoPlay="autoplay"
playsInline="playsinline"
>
<source
src={outVideo}
type="video/mp4"/>
</video>
}
</div>
I have just switched from 800kb files to 95mb files and while I will get these down, I am curious why the videos just display as white space and no video:
My understanding is it shouldn't be using 206
javascript html5 reactjs video
asked Nov 25 '18 at 1:42
Jamie HutberJamie Hutber
13.8k25102177
What is the purpose of this? Why do you need dynamic import of video file? That file is reachable by javascript so it is be reachable from html5 video element aswell.
– bigless
Nov 25 '18 at 2:21
1
In most browsers, the video tag will make byte range requests, and 206 is the correct response. The 'white space' is likely unrelated to the 206.
– szatmary
Nov 25 '18 at 5:23
@bigless the reason is they are dynamically loaded from the spreadsheet and we are including the files locally, IE this will run on a box and only have access to localhost for large assets.
– Jamie Hutber
Nov 25 '18 at 21:58
What "including the files locally" means? That import is just async GET. I still don't understand. Why not justsrc="../../media/${video[videoType]}"and then render/show video tag oncanplayevent?
– bigless
Nov 25 '18 at 23:01
I am running a local server, so the assets are served from that local server ilocalhostthis means of course http grabs the data but there is no outside request or need of any internet for those assets (videos). The reason for not just putting them inline directly is I need to make sure the video file exists. if it does not, then I remove thattile.
– Jamie Hutber
Nov 26 '18 at 12:29
add a comment |
I am using a simple react stack with redux. I am then dynamically pulling in data with video locations in from a google spreadsheet, this means that I need to import the video files in on the fly:
//videoType is the name of the row for videos in the spreadsheet
const videoType = 'outVideo';
const videoData = await import(`../../media/${video[videoType]}`);
this.setState({[videoType]: videoData.default});
This also means that video assets are loaded in as soon as the component has rendered but as a promise:
This will then be loaded into the component and when the time is right display the video (so that we have assets available on the html5 video tag at initiation on the element:
<div className="outVideo">
{outVideo !== "" &&
<video
ref={this[`outVideo${reference}`]}
autoPlay="autoplay"
playsInline="playsinline"
>
<source
src={outVideo}
type="video/mp4"/>
</video>
}
</div>
I have just switched from 800kb files to 95mb files and while I will get these down, I am curious why the videos just display as white space and no video:
My understanding is it shouldn't be using 206
javascript html5 reactjs video
asked Nov 25 '18 at 1:42
Jamie HutberJamie Hutber
13.8k25102177
I am using a simple react stack with redux. I am then dynamically pulling in data with video locations in from a google spreadsheet, this means that I need to import the video files in on the fly:
//videoType is the name of the row for videos in the spreadsheet
const videoType = 'outVideo';
const videoData = await import(`../../media/${video[videoType]}`);
this.setState({[videoType]: videoData.default});
This also means that video assets are loaded in as soon as the component has rendered but as a promise:
This will then be loaded into the component and when the time is right display the video (so that we have assets available on the html5 video tag at initiation on the element:
<div className="outVideo">
{outVideo !== "" &&
<video
ref={this[`outVideo${reference}`]}
autoPlay="autoplay"
playsInline="playsinline"
>
<source
src={outVideo}
type="video/mp4"/>
</video>
}
</div>
I have just switched from 800kb files to 95mb files and while I will get these down, I am curious why the videos just display as white space and no video:
My understanding is it shouldn't be using 206
javascript html5 reactjs video
javascript html5 reactjs video
asked Nov 25 '18 at 1:42
Jamie HutberJamie Hutber
13.8k25102177
asked Nov 25 '18 at 1:42
Jamie HutberJamie Hutber
13.8k25102177
asked Nov 25 '18 at 1:42
Jamie HutberJamie Hutber
13.8k25102177
asked Nov 25 '18 at 1:42
Jamie HutberJamie Hutber
13.8k25102177
asked Nov 25 '18 at 1:42
Jamie HutberJamie Hutber
13.8k25102177
13.8k25102177
What is the purpose of this? Why do you need dynamic import of video file? That file is reachable by javascript so it is be reachable from html5 video element aswell.
– bigless
Nov 25 '18 at 2:21
1
In most browsers, the video tag will make byte range requests, and 206 is the correct response. The 'white space' is likely unrelated to the 206.
– szatmary
Nov 25 '18 at 5:23
@bigless the reason is they are dynamically loaded from the spreadsheet and we are including the files locally, IE this will run on a box and only have access to localhost for large assets.
– Jamie Hutber
Nov 25 '18 at 21:58
What "including the files locally" means? That import is just async GET. I still don't understand. Why not justsrc="../../media/${video[videoType]}"and then render/show video tag oncanplayevent?
– bigless
Nov 25 '18 at 23:01
I am running a local server, so the assets are served from that local server ilocalhostthis means of course http grabs the data but there is no outside request or need of any internet for those assets (videos). The reason for not just putting them inline directly is I need to make sure the video file exists. if it does not, then I remove thattile.
– Jamie Hutber
Nov 26 '18 at 12:29
add a comment |
What is the purpose of this? Why do you need dynamic import of video file? That file is reachable by javascript so it is be reachable from html5 video element aswell.
– bigless
Nov 25 '18 at 2:21
1
In most browsers, the video tag will make byte range requests, and 206 is the correct response. The 'white space' is likely unrelated to the 206.
– szatmary
Nov 25 '18 at 5:23
@bigless the reason is they are dynamically loaded from the spreadsheet and we are including the files locally, IE this will run on a box and only have access to localhost for large assets.
– Jamie Hutber
Nov 25 '18 at 21:58
What "including the files locally" means? That import is just async GET. I still don't understand. Why not justsrc="../../media/${video[videoType]}"and then render/show video tag oncanplayevent?
– bigless
Nov 25 '18 at 23:01
I am running a local server, so the assets are served from that local server ilocalhostthis means of course http grabs the data but there is no outside request or need of any internet for those assets (videos). The reason for not just putting them inline directly is I need to make sure the video file exists. if it does not, then I remove thattile.
– Jamie Hutber
Nov 26 '18 at 12:29
What is the purpose of this? Why do you need dynamic import of video file? That file is reachable by javascript so it is be reachable from html5 video element aswell.
– bigless
Nov 25 '18 at 2:21
What is the purpose of this? Why do you need dynamic import of video file? That file is reachable by javascript so it is be reachable from html5 video element aswell.
– bigless
Nov 25 '18 at 2:21
1
1
In most browsers, the video tag will make byte range requests, and 206 is the correct response. The 'white space' is likely unrelated to the 206.
– szatmary
Nov 25 '18 at 5:23
In most browsers, the video tag will make byte range requests, and 206 is the correct response. The 'white space' is likely unrelated to the 206.
– szatmary
Nov 25 '18 at 5:23
@bigless the reason is they are dynamically loaded from the spreadsheet and we are including the files locally, IE this will run on a box and only have access to localhost for large assets.
– Jamie Hutber
Nov 25 '18 at 21:58
@bigless the reason is they are dynamically loaded from the spreadsheet and we are including the files locally, IE this will run on a box and only have access to localhost for large assets.
– Jamie Hutber
Nov 25 '18 at 21:58
What "including the files locally" means? That import is just async GET. I still don't understand. Why not just
src="../../media/${video[videoType]}" and then render/show video tag on canplay event?– bigless
Nov 25 '18 at 23:01
What "including the files locally" means? That import is just async GET. I still don't understand. Why not just
src="../../media/${video[videoType]}" and then render/show video tag on canplay event?– bigless
Nov 25 '18 at 23:01
I am running a local server, so the assets are served from that local server i
localhost this means of course http grabs the data but there is no outside request or need of any internet for those assets (videos). The reason for not just putting them inline directly is I need to make sure the video file exists. if it does not, then I remove that tile.– Jamie Hutber
Nov 26 '18 at 12:29
I am running a local server, so the assets are served from that local server i
localhost this means of course http grabs the data but there is no outside request or need of any internet for those assets (videos). The reason for not just putting them inline directly is I need to make sure the video file exists. if it does not, then I remove that tile.– Jamie Hutber
Nov 26 '18 at 12:29
add a comment |
0
active
oldest
votes
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%2f53463978%2fdynamically-loading-video-from-localhost-and-getting-206-partial-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53463978%2fdynamically-loading-video-from-localhost-and-getting-206-partial-content%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
What is the purpose of this? Why do you need dynamic import of video file? That file is reachable by javascript so it is be reachable from html5 video element aswell.
– bigless
Nov 25 '18 at 2:21
1
In most browsers, the video tag will make byte range requests, and 206 is the correct response. The 'white space' is likely unrelated to the 206.
– szatmary
Nov 25 '18 at 5:23
@bigless the reason is they are dynamically loaded from the spreadsheet and we are including the files locally, IE this will run on a box and only have access to localhost for large assets.
– Jamie Hutber
Nov 25 '18 at 21:58
What "including the files locally" means? That import is just async GET. I still don't understand. Why not just
src="../../media/${video[videoType]}"and then render/show video tag oncanplayevent?– bigless
Nov 25 '18 at 23:01
I am running a local server, so the assets are served from that local server i
localhostthis means of course http grabs the data but there is no outside request or need of any internet for those assets (videos). The reason for not just putting them inline directly is I need to make sure the video file exists. if it does not, then I remove thattile.– Jamie Hutber
Nov 26 '18 at 12:29