I have a video that was recorded on a cellphone with the format MP4 and on Portrait screen orientation. Then I put it in this tag:
<video>
<source src="http://myserver/myvideo.mp4" type="video/mp4;">
</video>
and I also tried:
<video>
<source src="http://myserver/myvideo.mp4" type="video/mp4;codecs=avc1.42E01E,mp4a.40.2">
</video>
On Chrome and Firefox, both work perfectly.
OS: Windows 7
The problem: On Internet Explorer (9,10,11 and Edge), even the orientation of the video being the portrait, I can see it only in the landscape orientation. (With a rotation of 90 degrees)
I've installed Windows Media Player Classic and K-Lite Codec Pack and after that, I can see the video in the correct orientation only on the Windows Media Player Classic.
I mean, until now, I can see the video properly neither on Internet Explorer nor on Windows Media Player.
At first, I thought the problem could be something related to the tag <video> that couldn't work properly on Internet Explorer. But now I'm almost sure that the problem is related to some Codec or some updating related to the Windows that it is missing, but I searched a lot and I didn't find anything that could help me.
Related
I have a video which plays fine on native FF and Galaxy S10/S10+ UA in FF Responsive Design mode. It played properly once on iPhone SE but hasn't worked again since.
In all other UAs available the thumbnail loads, but when pressing play, the video pauses immediately, and progresses by a few frames. the progress bar fills white implying the whole video is loaded.
Sometimes rapid clicking can make the video play as intended.
Here is the code:
<figure class="grid-item-1/3">
<video controls playsinline>
<source src="resources/video1.mp4" type="video/mp4">
<source src="resources/video2.webm" type="video/webm">
</video>
</figure>
The MP4 is encoded with H264.HP video and MPEG-4 AAC audio and the webm VP9 and Vorbis, the former being encoded by my phone when I took it and the latter, handbrake.
When the initial MP4 had issues, I researched codec compatibility, and encoded it as a .webm. When this didn't work I Googled the issue and was only able to find one relevant issue - where I added the playsinline tag.
I have tried viewing the page locally and on my webserver, neither behaves differently.
I have also tested the page on an actual phone - Google Pixel 4, Android 13, with Chrome & Firefox and the video works as intended.
I also tried adding height & width tags that matched the resolution of the source file, that just broke my CSS and the video still wouldn't play.
I'm working on an Electronjs app that needs to play very large videos stored in the user's machine. I've tried both with the vanilla html5 video tag and with other players. Small videos load and play fine, but large ones (1GB and up) only play sound, not images.
<video controls width="1280" height="720">
<source src="F:\sample.MP4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
This happens both within the Electron app (Chromium based) and Chrome itself. Edge, on the other hand, plays large videos correctly.
I could not find any documentation on why this could happen, or if Chrome is behind in some video compatibilies...
Where could I look for a solution?
Thanks
Edit: The problem was not the size of the videos, but their codec, h264 played well, hevc (h265) didn't
#snwflk found the answer in the comments. It's because the hevc codec is not supported in Chrome: https://caniuse.com/#feat=hevc
Edge apparently supports it by offloading the video decoding to the hardware: H.265/HEVC web browser support
Maybe Electron can be compiled in a way that Chromium supports it? https://stackoverflow.com/a/39319614/3362074
I have a website which is able to play mp4 media (via the <video> tag and via DASH) in every browser except the Samsung Internet browser, which comes as default on Samsung Galaxy phones and probably a lot of other Samsung devices.
On a desktop, iPad, or even an ancient HP TouchPad tablet, it works fine. Using other browsers on the same Samsung device (e.g. Chrome), the mp4 media plays fine, so it's not a limitation of Android or the device hardware.
I can detect the Samsung browser with JavaScript and disable video content on those devices, but I'd really like to not have to do that. Surely there is a workaround.
Here's a quick test, if you'd like to try it on your device. It tries to play 3 slightly different types of mp4 media on one page:
http://2pic.me/dashtest.html
On my Samsung Galaxy S6, none of them play in the Samsung Internet browser.
I tried using video.js, but that did not change the behavior.
Update:
In the year since I posted this, Samsung has finally updated their browser, and mp4 content now plays correctly, including auto-play.
I experienced the same issue on Samsung Browser (current latest: v6.2.01.12), on a Samsung Galaxy 7 device. In my case I was using video.js, and playing HLS.
The problem I found was that autoplay was not working.
My solution was to try to play the video programatically and if failure detected (promise rejection), then display a PLAY button, and play the video in the user click. That worked for me.
It would be something like:
const video = document.getElementById('my-video');
video.play()
.catch((err) => {
if (err.name === 'NotAllowedError') {
// Display PLAY button with a click event listener and play the video there.
}
});
This is a simplified code, I do specific checks to see if my-video is an actual <video> element, and if video.play() returns a promise and all the basic safe checks (since this is supported in many other browsers).
But, it shows the idea to handle this autoplay not working scenario.
I hope it helps!
Samsung's mobile browser does not appear to support HTML5 Media Source Extensions (MSE) at the time - these are required for DASH playback.
You can test for MSE support on a browser using several online links, such as:
https://bitmovin.com/browser-capabilities/
It is working for me fine, you can use mute if more than one video need to play check this:
<pre>
<video class="video" webkit-playsinline="" playsinline="" muted="" autoplay="" loop="" preload="auto" width="100%" height="auto" controles="">
<source src="wp-content/uploads/talkforweb.com.au.mp4" type="video/mp4">
</video>
</pre>
<video id="live" autoplay controls>
<source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>
I am trying to play h264 encoded live stream using html5 video tag. Live stream is broadcasted by wowza media server and when visiting src link I get a valid playlist file. When trying to play the stream on android chrome browser, player does nothing and shows black screen.
Is this html5 video tag related issue or maybe broadcaster?
These are the formats you can play using html5 source tags.
Think of a video format as a zip file which contains the encoded video stream and audio stream. The three formats you should care about for the web are (webm, mp4 and ogv):
.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
There is actually a good range of solutions for this. One solution would be to detect if HLS can be played:
document.createElement('video').canPlayType('application/vnd.apple.mpegURL') !== ''
However, this would not allow you to play HLS content on devices which do not support playback. At this moment, playback is only supported on Microsoft Edge, iOS Safari, OS X Safari and Android (however, I strongly advise against using HLS on Android due to limitations)
An other solution to play HLS across all platforms in HTML5 is to use an HTML5 HLS player such as THEOplayer. They managed to allow HLS to be played on all popular platforms and devices, including those without Media Source Extension support. Currently, the list of supported browsers and platforms includes: Internet Explorer, Edge, Firefox, Chrome, Opera and Safari on Windows, Linux, Mac OS X, Android, iOS and Windows Phone.
On Browsers supporting Media Source Extension you can use https://github.com/dailymotion/hls.js
For workarounds using flash, you can use FlasHLS chromeless player.
Try FlowPlayer. It provides a full HLS support with the least effort in server side!
Appears to me that Firefox has withdrawn support for HTML5 video. Doing a Drupal site, I integrated the Video-js library. Works OK in IE, Chrome, etc. Firefox appears to not throw an error, and attempts to play. If I set autoplay to true, it will play the audio, but the video is missing. You will see a flash of the video content which is a screen half covered with green raster. I have found this display on several other sites that purport to demo HTML5 Video. There are plenty of docs that say FF supports open format but I cannot find one that plays properly, so I have to assume FF has changed.
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_HTML5_audio_and_video
For instance if I put this snippet from the above page in a Web page:
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
The clip apparently loads and there is no error event on the source, but the clip doesn't play and the alternate content is not shown either.
I am wondering if this may be because I am outside of the U.S. or possibly if there is a problem with my Firefox setup.