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.
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 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.)
Pretty incredible since I thought all videos expanded to play fullscreen in regular safari. Check this out for example:
https://entertainment.theonion.com/the-onion-reviews-rogue-one-1819596116
That video plays inline and doesn't even stop when I switch Safari tabs. What's happening there? Are they using js and HTML5 canvas to render the video or something? How do they sync the sound so well?
Just constructing an answer based on the link #offbeatmammal posted in his comment.
Also based on new video policies for ios specifically that:
On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
<video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.
A note about the playsinline attribute:
this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline. Unfortunately, this change did not make the cut-off for iOS 10 Developer Seed 2. If you would like to experiment with this new policy with iOS Developer Seed 2, the prefixed attribute will work, but we would encourage you to transition to the unprefixed attribute when support for it is available in a future seed.
Lastly an example:
<video autoplay loop muted playsinline>
<source src="image.mp4">
<source src="image.webm" onerror="fallback(parentNode)">
<img src="image.gif">
</video>
with a fall back that displays an image on video error
function fallback(video)
{
var img = video.querySelector('img');
if (img)
video.parentNode.replaceChild(img, video);
}
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;
My requirement is I do not want to show the video playing in full screen.
For that initially, I choose the MPMoviePlayerController. By using this static videos i.e, which is in our app are playing well but the YouTube videos i.e., contains URL are not playing, instead of that it shows blank screen.
I tried in these ways:- http://pastie.org/8484597 You may think that all the ways are same.. But I tried all the ways as I googled I got these are all the ways.
Later, I moved to UIWebView. Yes, it is absolutely good.. it is playing my videos with No Doubt. Here I am extracting the youtube id and playing. But here, I do not want to play the video in full view. But when I want to play the video we have to click on the UIWebView then instantly it is showing full screen with video playing. But, I want to play with in the web view only.
I followed this link but same problem.. Display video inside the Uiwebview not in device full screen
I tried in these ways.. http://pastie.org/8484621
(I used LBYouTubeExtractor also. it plays good but it is not playing all the videos. For some videos it throws _itemFailedToPlayToEnd error).
Please guide me how to do in UIWebView?.
Wrap the video within a html file and remember to add webkit-playsinline and change the webview attribute webview.allowsInlineMediaPlayback =YES; Then load the html file with the webview. This works for me.
The html file is like
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video
webkit-playsinline
src="prog_index.m3u8"
height="200" width="200"
type="video/m3u8"
>
</video>
</body>
</html>
Cheers!