I try to play videos in my angular app and it plays in chrome browser on any device, but it is not working in safari browser in iPhone 6s with software version 12.3. Strangely it is working on iPhone 7 with software version 14.4.
To find the problem I tried to play videos from other websites on my iPhone 6s device and they played without any problem.
now I don't know where the problem is?
I tried many suggested solutions but it still doesn't work...
it is my html code in angular app:
<video
controls
[src]="mediaDetail?.video"
[poster]="mediaDetail?.cover"
class="single_video"
autoplay loop muted playsinline
controlsList="nodownload">
</video>
and it is video result on safari:
these are response headers in video request that not working in my angular app but in another website with the same headers, videos working
Please suggest any problems that may exist.
I changed the "https" to "http" and I dont know what exactly happened but videos plays over the http protocol
so:
over the https protocol: videos plays on iPhone 7 but not plays on my iPhone 6s device
over the http protocol: videos only plays on my iPhone 7 device
its maybe Safari dont support play video on old device over the https protocol
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>
Ok so I am planning to embed a 360 video into a website however need this video to play on ios through the native video player. I have looked into google vr view but when I tried to get it to work, I got a load error. Are there any other solutions that might work better?
This is what I tried when using google vr view.
<iframe width="100%" height="300px" allowfullscreen frameborder="0" src="//storage.googleapis.com/vrview/index.html?video=http://winn-brown.co.uk/wp-content/uploads/2016/07/Isle-of-Jaws-360-Video-2.mp4&is_stereo=true"></iframe>
Thanks
Vimeo videos are flash, is there a way to render the videos differently depending on the browser/device?
Here is the embed code Vimeo gives me:
<div class="video-holder"> <iframe src="http://player.vimeo.com/video/#####"
width="561" height="316" frameborder="0" webkitAllowFullScreen mozallowfullscreen
allowFullScreen></iframe></p>
What HTML/CSS would I need to use to ensure renderability in multiple browsers? Or is it better to convert from source?
You are embedding inside an iframe. So if Vimeo supports the devices you target, it will display the appropriate content for those devices. Vimeo supports iOS and Android devices, possibly others as well. I think by default, if there is no support for Flash, it defaults to its H264 player, which means you are safe.
BTW, notice you have not closed your div.
I am using a web based html5 mobile app builder (tiggzi). I am using the youtube iframe api. When I install my app on my android devices the embedded video displays the placeholder image just fine. On my nexus 7 with android 4.2.2 if I hit play I hear the sound but do not see the video (black). If I hit the full screen I see the video play ok. On my android 4.0.4 bionic phone I see the video placeholder image but play just shows black and full screen does not respond (ultimately app crashes). On my desktop machine testing my app in chrome video plays fine.
my html:
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/u1zgFlCw8Aw" frameborder="0">
</iframe>
Question is, how do I get video to play correctly as embedded in and html5 mobile app for both android 2+ and iphone/ipad? I thought the iframe api would work but it still falls back to flash which appears to be the problem in my case.