HTML5 <Video> Tag to play MP4 from browser issue

Started by DaveLembke, January 14, 2022, 08:32:27 PM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

Print
Go Down Pages1
User actions

DaveLembke

January 14, 2022, 08:32:27 PM Last Edit: January 14, 2022, 09:00:28 PM by DaveLembke
Messing around with HTML5 and was looking for a way to get a small MP4 video to have the ability to click and play it locally. The test1.mp4 file resides in the same folder as the HTML file that calls to it. It doesn't error out and it shows what looks like the ability to click to play it but nothing happens when clicking to play the MP4 file.

I was thinking maybe that Firefox was missing a handler to play MP4 files, however if you go to the test1.mp4 file and right-click and tell it to open with Firefox it will then open full window to Firefox browser and play so Firefox does have the ability to play the file.

Curious if I have something wrong with the HTML as I copy pasted from online reference to <Video> tag and changed the file name to my test file or if its some security measure to prevent execution of a local MP4 file from when called by HTML. Or something else that is going on that prevents it from playing? Google searches on this subject just suggest that a codec may be missing but it cant be missing if able to play it through the browser via right-click and telling it to play through browser from file explorer. Attached pic is what it shows in the browser as if it attempted to load it but 0:00/0:00 so not loaded but interface to play it displays.

Here is the link to the reference I used for this: https://www.freecodecamp.org/news/html5-video/

Code Select
<HTML>
<BODY>
<center>
<video controls>
  <source src="test1.mp4" type="video /mpeg">
  Your browser does not support the video element. Kindly update it to latest version.
</video>
</BODY>
</HTML>

BC_Programmer

#1
January 14, 2022, 09:25:00 PM
You know what, digging into this problem? Truly summarizes why I absolutely detest web development.

Anyway, your primary issue is that "video /mpeg" isn't going to be any mime type. video/mpeg maybe, but that's not a "standard".

video/mp4 is a "standard" type, but, chrome allegedly doesn't support it. Chrome, instead, supports it's proprietary webm "standard". (I love how they just throw the word standard around to describe stuff that doesn't actually work everywhere and therefore by definition isn't standard at all....)

Also, remember mp4 is a container format, but the support  for mp4 is *only* for the actual codec. For example, most of my mp4 files are H.264, which seems to be unsupported. THe way of doing HTML5 video apparently is transcoding the file to seemingly every video format under the sun and include that as a source and crossing your fingers that the browser recognizes one of them. Double fun since some browsers will give up once they see an unsupported format, so you need to actually list them in a specific order- If the arbitrary stack overflow and similar posts are to be believed.

If I try to set up that H.264 MP4 like so:

Code Select

<video preload="auto" controls="controls">
<source src="IBMClone1985_edit.mp4" type="video/H.264">
Your browser does not support the video element. Kindly update it to latest version.
</video>

And try to open that in firefox, it doesn't even tell me it's unsupported. It shows me a video player box but doesn't let me start playing, not unlike what you've described.

I should note, the reason you can open it directly is that when you directly open a video file in Firefox, it will not go through the HTML5 codecs and basically uses DirectShow directly (on Windows), which means it can then play codecs unsupported by HTML5.
I was trying to dereference Null Pointers before it was cool.

DaveLembke

#2
January 15, 2022, 01:18:01 AM
QuoteI should note, the reason you can open it directly is that when you directly open a video file in Firefox, it will not go through the HTML5 codecs and basically uses DirectShow directly (on Windows), which means it can then play codecs unsupported by HTML5.

Interesting that the MP4 with that method takes a different path... so it is apples to oranges and thats why broken one way and works the other through firefox.

I haven't dabbled much with HTML in a few years and this person at work was saying about how much better HTML5 is and I was like well I will check into how much better it is. Found that reference to proper use of playing video content and figured it was going to be easy to get it to work.

Then had the idea of writing some C++ that dynamically generates HTML pages based on movies I have in my collection and have a fun winter programming project to dabble into.

I guess I am going to see if I can find an addon that might be the cure for the codec issue. Tried it with Chrome, Firefox, and Edge and they all just bring up a player interface but the video doesn't load to the interface. Really crazy that the HTML5 approach to media is test test test and bail so not really any standards if you have to hunt through a list and like you said some browsers bail at first attempt and wont continue to test before getting to the end error message. I would have expected that if not supported that the message of "Your browser does not support the video element. Kindly update it to latest version." would have displayed.

DaveLembke

#3
January 15, 2022, 08:56:00 PM
Don't know why, but its working now.

Ever since I messed around with this example online with sizing the video play it started to work. I then removed the sizing and autoplay and made it the same as it was prior and then it works. I thought maybe with it sized to 320x240 caused the video to pre cache somehow in order to play it full window when width and height removed and so I rebooted the computer so wipe the temp cache clean. And now its working as its suppose to. I didn't add any codecs as I was originally going to try. I instead went to a different reference online to the HTML5 Video tag examples and copy pasted in the example and changed the file name to test1.mp4

Comparison between what I had prior and now I see nothing different to be the mysterious cure for the video load and playback issue. Even going with the original error message to display if unsupported for playback of " Your browser does not support the video element. Kindly update it to latest version." made no difference, as at first I was like maybe that was it that it would only display one sentence and the period was like an endline instruction to the browser and two sentences with two periods was the cause.

Well I guess I will move forward now with the dynamic HTML generated from my C++ program since the issue is hopefully gone for good. It just bothers me not knowing why it fought me so much to work. No codecs added and no changes made to browser, not even a reboot of the computer for a fresh start, and it mysteriously works now.  ::)


Thanks for your help with this BC  8)

Code Select
<HTML>
<BODY>
<center>
<video controls>
  <source src="test1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</BODY>
</HTML>

Print
Go Up Pages1
User actions