I am using html 5 video tags to display a video as my sites desktop hero image. It works without issue in chrome and Fire Fox, loading almost instantly. But in IE 11 and I assume earlier versions, it takes about 10 seconds to load. I am not sure why this would be. mp4 video is 16MB, and the other formats are smaller.
<video autoplay loop class="hero-video">
<source src="/img/10_Seconds_w_o_Matte.mp4" type="video/mp4" codecs="avc1.4D401E, mp4a.40.2" />
<source src="/img/10_Seconds_w_o_Matte.ogg" type="video/ogg" />
<source src="/img/10_Seconds_w_o_Matte.webm" type="video/webm" />
<source src="/img/hero2_img.jpg" />
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
Chrome removed h264 support several years ago https://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html
So Chrome and Firefox are coming into your code and skipping past the mp4 and loading the smaller files while IE 11 only supports mp4 so it must load the larger video.
Your problem is with the size of your mp4. Guessing by the name of the files it looks like you might be able to do some funny business with a animated gif instead of the video for IE if you'd like it to load faster. Just a suggestion. Unfortunately if that is the smallest the mp4 will get and you must use a video file then you are kind of stuck with it loading slow in IE.
Related
I am trying to use tag to play mp3 in a page. The website is based on WordPress. The audio players do not appear in safari but working others browser.
This is the page url: http://soundhealingcenter.com/love/braintests/
Here is the code I am trying to use:
<audio controls="controls">
<source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>
The audio players * do appear* in Safari, and the audio can be played back properly. It just seems that all audio is loaded simulataneously, and since each one is about 20 minutes, that takes a lot of time, also depending on connection speed. In my case, the second one finished loading first, then 4, 5, 9, 10. The others are still loading (and can't be started yet therefore).
So you might want to consider deactivating the automatic loading on page load by adding the attribute preload="none" to the audio tag, so that would be
<audio controls="controls" preload="none">
<source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>
I also faced a issue like this and by preload attr in audio tag fixed it.
Since my audio files are small, i used preload = auto. Safari will start playback only once the complete audio is downloaded.Here is my Ref:https://codepen.io/aravi-pen/pen/OxPaVb.You can Refer here for more about preload tag:https://html.com/attributes/audio-preload/
Thanks!
I am going through strange problem with chrome, I am working on a web page that has 13 Mp4 Videos on page which I load using HTML5 Code as given below.
<video width="900" controls>
<source type="video/mp4" src="videopathhere">
</video>
URL of the page is http://www.htsolutions.com/beta/company/clients, when I open this page in chrome it will show 8 video thumbnails and then it will stop loading, it won't even load other pages of the website until this page is closed.
Did any one run through this isssue? well, whatever (first eight) video thumbnails are loaded do play when clicked on them, so no problem with running the videos only problem is loading entire page, this page works fine under firefox and other browsers.
I am checking this on chrome version 48.
Regards
Manoj Soni
It took long time, less views and no answer for me to get into the solution of the answer.
Chrome always run into issue when we use more than specific number of MP4 HTML5 videos on the page and hangs, solution for the same is not preloading the video, so my video tag changed to this.
<video preload="none" width="900" controls>
<source type="video/mp4" src="videopathhere">
</video>
Issue is resolved, I am putthing this answer for anybody who is running into the same problem.
Regards
Manoj Soni
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 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.
My HTML5 video player won't play a file longer than one hour. Here is my code:
<video src="/Movies/MP4/Blaa.mp4" controls="controls"></video>.
I am quite new to HTML5 so i am asking what the problem could be? Any answers are appreciated.
-Simon
It looks like you're only using a single mp4 file, so I'm not sure if this will help, but I was able to solve my problem by switching the order of my source files. From what I can tell, Chrome is able to play H.264 video (which is what is usually contained within the MP4 wrapper), but it is unable to play MP4 files. I'm guessing that they finally removed support for MP4 like they've been saying that they were going to.
Here's what my code used to look like:
<video width="640" height="360" controls>
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
From my understanding, when a browser tries to render an HTML5 video tag, it's supposed to skip over any source tags that it can't play, and attempt to play the first one that it can. For whatever reason, Chrome is not currently doing that. It's trying to play the MP4 anyway, and failing.
Even the video on the "Video for Everyone" page is failing for me now.
My solution was to switch the order of the source tags so that the webm video came before the mp4 video:
<video width="640" height="360" controls>
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
So far this has fixed the problem. Chrome now plays the webm file with no issues, and all other browsers I have tested still seem to work fine.
The only possible problem that I still need to test for is that I've read that the iPad had a bug that required the MP4 source to be listed first. I'm working on getting my hands on an iPad to see if that's still an issue.
For now, this solution fixed my problem.
Hope that helps!
The problem was that chrome won't play MP4 movie files at the moment. Safari is the only working browser right now.