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>
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'm trying to create a HTML5 video background for a website but I cannot seem to get it to work on Safari. Does anyone have any ideas?
Here's the HTML video tags I'm using
<video id="bgVideo" class="bg__video" autoplay loop>
<source src="./vid/Sample_Vid.ogv" type="video/ogv">
<source src="./vid/Sample_Vid.m4v" type="video/m4v">
<source src="./vid/Sample_Vid.webm" type="video/webm">
</video>
I've tried adding a script tag under it to start playing the video with JS but that's not helped either.
document.getElementById("bgVideo").play();
When I inspect the page it looks like the video element is taking up space in the DOM but it's just invisible basically.
I've also tried opening the .m4v files directly in the browser & it plays it there so I assume the file isn't an issue. These were all generated from easyhtml5video.com
I also have the Modernizer script to detect if autoplay is enabled for the browser which I've had to alter based on a pull request in the github repo as it was always saying that Safari doesn't support autoplay otherwise.
The test site I've setup is http://treetopia.neilnand.co.uk/
The supported video format for Safari is mp4 with H.264 encoding. (you have a .m4v extension and file type)
If video does not has sound - use
document.getElementById("bgVideo").volume = 0;
Safari don't allow autoplay for videos with sound.
Currently i have some problems implemeting a video with the HTML5-Video-Tag. I implemented the video in the formats .mp4, .ogg and .webm to support all common browsers.
My first problem is now that the video is displayed on all browsers but the IE. I yet tried to add the MIME-Types in the .htaccess file but that brought no improvement.
The next problem is that the video is displayed normally on mobile devices but on desktop devices there is no sound. I'm nearly despeiring :D
Is there someone that had the same problems or could give me a hint? I woukd be very very thankful.
Kind regards
Edit: Code example
<video width="100%" height="100%" controls>
<source src="intro.mp4" type="video/mp4">
<source src="intro.ogg" type="video/ogg">
<source src="intro.webm" type="video/webm">
Some text....
</video>
First of all, please specify Internet Explorer version. For instance, it's IE6, HTML5 video player won't work at all.
Second, the problem can be in MP4 file itself. The file needs to be encoded with h.264 codec. Please check the MP4 file media data. For example, you can do it with MediaInfo software.
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 have created 3 versions of a video file using Miro Video Converter to facilitate different browsers and I am using the following code to play them...
<video class="rw-video video-js" data-settings="rw-green rw-flat-color rw-rounded" title="My movie title" preload="auto" controls width="800" height="400" id="exampleVid1" poster="images/video.png" >
<source src="images/movie1.mp4" type="video/mp4" />
<source src="images/movie1.ogv" type="video/ogg" />
<source src="images/movie1.webm" type="video/webm" />
<p>Your browser does not support the video tag.</p>
</video>
The video plays just fine in firefox and safari but not in chrome - it appears to play in chrome but never starts - the hourglass just goes round and round and it never plays. I have checked filenames and that the video is uploaded. Any ideas? I wondered if Chrome maybe interprets "preload="auto"" to mean preload the entire video but fiddling with that didnt make any difference I could see. The movies are around 50mb in total and load instantly in other browsers.
this is actually a Google Chrome bug which prevents it to load more than 6 MP4 videos. Try putting preload="none" on all the videos and then start clicking on them. You will probably be able to open 6 of them but on 7th video Google Chrome will hang. That is how it is with me, but maybee this will happen sooner on your system.
But you will trigger the bug if you have MP$ video among your videos, so it is best to completely avoid the MP4 format. I solved it completely by using webm video format.