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
Related
I'm trying to get my mp4 video file to show up on my iPhone 6s Safari browser. The video files seems to show up on my Mac laptop and Windows computer browsers like Chrome/Explorer/Firefox but when I upload to the server the video doesn't seem to show up even after I clear the cache on Safari on my phone. This is the HTML I'm using:
<video videoWidth videoHeight loop>
<source src="video/demoYVR.mp4" type="video/mp4">
</video>
Any suggestions an insight would be appreciated - Thanks :)
B
If you can download the video download it then play it on your media player in your phone.
If you can't download it try downloading Google or Firefox on the App Store.
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>
I am encoding camera stream to ogg an showing it on HTML5 app.
On Windows:-
chrome - showing green screen sometimes and sometimes streams shows up.
Mozilla - working fine
On android
chrome - not working
Mozilla - Working fine
WebView- not working, a big play button appears
HTML code-
<video autoplay loop ><source type="video/ogg" src="streampath/name.ogg">
</video>
Vlc streaming code
cvlc -vvv rtsp://cameraInputStream --sout '#transcode{vcodec=theo, vb=800, channels=1, ab=128, samplerate=44100, width=320}:http{dst=:8090/output.ogg}'
Why it is not working on android chrome browser ,android webview and green screen on windows chrome.
I am trying to embed a video in my html page but it is not loading on the iPhone (all I get is a crossed out play button). It loads fine on the desktop and Android. It is not a browser issue because I get the same error using both Chrome and Safari on my iPhone.
<div id="video_container">
<video width="400" height="400" controls preload="none" poster="/static/img/tag_logo.png">
<source src="/static/videos/movie.mp4" type="video/mp4"></source>
</video>
</div>
Interestingly I have tested out my code with the video from the video.js sample project. If I replace my current source tag with this the video loads:
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"></source>
However, I also downloaded the video from the video.js site, but it does not load on my iPhone
<source src="/static/videos/oceans-clip.mp4" type="video/mp4></source>
Codecs for the videos I am trying out all have AAC and H.264 codecs and are mp4s
I have also tried converting my video files to iPhone ready mp4 files using Miro Video Converter but still no luck with loading on the webpage
I am testing on localhost and am using nginx and flask
After more testing: according to the Chrome inspector I am getting response headers back for my video url GET request which explains why it plays on the desktop web. However, for iPhone, the Safari inspector says that I am not getting response headers back. And on Android, I do not get response headers back either, but for some reason the video is still able to play in the webpage on my Android device.
Any help would be appreciated
It could be your host server setup. For example when I use Go Daddy, SVG files won't display on my site. You can either check out the config or add a file that allows the MIME type. More on MIME types here: http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types-with-iis7-web-config.aspx
Just change the video extension to .mov.
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.