Html5 Video Not Working Chrome

2
votes

This is my first question and I'm still an amateur developer and in still in the learning phases. A friend of mine has sent me an .mp4 file and I have converted it into a .webm both in the same folder. Currently my html has this: 

<video width="1920" height="1080" controls autoplay id="video-background"> 
	<source src="/img/reel.mp4" type="video/mp4">
	<source src="/img/reel.webm" type="video/webm">
	Sorry, your browser doesn't support HTML5 video.
</video>

The video does not show up at all, only the controls. I don't even get the "Sorry your browser doesn't support HTML5 video." without the controls. Just a blank spot of where a video should be.

I'm not hosting the video on a server or anything. Its a local file about 88mb large. Its only a minute long worth of video meant to loop in the background. I'm able to get video from a link to play, but not this local .mp4/.webm file. I have checked youtube, stackoverflow, and googled a lot. Really need some help on this.

Yes, I have also tried .ogv and it still didn't work. I have tripled checked the file paths and have checked on the encoding of the video and double checked the formats. Everything seems like it should be good to go, but it just doesn't play.

I have no css written out for this section, just wanting my local file video to play. What am I do doing wrong and how do I fix it?

2
htmlvideo
You use css tag, but there's no css in the question. What styling do you pass to id="video-background"? – alljamin
Sorry I tagged css, I originally had a demo video for the friend playing in the background. But when I replaced it with his video it didn't work. I thought it was something to do with styling, so I took out all the css and tried to troubleshoot, but left the id tag in place when posting. – btetrick

2 Answers

0
votes

If your img folder is inside the same folder where your HTML is. You should remove the first slash. Try this out: 

<video width="1920" height="1080" controls autoplay id="video-background"> 
    <source src="img/reel.mp4" type="video/mp4">
    <source src="img/reel.webm" type="video/webm">
    Sorry, your browser doesn't support HTML5 video.
</video>

Hope it helps!

0
votes

try fixed it by adding the preload="auto" tag.

<video autoplay loop preload="auto" poster="img.png">
    <source src="/img/reel.mp4" type="video/mp4">
    <source src="/img/reel.webm" type="video/webm">
    Sorry, your browser doesn't support HTML5 video.
</video>

I Don't know if this will work for you,maybe this will help someone in the future!