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>
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 have a simple HTML5 video embed that displays a blank (white) frame when loaded on iOS. On desktop browsers (including Safari) and Android the first frame of the video is displayed.
I understand that you can avoid this by setting an explicit poster image, but I'm hoping I can avoid having to set up a transcoding service to extract the first frame of the videos. I understand that Apple has probably chosen this route to limit the bandwidth use for mobile users, but in this instance it's just overkill to set up a transcoding service.
I've played around with the preload attribute, but neither setting it to
auto or metadata works. Is there any other way to display the first frame of the video without interaction from the user?
Here is a link to a pen where I am illustrating the problem.
https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr
And here is a screenshot of how the code is rendered on iOS simulator (same on real hardware) and in Chrome respectively.
You can use Media Fragments URI
Just Append #t=0.1 to the end of the video URL
Try following code. This is work for me
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
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.
I have used the audio-tag HTML element to try to play audio at
Example of Audio Issue: www.justinreina.com/nice_try
Using the following HTML
<audio autoplay>
<source src="justinsingsbetter.wav" type="audio/wav">
</audio>
It works fine in a Desktop Web Browser (e.g. Firefox) but the audio does not play on an iPhone (iPhone 6, IOS 9.1). Why is this not working, and does anyone have any suggestions to fix it?
Mobile Safari does not support autoloading of audio.
More specifically mobile Safari ignores the following automatically:
the autoplay attribute
the preload attribute
audio.play() in a method that runs on page load
Audio streams can only be loaded when triggered by a user touch event such as onmousedown, onmouseup, onclick, or ontouchstart.
As of now there is no workaround to it. Before iOS 4.2.1 you were able to load an audio file from the callback of a synchronous Ajax call . This was patched in iOS 4.2.1 since the synchronous call would lock the whole browser and if an error occurred while loading the file the whole browser would remain locked and have to be force closed.
Source: http://www.ibm.com/developerworks/library/wa-ioshtml5/
I am trying to play a video in safari 5 but its just showing me a blue question mark button, no video place holder no video controls (like in chrome)
<video poster='your_pic.jpg' controls="">
<source width='480' height='360' src='/videos/my file to play.m4v' />
</video>
For safari to play videos on windows you have to install apple quick time.
http://www.agilepman.com/2010/09/how-to-make-html5-video-tag-work-in-safari-on-windows/
I'm not familiar with the syntax you have used, i.e. a source tag within the video tag. I would expect a video reference to look more like this:
<video controls="true" poster="some-image.png" src="some-video.mp4"></video>
Does the video work as expected in Chrome? Looking at the controls that do get rendered, the difference between Chrome and Safari seems to be down to embedded Quicktime (i.e. Safari uses it if it can, Chrome does not).
One other thing: if the file just doesn't play anywhere, bear in mind that .m4v files are often MPEG4 files with Apple's Fairplay DRM applied to them (although they don't have to be).