I have an Angular 5 app.
I have the same video element (tiny video of 10 seconds at the server root for testing), with the same source on my route 1 and on my route 2.
I can't make things work properly.
Here's my HTML video element :
<video width="400" controls>
<source src="test.mp4" type="video/mp4"> Your browser does not support HTML5 video.
</video>
Can't do easier, right ?
When I visit for the first time my webapp, on my first route loaded (either route 1 or route 2, I tried both), all caches clean, my video doesn't have cover. When I click on play :
In the best case, the video is playing for a 2 seconds and then, the image freeze, sound is cut, the playing seeker goes at the end of video time. The end screen is green.
OR
Most of the time, the video is not playing
If I navigate to my other route, video is not playing when I click on play. If I refresh my page, same action same result.
I tried to use a basic HTML page with just the same video tag. My video is playing as expected. At the first visit, and when I refresh. So, I assume that I don't have the byte-range requests issue.
It's working as expected in all others platforms tested (Safari/ Chrome macOS, Chrome iOS, Chrome Android).
Issue is encoutered on iPad Mini 4 with iOS 11.3.
I read a lot of things about Safari iOS issues with HTML5 video. I tried to apply several fixes without success, but anyway, posts readed don't really have the exact same problem : in their case, video wasn't playing at all.
Moreover, it's working with the same code outside Angular, so I guess it's not that problem is not about my video tag.
Related
I have embedded youtube videos on my website like this:
<iframe src="https://www.youtube.com/embed/YOUTUBE_ID" frameborder="0" allowfullscreen></iframe>
And everywhere it wokrs fine, but on Safari on iOS it opens the HTML5 player with the video in full screen, and then the player automatically closes. No error in the console, related to this issue.
Tried on standalone page with the same video, embedded the very same way, and had no problems.
What could be the reason?
I removed the JS files and then it played well :D ... so, I brought them back and started to remove them one by one ... and found out that the reason for the issue is mbox.js.
For some reason it breaks the behavior of the HTML5 video player on Safari for iOS. So ... now I'm looking for a solution for this :)
(Tried to move the mbox.js code in an iframe that loads in the problematic page, but it had no effect. So ... I going on with searching the solution.)
As I keep reading, there is no way to enable HTML5 video autoplay in iOS browsers.
So why does my older iPad (with iOS 8) autoplay this introductory video from e.g., http://www.apple.com/ipad-air-2/ ?
When inspecting this on desktop Chrome, I pause at a certain point and see that a script inserts a <video> element with a mp4 file, then removes it after animation finishes. I've examined their script file as well, but did not find a definite answer to this.
I wish to clarify that I do not initiate any action other than opening the url. I have purposefully avoided every contact (no tapping, touching, etc.).
Could someone with more video experience explain this?
This question has been answered to me in a different place, so if someone stumbles upon this later on...
The short answer is that Apple does not show a video on a device such as iPad. They flash a series of JPEG images like a filmstrip, making it appear as though a video is being played. For a desktop browser, they would show a video file though.
My iOS application uses youtube iframe player on UIWebView to play any clip with inline mode. The following code is HTML code used.
<html>
<head>
<style type="text/css">body {background-color: transparent;color: white;}</style>
</head>
<body style="margin:0">
<iframe src="http://www.youtube.com/embed/e2w8z6mI47U?playsinline=1&rel=0&showinfo=0" width="320" height="240" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Then, it is passed to loadHTMLString method.
That code had worked well until a recent date. But, I recently noticed that every clips I used aren't played normally. the standby view and play button is shown but, although I pushed the play button, it didn't play well. black screen was only shown.
I haven't found anything to solve the problem. Are there any changes of Youtube Iframe player or points I missed?
I ended up solving the problem by calling [videoView setMediaPlaybackRequiresUserAction:NO].
I don't exactly know why the method could save me. At a guess, there was a change dealing with the request for playing at youtube. I could find the following changes on youtube developer site.
January 28, 2014
The playsinline parameter controls whether videos play inline or
fullscreen in an HTML5 player on iOS. Setting the value to 1 causes
inline playback.
The Selecting content to play section has been updated to explain how
to find YouTube video IDs and playlist IDs using the YouTube Data API
(v3) rather than the older API version.
The controls parameter's definition has been updated to reflect the
fact that the parameter value only affects the time that the Flash
player actually loads in IFrame embeds. In addition, for IFrame
embeds, the parameter value also determines when the controls display
in the player. If you set the parameter's value to 2, then the
controls display and the Flash player loads after the user initiates
the video playback.
I guess that one of above changes may need extra informations which are passed from a client to youtube server for playing normally.
UPDATE:
Today, I identified that it works well without my solution. It seems that the problem was fixed lately.
I have a HTML5 video tag that serves some mp4 files generated by us and stored on a server which mostly works alright.
But sometimes, the play button is striked out on ipad and the video is not playable. The same video is playable at a different instant.
I cant seem to figure the reason why this happens, that too only sometimes.
Are you by any chance using iOS 3.0? If so there used to be a lot of issues. Including a poster could break the video, and even just including an external javascript could mess it up.
I'm trying to create an HTML5 video player to automatically start streaming video. I searched a lot but I didn't achieve my goal.
Then I found www.filmon.com, where all videos start to play automatically on iPad.
Does anyone know how they did it? I looked at their JS files, but I cannot make mine start automatically.
Apple has specifically disabled every method and workaround to autoplay video on iPads and iPhones (the "autoplay" attribute, and Javascript solutions like triggering hidden link's "onclick" event).
I have yet to find a way to autoplay on iPads and it looks like Apple is continuing to squash all efforts to do it. They state, "In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it."
As a quick update I just checked out Filmon.com and the videos there no longer seem to be autoplaying on an iPad. Example: http://demand.filmon.com/distant-roads-173-cnd-ontario-ca-1 autoplays on Chrome, but not on the iPad.
I don't think that iphone or ipad play streams automatically due to high traffic.
Why don't you play it manually using script at document ready?
somewhat like this:
window.onload=function(){
var audio = document.getElementById('audio');
audio.play();
}