<video width="320" height="240" controls="controls" preload="none">
<source type="video/mp4" src="myvideo.randomextension" />
</video>
Will this video be played on all mp4 supported browsers? As I changed the video extension from ".mp4" to ".randomextension".?
Yes, it should work, as long as the web server provides the correct Content-Type header. If you're writing the server yourself, in python or node.js or something like that, it's simple enough. If you're using an existing web server, you'll have to do some configuration, because those servers typically use the file extension to know which content type to use.
For example, if your web server is Apache, you might add a line like this to your .htaccess file:
AddType video/mp4 .randomextension
Related
I have a video uploaded to an Amazon S3 server and I am using Amazon cloudfront to host it at http://d1cjzj1b4csf2b.cloudfront.net/test.mp4. I want to play the video using the HTML5 tags and the video player. When I host the test.mp4 file locally and use the HTML code below, it works in my browser. However, it doesn't work when I use Amazon Cloudfront. I tried using Cloudfront with both HLS and RTMP streaming (and JWPlayer), and neither of those worked either because Amazon's documentation was pretty poor. Any suggestions for how to host my video and embed it in a page? I would prefer something simple, but I can obviously try to use a player like JWPlayer. Thanks in advance.
<video controls>
<source src="http://d1cjzj1b4csf2b.cloudfront.net/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The code provided works in Chrome Win10. Your MP4 is downloading if the url is added to browser's address bar so most likely the file's content-type is either not in the header or it has the default value of application/octet.
Download a free copy of CloudBerry Explorer Amazon S3 or use the console
After installation or sign on, locate your MP4 and check the content-type and make sure it's video/mp4.
Look for an option that allows you to edit HTTP Headers with CloudBerry.
Look for Metadata options in S3 console.
Both can be accessed by right-clicking the file and opening preferences.
If you setup your CF Distribution to use HTTPS protocol, then add the s to your url's http
<video controls>
<source src="http://d1cjzj1b4csf2b.cloudfront.net/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I'm trying to play a video in a tag on a plain html page. I have a video in Premiere which i have tried to export both as webm and mp4 (h264) which is located in the same directory on the FTP server as the html file. No matter which codec i render in, the player stays blank (white) and GET errors appear in the output console:
GET Errors
As you can see the video files are clearly in the same directory on the FTP server:
Files on FTP server
The GET error has been replaced with a 404 error sometimes when using different presets with both webm and h264. As far as i know webm and h264 are especially suited for html5 web-players, adobe has tons of different presets, so I really don't get why this has to be such a tricky problem to solve. It is impossible to find someone else with the same problem and this irritates me even more.
We use Azure as web hosting, so if there are any default setting prohibiting video display or similar, tell me!
[EDIT]: Here's the html code for video_presentation.html:
<video width="100%" height="100%" controls>
<source src="course_introduction.webm" type="video/webm">
<source src="course_introduction.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
PLEASE HELP!
And thanks in advance.
Try This
For multiple video clips as you have mentioned above, for maximum HTML5 video browser compatibility you need to make 3 different versions of your video. You can embed multiple HTML5 videos into web pages in a HTML5 video element, below is the HTML5 Video markup example for multiple videos:
<video width="640" height="360" controls>
<source src="ftp or http://path/course_introduction.mp4" type="video/mp4" />
<source src="ftp or http://path/course_introduction.webm" type="video/webm" />
<source src="ftp or http://path/course_introduction.ogv" type="video/ogg" />
</video>
enjoy!!!
You might need to add the mime types to the sites .htaccess file:
AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm
I am using firefox 12.0 version and videos are not working in Firefox, chrome and safari too.....
On local videos are working, but on server videos are not working, on server, browser asking for MIME type...
I am using this code for the video embed...
<video width="230" height="170" controls="controls">
<source src="video/main.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" />
<source src="video/main.ogv" type="video/ogg; codecs="dirac, vorbis"" />
</video>
Please give me solution on this.
It would help to know what software is serving the video files from the server.
Do you know if that software supports HTTP Range requests? Chrome and Firefox use this for audio and video files to retrieve parts of the file, either to avoid downloading a potentially very large file, or to allow the user to move backwards, forwards, pause and play media. Local files support ranges and seeking, but not all web server software does.
Works fine on Chrome. Moreover, I'm using an ogg file so that's not the problem. I'm running on the latest version 9.0.1. HTML5 audio is supposed to be supported by both Chrome and Firefox.
<audio id="audio">
<source src="audio/Your_Hand_In_Mine.ogg" type="audio/ogg" />
<source src="audio/Your_Hand_In_Mine.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Most servers (including those used by GoDaddy) by default don’t serve the appropriate MIME Types for OGG files. That being the case, you’ll need set the appropriate MIME Types for OGG files if you want HTML5 audio players to work correctly in Firefox. So for an Apache server, you would need to add the following to your .htaccess file:
AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg
Evidently, other browsers will guess the MIME Type based on file extension if a MIME Type isn’t served.
If you want more info about this, check this page on the Mozilla Developer Network: https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media
http://support.mozilla.org/en-US/questions/758978
I found this useful in my case, since I had the proper mime types and still no luck:
You can't play MP3 files with such a code in Firefox.
See https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
<audio controls="controls">
<source src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/BajeLaCalle.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
You will have to use a normal object element to play that song in Firefox.
You can look these as an example:
<object data="music.mp3" type="application/x-mplayer2" width="xxx" height="xxx"><param name="filename" value="music.mp3"></object>
<embed type="application/x-mplayer2" src="file.mp3" height="xxx" width="xxx" >
try using some Audio libraries to deal with HTML5 audios. Because libraries handle various problems regarding html5 audios. Some libraries provide automatic fallback for flash audio if the browser is not supporting HTML5 audio. One of the best library out there is http://www.schillmania.com/projects/soundmanager2/
The solution is to properly convert the ogg file into mp3 or vice versa. The encoding was wrong when I just renamed the .ogg file to mp3, silly me. I used software called "Audacity" and "Switch" to accomplish this.
On my local server, the html5-video is reproduced in all browsers, but on the web server it refuses to be reproduced.
Here's the code:
<video controls width="640" height="360" autoplay="true">
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
</video>
Use a HTTP monitor, such as the one built into Firebug (on the ‘Net’ tab) to see what the response to the HTTP request for the video file is.
Possibly the production web server is returning the wrong Content-Type for .ogv and/or .mp4 files. (It should be video/ogg and video/mp4, respectively.) If so, you would need to configure it to add the new MIME media types; how you do this depends on what server software you are using.