I try to add the video tag on a website, but I encounter a problem.
The video is well played in Chrome but not in Firefox even the URL is correct.
<video src="http://127.0.0.1/st_martin/index.php/fre/content/download/89/643/file/test-video.mp4" width="640" height="266" poster="/st_martin/var/ezwebin_site/storage/images/les-partenaires/l-auberge-gourmande/video-1/764-5-fre-FR/Video-1_large.png" controls>
Your browser does not support the <code>video</code> element.
</video>
And enervous thing : when I copy/paste file URL in firefox it plays the video without any problem.
Using embed video player cause a neverending loading animation.
Firefox does not support .mp4 playback. Try conveting the video to .ogg format which is fast becoming a standard format for html 5 applications.
Related
On a website i am using HTML5 to embedded a self hosted video without controls. I started out with a video file of 2mb and it played fine without problems in all browsers.
Recently I added a different video of 16mb. Now the video will play in all browsers except internet explorer. Does anyone have a clue how to fix this problem?
link: http://www.elephantdevelopment.nl/Startransfer/
HTML used:
<video id="myVideo" width="100%" height="100%" loop>
<source src="/Startransfer/wp-content/uploads/2016/05/startransfer-opening-home-video.mp4" type="video/mp4">
</video>
I figured out what the problem was. Although MP4 is supported in Internet explorer it does matter how you encode the file. Make sure you use BASELINE encoding when rendering for self hosted webvideo.
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>
We want to play video with audio using the <video> tag.
What combinations of video formats and video and audio codecs can be played in most modern browsers using html5?
For example, can the files be in Quicktime container format?
Can they be h.264 and MP3 inside of Quicktime and still play in most browsers?
Can they be h.264 and AAC inside of Quicktime and still play in most browsers?
We do not care about Internet Explorer older than version 11.
We do care about current versions of Chrome, Firefox and Safari, including their mobile versions.
Edit
So according to the comment by #Widor and http://caniuse.com/#feat=video I can use the video tag, however, that page says nothing about what kind of video I can put into the video tag.
container: MP4, video codec: H.264, audo codec: AAC. If you want everyone to be able to play the video go with a resolution of around 640x360 ("360p") and a bitrate of around 800kbps, but that really depends on your source input. In general don't use a resolutions above 1280x720 or bitrates above 2500kbps unless you have a lower-quality fallback option.
You need to make sure that the MP4 is "streaming optimized" or "progressive download ready", which means that the MOOV header information is at the front and the video can start playing back immediately. MP4 will cover most mobile/desktop browsers, but you may want to provide a WebM as well for some versions of Firefox + Opera.
Here's an example tag with mp4 and webm fallback included, with direct link fallback if browser doesn't support html5 (some mobile devices):
<div style="width:640px; height: 360px; position: relative">
<video width="100%" height="100%" controls="controls" poster="http://url/of/my-preview.jpg">
<source src="http://url/of/my-video.mp4" type="video/mp4; codecs='avc1.64001F, mp4a.40.5'">
<source src="http://url/of/my-video.webm" type="codecs=vp8,vorbis">
<a href="http://url/of/my-video.mp4">
<img src="http://url/of/my-preview.jpg" alt="Click to play video because your browser doesn't support HTML5 video" style="width:100%; height: 100%">
</a>
</video>
</div>
If you need to convert videos to MP4 try the excellent tool Handbrake
Also, http://diveintohtml5.info/video.html Is a good resource.
I'm trying to use the html5 video tag to embed an mp4 but I'm having some issues that vary across different browsers.
My code looks like this:
<video controls="controls" width="640" height="360">
<source src="http://www.mydomain.com/video.mp4" type="video/mp4" />
</video>
IE - Won't recognize the file when trying to embed (edit: IE was actually dragging on the file size not the format) and when the uri to my video is plugged into the address bar it opens the video in windows media player.
Chrome, Firefox - Simply will not recognized the file format (edit: Firefox was dragging on the size as well, Chrome was the only browser having issues) and when the uri is plugged into the address bar it attempts to play the video within the browser but fails.
Could there be something within the file that would prevent it from being embedded? If so, how can I find this out?
The problem is likely that the browsers are not supporting MP4, because it is a proprietary format. To get the best cross-browser support you'll have to also encode your video in WebM and Ogg/Vorbis formats and then add those files to your video tag with their own source tags.
Just because a browser will play a video if you navigate directly to the video's URL does not mean that the browser supports that format. Usually, navigating straight to the video causes the browser to play the video with a plug-in such as Quicktime or VLC that has much better codec support than the browser does.
try this without that "/"
<video controls="controls" width="640" height="360">
<source src="http://www.mydomain.com/video.mp4" type="video/mp4" >
<source src="http://www.mydomain.com/video.ogg" type="video/ogg" >
</video>
I am trying to play a video in safari 5 but its just showing me a blue question mark button, no video place holder no video controls (like in chrome)
<video poster='your_pic.jpg' controls="">
<source width='480' height='360' src='/videos/my file to play.m4v' />
</video>
For safari to play videos on windows you have to install apple quick time.
http://www.agilepman.com/2010/09/how-to-make-html5-video-tag-work-in-safari-on-windows/
I'm not familiar with the syntax you have used, i.e. a source tag within the video tag. I would expect a video reference to look more like this:
<video controls="true" poster="some-image.png" src="some-video.mp4"></video>
Does the video work as expected in Chrome? Looking at the controls that do get rendered, the difference between Chrome and Safari seems to be down to embedded Quicktime (i.e. Safari uses it if it can, Chrome does not).
One other thing: if the file just doesn't play anywhere, bear in mind that .m4v files are often MPEG4 files with Apple's Fairplay DRM applied to them (although they don't have to be).