Video for HTML5 not loading

Hi everyone,

I’m a super noob with coding and I believed I had success when I exported an HTML file and it loaded in my Google Chrome browser. Great! However, when sending it off to someone else to test I keep getting a black screen with a slash through the play button. This person was using Safari, but it should work for all browsers. Correct?

I’m using Web Server for Chrome as my video hosting because my videos come in odd aspect ratios as they’re banners and such.

Like I said, I’m very green to this stuff and don’t even know how to ask what I’m doing wrong. If any of you can assist me, I would be grateful.

Here’s the code I’m working with:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Lucky 7s test 1920</title>
</head>

<body>
	<video width="1920" height="1080" src="http://127.0.0.1:8887/TXL_7s_MF_1920X1080_v1.3.mp4" type="video/mp4" controls autoplay loop muted poster="http://127.0.0.1:8887/Screen%20Shot%202020-04-08%20at%206.56.18%20PM.png">
	<video width="1920" height="1080" src="http://127.0.0.1:8887/TXL_7s_MF_1920X1080_v1.3.ogg" type="video/ogg" controls autoplay loop muted poster="http://127.0.0.1:8887/Screen%20Shot%202020-04-08%20at%206.56.18%20PM.png">
	<video width="1920" height="1080" src="http://127.0.0.1:8887/TXL_7s_MF_1920X1080_v1.3.webm" type="video/webm" controls autoplay loop muted poster="http://127.0.0.1:8887/Screen%20Shot%202020-04-08%20at%206.56.18%20PM.png">
	Your browser does not support html5 video.
	</video>
</body>
</html>

This is how the HTML loads in the browser: file:///Users/dee/Desktop/l7%20test_1920_v5.html

Thanks again everyone! Looking forward to hearing your thoughts.

Hey @py5962933800, welcome to the forums!

Are these files on localhost? Because if not, you should just put the file:/// URL instead of the 127.0.0.1:8887 localhost.

Hi @stevencopeland ,

Thanks so much for replying. I appreciate it. I’m using Web Server for Chrome as my video hosting, which I thought would give more access than hosting on my computer. I might be incorrect in my assumption though.

So, instead of the “http://” it would start off as “file:///”? Is this still correct loading from the web server? Thanks again for your help.

Hmmm, I see. Then the http would be correct… What happens when you visit the video link inside of the element?

http://127.0.0.1:8887/TXL_7s_MF_1920X1080_v1.3.mp4

@stevencopeland

It takes me to the video and it plays with no problem. Does it play for you?

I was hoping by using Google, it would host the video in a public server, so the code would have no problem pulling up the video. Somehow it’s linking to a file that is only on my computer? I’m not sure if that’s what’s really happening.

I’m hesitant to use vimeo or youtube because my videos will have odd aspect ratios like 2640x360 as they are banners. Thanks for your help again!

I can’t see your video because the localhost you are using is unique to your own network, and because we’re on different networks, I won’t be able to view it…

I can’t really help you much more without have the links to the videos and trying it myself…

Where would you say is best to host the videos so that people like yourself have access to them and not on a unique network? I think that’s what I’m getting wrong. :sweat:

Do you have a google account?

I do! Which is why I thought the Web Server for Chrome would work. :thinking:

Maybe try uploading the videos to Google Drive and then using the links you have there instead of the localhost ones?

Also, I don’t think Web Server for Chrome is at all associated with Google Chrome the company itself.

The Google drive option isn’t working :confused: It brings up the window, but it’s black with the controls at the bottom.

The problem is that your videos are being fetched from the IP 127.0.0.1

The entire 127.0.0.0/8 IP block* is reserved for what, in networking, is called loopback. What this means is that, in effect, when you send a request to 127.0.0.1 it doesn’t go anywhere. It gets “looped back” to your local computer and handled there.

As a result, if you try and use your HTML on any computer other than the one where you’re working - and which has the web server thing running - it will break, because those other computers will be looking for a resource locally which doesn’t exist.

If you want the videos to work from anywhere on the Internet, you’ll need to put them somewhere on the Internet where anyone can fetch them and correct the src="" attribute to point there.

* A very short note on IPs and CIDR notation

You might be wondering, if you’re not hugely familiar with networking terminology, exactly what I’m on about when I refer to an “IP block” or write 127.0.0.0/8.

You probably know that an IPv4 address, written in decimal, takes the form A.B.C.D where A, B, C and D are numbers which can be anything from 0 to 255 - for example, 192.168.1.5.

The "IP block 127.0.0.0/8" covers any IP address from 127.0.0.0 to 127.255.255.255. All of these addresses are reserved for use as loopback addresses, and so none of them go anywhere on the “public” Internet.

(Going into any serious detail about networking is… not really a programming matter. :slight_smile: )

Thank you for taking the time to explain everything to me. I sincerely appreciate it. I believe I may have solved the problem. I was using Web Server for Chrome, but I did not have the tick to let it be hosted on the internet.

Figures it would be such a small problem (haha).

1 Like

Yes, I noticed that the “Web Server for Chrome” extension can be configured to listen on IP addresses other than 127.0.0.1 :slight_smile: