I am trying HTML5 video tag and I have downloaded a Microsoft sample and trying to run it but a strange thing is happening, and it is that it plays video coming from a URL (commented tag) but for local mp4 file it do not shows error and shows message "Invalid Source" Here is my code please guide me what I should do to make it run local file correctly ? Thanks <pre class="prettyprint"><code> <!DOCTYPE html> <html> <head> </head> <body>  <video controls src="hprichv.mp4" width="300" height="200" autoplay loop> </video> </body> </html> </code></pre> EDIT Web page and video files both reside in the same folder.

Im on Windows 7 Pro. I develop locally and then host/serve remotely. Trying to load a local mp4 file while developing locally ran into this identical situation. No combination of using localhost/myvideo.mp4 or 127.0.0.1/myvideo.mp4 or /aaa/myvideo.mp4 or myvideo.mp4 in same directory as file got things to work...but referencing a full URL like <code>http://www.mywebsite.com/myvideo.mp4</code> did, as above. On local machine, Chrome shows no error messages...just shows black box with controls. No clues as to whats up. Switched to IE and it showed the black box and controls and the error message. 'Invalid source' I focused on @steveax question and Mime types. Turns out IIS in this version of windows/IIS does not have a MIME type setup for .mp4. No clue why not...but not. To add the MP4 MIME type, open Internet Information Services (IIS) Manager and follow these steps: <ul> <li>Highlight Default Web Site on the left panel;</li> <li>Double-click MIME Types on the right panel;</li> <li>Scroll down the list and notice that there is no .mp4;</li> <li>On the right panel again, click Add: at the first field, write <code>.mp4</code> and on the field below write <code>video/mp4</code> </li> <li>Click OK and you are done.</li> </ul> Restart IIS!

I had the same problem For Internet Explorer I used FormatFactory, setting up AAC encoding for audio and H264 for output for the mp4 format, in "High Quality and big size" For Google Chrome I converted my original video to the <code>webm</code> format thanks to Free WebM Video Converter (make sure you uncheck everything that would like to install ads). It took a long time but then it worked in Chrome. <pre class="prettyprint"><code><video controls> <source src="thevideo.mp4" type="video/mp4"> <source src="thevideo.webm" type="video/webm"> </video> </code></pre>

html5 video is not playing mp4 error "Invalid Source"?

Tags:

html

I am trying HTML5 video tag and I have downloaded a Microsoft sample and trying to run it but a strange thing is happening, and it is that it plays video coming from a URL (commented tag) but for local mp4 file it do not shows error and shows message "Invalid Source"

Here is my code please guide me what I should do to make it run local file correctly ?

Thanks

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!--<video src="http://www.bing.com/az/hprichv/?p=Butterfly_Clipcanvas_223479_EN-US.mp4"
        autoplay loop>
    </video>-->
    <video controls src="hprichv.mp4" width="300" height="200" autoplay loop>
    </video>
</body>
</html>

EDIT

Web page and video files both reside in the same folder.

707

asked Dec 29 '12 07:12

user576510

3 Answers

I got this problem and found that the video codec was not supported.

Get a video converter software (like Oxelon - it is free) and choose the output to be .mp4 (even is the source is .mp4). Choose the video codec to be "H264" and the audio codec to be "AAC". This will solve your problem.

189

answered Oct 25 '22 00:10

Omar

Im on Windows 7 Pro. I develop locally and then host/serve remotely. Trying to load a local mp4 file while developing locally ran into this identical situation. No combination of using localhost/myvideo.mp4 or 127.0.0.1/myvideo.mp4 or /aaa/myvideo.mp4 or myvideo.mp4 in same directory as file got things to work...but referencing a full URL like http://www.mywebsite.com/myvideo.mp4 did, as above.

On local machine, Chrome shows no error messages...just shows black box with controls. No clues as to whats up. Switched to IE and it showed the black box and controls and the error message. 'Invalid source'

I focused on @steveax question and Mime types.

Turns out IIS in this version of windows/IIS does not have a MIME type setup for .mp4. No clue why not...but not.

To add the MP4 MIME type, open Internet Information Services (IIS) Manager and follow these steps:

Highlight Default Web Site on the left panel;
Double-click MIME Types on the right panel;
Scroll down the list and notice that there is no .mp4;
On the right panel again, click Add: at the first field, write .mp4 and on the field below write video/mp4
Click OK and you are done.

Restart IIS!

answered Oct 25 '22 01:10

bryanp

I had the same problem

For Internet Explorer

I used FormatFactory, setting up AAC encoding for audio and H264 for output for the mp4 format, in "High Quality and big size"

For Google Chrome

I converted my original video to the webm format thanks to Free WebM Video Converter (make sure you uncheck everything that would like to install ads).

It took a long time but then it worked in Chrome.

<video controls>
  <source src="thevideo.mp4" type="video/mp4">
  <source src="thevideo.webm" type="video/webm">
</video>

answered Oct 24 '22 23:10

Mikaël Mayer

Related questions
                            
                                Class on Table?
                            
                                How to remove an invisible space between div tags
                            
                                Make CSS Drop Down Menu 2 Columns
                            
                                HTML Form text input suggestions box
                            
                                How do you do tab stops in HTML/CSS
                            
                                Setting div width to 100% minus certain amount of px
                            
                                What is the benefit of \n and PHP_EOL in PHP?
                            
                                Change color of selection
                            
                                Make floating list elements equal height (with pure css)
                            
                                jQuery - modify HTML string
                            
                                Detect mouseMove out event for HTML canvas element
                            
                                HTML5 restore canvas after clearing
                            
                                PHP if multiple variables exist
                            
                                clearing objects from localstorage
                            
                                Load Facebook into an iframe
                            
                                Hiding column's in YII CGridView
                            
                                How to extend Twitter Bootstrap image carousel for dynamically sized, centered images
                            
                                Disable Scrolling When Clicking on a Link
                            
                                How to focus input, and deselect text inside it
                            
                                Can all the CSS for HTML emails css go in the head?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With