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.
Related
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.
First I made a screen recording as a video I would like to display.
Than I uploaded the video to VLC to convert the video.
I made one MP4 and a fallback for OGG.
I then moved the videos to my dropbox account so I can host them there.I right clicked and got the link to each video from dropbox. I am trying to use the links as the src in the video tags.
<video width="400" controls>
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=0" type="video/mp4">
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=0" type="video/ogg">
</video>
Even though I told VLC to convert it to MPV, the file extension is m4v.. Is that the same thing?
The video just shows blank. Not getting any errors either.Not sure what I missed.
The following Fixed it for me.
I made two changes:
change dl=0 at the end of your dropbox link to dl=1. I believe this makes it a download link instead of a page to view a download link.
Due to a bug in chrome on OSX certain mp4 files will fail to play correctly (some kind of graphics acceleration issue), but it won't fall back to the ogv. For this reason, i have placed the ogv as first since it will work on OSX-chrome, and platforms that don't support it should fall back to the mp4.
<video width="400" controls>
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=1" type="video/ogg">
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=1" type="video/mp4">
</video>
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>
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.
i have a html5 video embedded in a web page, that appears with a fade when an user clicks on a link.
If i click on play, the timeline cursor jumps to the end, not playing anything.
If i click on the timeline (so seeking) the video starts from the point where i click and plays normally.
I already added the video formats in the .htaccess.
How can i fix this?
On chrome it works as intended.
<video width="660" height="275" controls="controls">
<source type="video/webm" src="video/nev.webm"/>
<source type="video/mp4" src="video/nev.mp4"/>
<source type="video/ogv" src="video/nev.ogv"/>
<source type="video/flash" src="video/nev.flv"/>
</video>
Roby
I fixed changing video converter, i used "Miro Converter" and it was creating this problem, "Any Video Converter" converted the video making it work in firefox.
I think that the problem is the dimension of movies, specially the format. While I was using 600 x 480 px everything play perfect, but beyond of this relation the timeline cursor doesn't works in autoplay unless I " push " the cursor 5 sec. forward .... I also use Miro video converter.