I actually have a probleme playing some MP4 video on my phone.
I'm on android 5.0.1, using Chrome 47 with this simple html code :
<!doctype html>
<html>
<head>
<title>ssqsq</title>
</head>
<body>
<video controls="" autoplay="" name="media">
<source src=x type="video/mp4">
</video>
</body>
</html>
Let say 'x' is a variable where is my source address.
When the address is : http://www.w3schools.com/html/mov_bbb.mp4 , Chrome read the video without probleme.
But when x is : http://someurl/files/atoms/video/mov_bbb.mp4
(it's the same video, literaly. I download from w3s to upload on this website), my chrome isn't abble to read the video
'someurl' has an .htaccess, but this not seem to be the probleme since the video play normally on chrome(on my desktop) and even on my androind (using FireFox 43.0)
I have thinking of codec probleme when i was working with other video, but this one (mov_bbb.mp4) does not change between w3s and 'someurl'
I don't know where it could come from.
Not the codec, because video play well on w3s.
Not the server configuration because the video play well on firefox and on desktop...
Advice and help would be thankfull!
I have an HTML page that contains a MP4 video:
<html>
<body>
<video width="800" height="600" controls>
<source src="/static/xyz.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
When I load the page in Firefox, it doesn't show the play control buttons but shows error message "No video with supported format and MIME type found" (see the screenshot below).
So I use this site to test my browser's ability to play HTML5 mp4 video and it can successfully play the test video on that site. My Firefox version is v36 on CentOS Linux. I also tried using Chrome and it can't play it either. I also tried it on Firefox/Chrome on Windows but failed. I then use the Firefox debugger to look at the debug info and I see the following message:
Media resource http://localhost:5000/static/xyz.mp4 could not be decoded.
All candidate resources failed to load. Media load paused.
I then tried playing the xyz.mp4 video on my local machine using Linux's movie player and it plays fine and it also plays fine in Window's media player. But when I use the above HTML5 <video> tag, it doesn't play for all browsers in both Linux and Windows. I also followed Mozilla's online forum to change the browser settings and clear caches but none of them works. So what caused the problem of this simple HTML5 ?
This is very likely the problem with your video file. mp4 is not really a format, but a container that can hold video in different formats. Firefox supports only H.264 encoded video.
Simply speaking, there are several types of mp4 files and not all of them are supported by browser. To verify this, you can download one of the videos from the quicksmode website and replace your video with it.
Possible solution:
//autoplay muted onloadedmetadata="this.muted = true"
<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
<source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
Your browser does not support the video tag.
</video>
I asked a question here: Server does not read ogg file. My problem before was my server, it is not reading the audio ogg file, I addded a MIME type for my server to be able to read these kinds of files.
Now, my server reads the file, the problem is, it does not play in the player. What is wrong? I cannot figure it out. I can access the file using a URL (website.com/directory/audio.ogg). The player is displayed, but it does not play.
The player is working fine in Chrome. It plays the audio file. So I think, nothing's wrong with my code. Especially the src of my audio tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Audio Player</title>
</head>
<body>
<audio controls preload>
<source src="audio/audio.ogg" type="audio/ogg">
<source src="audio/audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
make sure you use .ogv as the file extension and ogg as the file type. Theora is weird that way.
I'm on a server still running ColdFusion version 8. I'm not sure if this is my problem though.
I have the following code that I can get to work in my computer on my desktop, using both Firefox and Chrome. I access it as an html file directly using a file system url, i.e. file:///C:/.../test.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
</head>
<body>
<p> Try w3Schools test video</p>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
When I put this test.cfm or test.html page up on the Coldfusion 8 server, neither browser displays the video. The movie.mp4 and movie.ogv files are up on the server in the same directory as the test.cfm file. In Firefox I get:
"No video with supported format and MIME type found."
In Chrome it shows the video controls but no video is present.
Is there something I need to enable on the server (it is a shared hosting account)? Perhaps this is not particular to ColdFusion and I'm making another mistake (note this is my first attempt to use the video tags).
Thanks
P.S. If I access it on my computer using Aptana's launch mechanism and running in:
127.0.0.1:8000/.../test.html
I get the same problem as running on the server. The videos do not display.
Courtesy of Miguel-F's guidance, the server was missing support for the .mp4 and .ogv mime types. When the hosting company added those to the server, the videos displayed.
I tried a simple example for HTML5 but it doesnt seem to work.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls autoplay">
<source src="resources/sample/sample1.mp4" type="video/mp4" />
</video>
</body>
</html>
I tried the example on chrome, the video loads up, but it does not play, i can see the video frames if i move the slider to and fro but the video itself doesnot play.
UPDATE:
I accessed this on localhost(tomcat), its still reacting in the same way.
Also i noticed that i am not able to play any HTML5 videos on chrome or firefox(updated).
Add "controls" as a flag. It allows the browser to run it's own player code on the video. I tried this with a .mp4 file on Chrome and it works.
I do not agree with Alex Pereora. It can be loaded from local machine just by referencing file names and or paths.
I had similar issue, and turned out IIS in Win 7 Pro does not have mp4 in it's mime types. Must add add the mime type. see instructions for adding mime type in link below.
html5 video is not playing mp4 error "Invalid Source"?
I faced the same issue now. I am getting the src of the video dynamically and asynchronously using ajax.
The issue was that the <video> element was getting loaded before the src. If we put the <video> element into the DOM after the src is loaded then the issue will get fixed.
In case of Angular we can use *ngIf to fix the issue. Below is Angular code snippet:
<video autoplay *ngIf="src" class="thumbnail">
<source [src]="src" [type]="type">
</video>
What worked for me was to convert the mp4 format from V1 to V2:
ffmpeg.exe -i old.mp4 -brand mp42 new-v2.mp4
You can't load a localfile like that with the HTML5 Video tag.
You'll have to use a localhost or a distant hosted file. Try to install mamp/wamp and load it through the virtual host.
<source src="http://localhost/development/programs/html/html5/sample/sample1.m4v" type="video/mp4" />
use both format it works fine in all browser:
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>
If your type of video is MP4 running on IIS/.NET
Add a web.config file to the root of the application web.config with the following contents
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="application/mp4" />
</staticContent>
</system.webServer>
</configuration>
add autoplay loop to video tag for play automatically as follows:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay loop>
<source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>
</body>
</html>
Video not playing in server because the mime type is not added in IIS.
To add Mime Type :
• Go to IIS and select your site
• Click Mime Types Under menu and click Add on right side tab
• Under File Name Extension add mp4,under Mime type add video/mp4 and click Ok.
• Restart IIS ,Now run the application
Try to set a relative uri for your video. The "D:/…" only works on windows locally and not in all browsers.
Chrome: Does the file contain audio as well? If so and you are playing it on desktop, connect the speakers to the desktop and check.
Firefox: H.264 content is not supported
IE9: The following should be added to your page <meta http-equiv="X-UA-Compatible" content="IE=edge" />
It may be due to video encoding.Check the encoding of your video and see if Chrome supports that.It may be a possible reason as I faced it.
Try some encoders like ff-mpeg to encode videos.
I got this problem when hosting on IIS, and found the solution Here.
In my case, even putting complete video URL on Chrome would give me 404 error, because the MP4 MIME type didn't exist on site config. So, I added .mp4 with MIME video/mp4, and all got right. Dunno if that's the same with tomcat, but that's worth a try...
Just set controls as a flag, not as a key=value pair:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>
</body>
</html>
Just be sure that you had inserted the video path correctly. Your 'resources' folder and the page where is the video tag must be at the same folder.
This approach will surely work. If this works plz upvote my answer.
<video width="50%" height="50%" loop muted id = "autoplay">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
window.onload = function(){
document.getElementById("autoplay").play()
}
</script>