video.js video does not stream in IE - html

recently I tried to use video.js for playing my videos. It works quite fine but there is one exception: In IE9 the videos are not streamed; it takes a long time until they start playing.
Example here:
http://www.ulrichbangert.de/orchid/phalaenopsis/2013-03-20_Phal_I_Hsin_Salmon.php
I used Freemake Video Converter to create the videos (HTML5 mode).
Best regards - Ulrich

For others still having problems ... at least for the wordpress plugin ...
the plugin sets the mp4 type to video/mp4 ... IE9 does not like this
change the type for mp4 to ... video/x-m4v
I suspect the same may be true of other types if they won't stream in IE ...
Note: there are other issues with IE9 in that some mp4 videos are organized in a way that makes IE read the entire file before playing it. Search for qt-faststart ... but the video type was preventing my videos in wordpress from starting in IE. You might try setting preload to false for IE.

Related

Why won't MP4 video work with HTML5 <video> tag on Firefox

Because I dislike Youtube and Vimeo is too expensive, I chose to upload my videos directly to the server at my web host and embed the videos on my site using the HTML5 tag (see photos for the code). The videos play fine on all browsers except for Firefox and I can't figure out why. https://memoriaelinguagrumentina.org/english/saponareseCuisine.html
I've seen several other posts on here asking about very similar problems; however, nearly all are at least 8 years old. I've gone through them as part of my troubleshooting process, but without any luck.
I've seen it recommended here to use multiple video formats (.mp4 AND .ogv) because there is no universal format supported by all browsers. Firefox did not always support mp4, but I believe it does now. So I don't believe this is the root of the problem.
I checked with my web host to see if they have the correct MIME types (see photo).
I cleared the cache on my browser, set the privacy settings to normal, and checked hardware acceleration.
What am I missing?
*note: To save disk space, I'd like to not have to upload duplicate videos in different video formats to the server, ideally. Since Firefox now claims to support mp4, I was hoping to get away with using only mp4.
Firefox doesn't support all video files. They generally support MP3, WebM, Ogg, and Wave containers, and if you are using an MP4 container then it usually depends on the platform decoders for AAC and H.264 audio and video streams. The video encoder format that you are using isn't supported by firefox. You should use supported encoders for your video.
You can find more information here:
https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox
Your MP4 videos are using H.265 video codec.
You need to have them encoded as H.264 to work in most browsers.
Solution: This means you must re-save your videos as a new format.
The problem is not just Firefox, even Windows Chrome does not play H.265 encoded video.
Things to fix:
Re-encode as H.264 (use High or Main profile for better compression-vs-quality output).
Re-size your videos (when doing re-encode). 720p should be okay for demos/intros. You don't need a large 3840 x 2160 pixels video showing inside a small 672 x 398 pixels box.
Your file size is not good. 286 mb is too much data loading for just a mere 6 minute video.

.mp4 file not playing in chrome

I want to show a video on my website. I have created a .mp4 file and using the HTML5 video tag to add it to the html.
The problem is that it is not being displayed in chrome. I would also like to know how I can replay it again and again.
I too had the same issue. I changed the codec to H264-MPEG-4 AVC and the videos started working in HTML5/Chrome.
Option selected in converter: H264-MPEG-4 AVC, Codec visible in VLC player: H264-MPEG-4 AVC (part 10) (avc1)
Hope it helps...
After running into the same issue - here're some of my thoughts:
due to Chrome removing support for h264, on some machines, mp4 videos
encoded with it will either not work (throwing an Parser error when
viewing under Firebug/Network tab - consistent with issue submitted
here), or crash the browser, depending upon the encoding settings
it isn't consistent - it entirely depends upon the codecs installed
on the computer - while I didn't encounter this issue on my machine,
we did have one in the office where the issue occurred (and thus we
used this one for testing)
it might to do with Quicktime / divX settings (the machine in
question had an older version of Quicktime than my native one - we
didn't want to loose our testing pc though, so we didn't update it).
As it affects only Chrome (other browsers work fine with VideoForEverybody solution) the solution I've used is:
for every mp4 file, create a Theora encoded mp4 file (example.mp4 -> example_c.mp4)
apply following js:
if (window.chrome)
$("[type=video\\\/mp4]").each(function()
{
$(this).attr('src', $(this).attr('src').replace(".mp4", "_c.mp4"));
});
Unfortunately it's a bad Chrome hack, but hey, at least it works.
Source: user: eithedog
This also can help: chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec
Also check your version of crome here: html5test
(#Alston posted this as a comment, and it worked for me, and 9 others who also upvoted, so posting this as an answer to get more eyeballs on it:)
Simply re-encoding the video file with this FFMPEG command solves it:
ffmpeg -i input.mp4 -vcodec h264 output.mp4
This started out as an attempt to cast video from my pc to a tv (with subtitles) eventually using Chromecast. And I ended up in this "does not play mp4" situation. However I seemed to have proved that Chrome will play (exactly the same) mp4 as long as it isn't wrapped in html(5)
So here is what I have constructed. I have made a webpage under localhost and in there is a default.htm which contains:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video controls >
<source src="sample.mp4" type="video/mp4">
<track kind="subtitles" src="sample.vtt" label="gcsubs" srclang="eng">
</video>
</body>
</html>
the video and subtitle files are stored in the same folder as default.htm
I have the very latest version of Chrome (just updated this morning)
When I type the appropriate localhost... into my Chrome browser a black square appears with a "GO" arrow and an elapsed time bar, a mute button and an icon which says "CC". If I hit the go arrow, nothing happens (it doesn't change to "pause", the elapsed time doesn't move, and the timer sticks at 0:00. There are no error messages - nothing!
(note that if I input localhost.. to IE11 the video plays!!!!
In Chrome if I enter the disc address of sample.mp4 (i.e. C:\webstore\sample.mp4 then Chrome will play the video fine?.
This last bit is probably a working solution for Chromecast except that I cannot see any subtitles. I really want a solution with working subtitles.
I just don't understand what is different in Chrome between the two methods of playing mp4
Encountering the same problem, I solved this by reconverting the file with default mp4 settings in iMovie.
I was actually running into some strange errors with mp4's a while ago. What fixed it for me was re-encoding the video using known supported codecs (H.264 & MP3).
I actually used the VLC player to do so and it worked fine afterward. I converted using the mentioned codecs H.264/MP3. That solved it for me.
Maybe the problem is not in the format but in the JavaScript implementation of the play/ pause methods. May I suggest visiting the following link where Google developer explains it in a good way?
Additionally, you could choose to use the newer webp format, which Chrome supports out of the box, but be careful with other browsers. Check the support for it before implementation. Here's a link that describes the mentioned format.
On that note: I've created a small script that easily converts all standard formats to webp. You can easily configure it to fit your needs. Here's the Github repo of the same projects.

Embedded webm video freezes in Chrome

I am making a system that I run on localhost, it embeds a video player and all works fine except for webm videos on Chrome. They freeze regularly and I can only get them running again by pressing play/pause and moving to the initial phases of the video.
I have been googling for this issue and trying to solve it for some time now without success, does anybody know how to solve this?
Is your same WebM file working ok on Firefox? I assume you are using HTML5 video.
I have compiled a short check list on how to troubleshoot HTML5 video playback issue here. Try to play the videojs webm sample to see if it works.
Given the description of your issue I guess it is either a non proper WebM file or a server side tuning issue (like with mime types).
If it is a file format issue you could try re-transcoding from a known good source (ie not the problematic WebM file) with firefogg.
You can also try to set the preload attribute of your HTML5 video tag to auto.

Converted Video doesn't play on Internet Explorer 9

I'm trying to embed video playback on a website, using HTML5 video tags.
For some example mp4 files I found, the video plays well on both IE9 & Chrome,
but when I use mp4 files converted from avi/mkv files I have - The video plays only on Chrome, while IE9 refuses to play it.
I've tried several video conversion tools:
HandBrake, Miro Video Converter, Freemake Video Converter.
All produced mp4 containing H. 264 video & AAC audio - And all works well on Chrone.
I also tried playing around with IE9 multimedia/security options - but nothing has changed.
Well, I read about IE9 having a bad support for video playback and html5 in general, but still - it's clearly stated that mp4 is supported for all h264 profiles.
As you can understand - I have a priority for this website to work well on IE9 - So I'd appreciate any tips here.
I have the same issue and found out that it's the combination of Miro Video Converter, videojs and IE9:
When I convert with EasyHTML5video and standard settings (you cannot change any setting) everything ik OK and plays is IE9 with videojs.
When I convert with Miro Video Converter and standard settings (you cannot change any setting) IE9 doesn't play and has a VIDEO OBJECT error.
I've compared the 2 outputs and I think it's only the audio that is different. Miro is 2 channel 48Khz and EasyHTML5 1 channel with 16Khz.
I hope to find the right conversion tool, Miro is better quality than EasyHTML5video, but maybe there is the problem.
My suggestion would be using a plugin which utilizes feature detection such as VideoJS
It will provide the necessary fallback to flash if the video will not display correctly on the browser
Follow the instructions on http://videojs.com/ should be straightforward

HTML5 <audio> stalling in firefox

Hi I am working on a site which utilizes the new HTML5 audio element. I have both .mp3s and .wav files ready so that it can play in safari and firefox. Firefox loads the page up in a couple seconds but the audio stalls during playback. The page takes longer to load in safari but the playback is perfect. Have the .wav files been currupted somehow, or is firefox assuming that they are loaded before they actually are? I was really excited to use HTML5 should I just use flash?
Here is the page for reference
.WAV files can easily get huge, as they are uncompress... you'd better be using .OGG files. Here is the list of supported audio formats by browsers.
If you don't know how to convert sounds from one format to another, you can use FFMPEG. It also has a graphical interface for Windows.