I can't work out why my video is playing at different qualities on different browsers. In Chrome and FF the quality is terrible but in Safari and IE it looks fine. Does anyone know of a reason/solution?
Video:
www.mediaeclipse.co.uk
HTML Code:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="536" poster="http://www.mediaeclipse.co.uk/Media/previewimage1.png"
data-setup="{}">
<source type="video/ogg" src="http://www.mediaeclipse.co.uk/Media/Showreel.ogg">
<source type="video/mp4" src="http://www.mediaeclipse.co.uk/Media/showreelsmall.mp4">
</video>
You have two videos of incredibly different quality. The mp4 rendition looks fine, which is what Safari and IE are playing, but since Chrome and FF can play back OGG natively you're seeing the horrendous OGG encoding.
You can either remove the OGG rendition altogether and let Video.js fallback to the flash player, or transcode the mp4 as an OGG using something like Handbrake or Zencoder. I personally would suggest the latter, but either should do the trick.
Related
I have an MP3 audio stream contained in an .m3u8 file delivered through CloudFront. This is successfully used by apps to play audio, but I'm trying to play this in a browser.
I have tried the basic HTML <audio> tag, and more sophisticated implementations like videojs. In all cases, the audio plays fine in Safari, but will not play in Chrome or Firefox.
Using video.js:
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"liveui": true}'>
<source src="https://d1q1pwal4ma0iv.cloudfront.net/playlist.m3u8" type="application/x-mpegURL"/>
</video>
<script src="https://vjs.zencdn.net/7.7.6/video.js"></script>
</body>
HTML:
<audio
controls src="https://d1q1pwal4ma0iv.cloudfront.net/playlist.m3u8">
Your browser does not support the
<code>audio</code> element.
</audio>
Does anyone have any theories as to what it is about Chrome and Firefox which means it does not play there?
Video.js does not support mp3 in HLS. HLS with acc would work.
I'd like to load and play a smaller HEVC-encoded video on web browsers with support for it.
I'm using this code on Safari 11 (macOS 10.13), which has support for the HEVC format.
<video muted playsinline autoplay>
<source src="clip.webm" type="video/webm; codecs=vp9">
<source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
<source src="clip.mp4" type="video/mp4; codecs=avc1">
<p>Video not supported</p>
</video>
In Web Inspector > Network Panel, I see that Safari loads both clip.mp4 and clip-hevc.mp4. If I inspect the video element, I see that clip.mp4 is playing, not clip-hevc.mp4. I see the same thing on iOS 11.
When I call HTMLMediaElement.canPlayType() on the types I specified, I get
maybe on video/mp4; codecs=hevc
probably on video/mp4; codecs=avc1
Nothing on variants of the HEVC codec I've seen (e.g., hvc1, hev1)
Something else I noticed: When I remove the clip.mp4 option, clip-hevc.mp4 downloads and plays just fine!
How can I make sure that only the best supported MP4 variant downloads and plays in the browser?
FYI found in iOS14 type="video/mp4; codecs=hevc" doesn't work anymore. type="video/mp4" and type="video/mp4; codecs=hvc1" does
i have a video file (avi with avc+mp3). Is it possible to play this via the HTML5 video-tag?
i have tested it in Internet Explorer 9 but it will not work! Is it because the audio codec mp3 is not supported or is it the "video Codec-Profile "HighL3.0"?
Edited to fix misunderstanding
I suggest you do some reading about the ongoing codec wars, or look at this table. Basically, some browsers accept only videos with a MP4 container, H.264-encoded video, and AAC-encoded audio (low-complexity profile); some browsers accept only videos with a WebM container, VP8-encoded video, and ogg-vorbis-encoded audio.
MP4/H.264 seems to be winning the war, but at the moment you'll need both for complete browser support.
Modern browsers which support <video> use WebM, MP4/H.264 and OGG video format. So you can't use AVI for HTML5 video. There is no unique format which is supported by all browsers. The only solution is to convert file to supported formats and use <video> like this:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"> <!-- IE, Chrome, Safari, Android -->
<source src="movie.ogg" type="video/ogg"> <!-- Firefox, Chrome, Opera -->
<source src="movie.webm" type="video/webm"> <!-- Firefox, Chrome, Opera, Android -->
Your browser does not support the video tag.
</video>
I have a strange issue with a html5 video. It's working correctly in all browsers except in Internet Explorer. Internet Explorer 9 is always waiting for the video to be fully downloaded until playback starts. If I open the Video in Firefox, Chrome or even Opera everything is working fine.
The code snippet looks as following
<video id="video-js-10734" class="video-js vjs-default-skin" width="640" height="480" controls="controls" autoplay="enabled" data-setup="{}" poster="1"><source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_libtheora.ogv" type="video/ogg" /> <source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_x264.mp4" type="video/mp4" /> </video>
Did I forget about some keyword configuration or is this a "feature" in Internet &*°ç&*ç! Explorer?
Thanks a lot
It sounds like IE doesn't use the same file as other browsers.
I don't remember if IE support OGV files but if not IE should use the mp4 file you provide. It seems then your mp4 hasn't a delay set for autostart.
I have used sometimes a program called MP4box to mux or demux the file so it can start without loading everything.
May be IE doesn't support progressive download for type="video/ogg". Only for H264 and WebM. However you specidy the mp4 file. Try use type="video/ogg" and .ogg file as last option and type="video/mp4" and .mp4 file as first one.
I’m using this code in Google Chrome and the video is working well, but in Firefox (version 11) it’s not working.
How can I make it work in Firefox?
<!DOCTYPE html>
<html>
<body>
<video width="300" height="200" controls="controls">
<source src="http://localhost/javascript/test.mp4" type="video/mp4" />
</video>
</body>
</html>
Firefox doesn't support mp4 as encoding for the video. Have a look at MDN for a compatibility table.
You would have to provide additional encoding for Firefox to work (like this example taken from MDN as well):
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video.
<!-- You can embed a Flash player here, to play your mp4 video in older browseres -->
</video>
UPDATE 01/19/2016:
Now Firefox supports mp4 video formats. So this question should be automatically answered because of update by Firefox browser. Please let us know if your video still does not work.
Since version 4, Firefox only supports WebM, VP8 and Vorbis video format. (Firefox 3.5 supports Ogg, Theora and Vorbis.)
See:
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements.
http://diveintohtml5.info/video.html#what-works
You’ll need to create another version of your video in a Firefox supported format, and add another <source> element for it.
For an example, see:
http://diveintohtml5.info/video.html#example