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.)
Related
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.
I want to use video player technique used in my website. I use html 5 videos in website and send normal URL to app so that they can be played using the native MPMoviePlayerController inside the app. Now I have requirements where I want to use the same technique as web inside the app as UIWebView. When I request the link to load, it opens up the default player view of iOS, which I want to avoid.
Can this be possible?
No, this is not possible. Not in the Safari browser. Videos will always be played by the native player. Trust me, I've spent a lot of time on this.
If you build a Phonegap app, it is possible by what is mentioned here:
HTML5 inline video on iPhone vs iPad/Browser
Basically:
HTML
<video id="player" width="480" height="320" webkit-playsinline>
Obj-C
webview.allowsInlineMediaPlayback = YES;
We' ve created web site with Youtube Iframe API . On the copmuter everything is playing OK, but we have problem with mobile devices. The video plays just one time. When you push the play button again it doesn't work.
We checked everything and decided that there is problem with youtube player.
I would very grateful for any solving this problem!
p.s. Devices are: Android, IOS (Phones and Tablets), browsers are Chrome and Safari
I've been having the same issue on Safari on iOS 8 -- videos will not replay after they play through to the end. Right now, I have a temporary fix in place: when you detect a state change to YT.PlayerState.ENDED (0 = ended), call seekTo(0) and then pauseVideo() on the player.
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.
Is it possible to have a YouTube video played on a web page in Safari on the iPhone, and have the 'done' button and 'video finished' event send the user back to the mobile web page they came from?
Currently, it seems like i'm only able to direct them to YouTube.app to view the video ... but they then remain in YouTube.app and are presented with the videos comments and other such information, and I do not wish to display this information.
If this is possible, please provide a link to a site with documentation/examples or an example in your response.
Thanks.
Use YouTube's new IFRAME-based embed code (I believe they give it to you by default now when you click their embed button...?) and on an iPhone, it will be rendered as an HTML5 video if possible.
When users tap the play icon on it, it will launch the standard video viewer, not the YouTube app. When they exit the video, they'll be back on your webpage.
The new embed code looks like this:
<iframe
title="YouTube video player"
width="480"
height="390"
src="http://www.youtube.com/embed/VIDEO-ID"
frameborder="0"
allowfullscreen>
</iframe>
This is more or less what they do in the new YouTube webapp, except that they don't need the IFRAME (they just do the HTML5 embed on their own page).