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:

enter image description here

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:

enter image description here

My understanding is it shouldn't be using 206

asked Nov 25 '18 at 1:42

Jamie 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 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

add a comment |

//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:

enter image description here

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:

enter image description here

My understanding is it shouldn't be using 206

asked Nov 25 '18 at 1:42

Jamie 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 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

add a comment |

//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:

enter image description here

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:

enter image description here

My understanding is it shouldn't be using 206

asked Nov 25 '18 at 1:42

Jamie Hutber

13.8k25102177

//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:

enter image description here

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:

enter image description here

My understanding is it shouldn't be using 206

javascript html5 reactjs video

asked Nov 25 '18 at 1:42

Jamie Hutber

13.8k25102177

asked Nov 25 '18 at 1:42

Jamie Hutber

13.8k25102177

asked Nov 25 '18 at 1:42

Jamie Hutber

13.8k25102177

asked Nov 25 '18 at 1:42

Jamie Hutber

13.8k25102177

asked Nov 25 '18 at 1:42

Jamie 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 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

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 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

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

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 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

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk