I'm trying to embed a youtube video in my app. It works fine but starts in portrait and will not rotate to landscape (making the video kind of small).
I'm doing all this in a UIWebView with the size of 237x353
The containing viewcontroller should only work in portrait (does this affect the issue).
I've read that embedded youtube videos automagically starts in a MPMoviePlayerController so I'm guessing it can control orientation on it's own?
Any clues on why it will not start in landscape?
Never mind. I figured the problem lies in using the <iframe> tag suggested by YouTube. This always made my video show in portrait. If your underlying viewcontroller only supports portrait that's what you going to get. You are better off using:
<embed id="yt" src="http://www.youtube.com/watch?v=ZflCTKggPAQ" type="application/x-shockwave-flash" width="237" height="250"></embed>
Also what made this even harder to debug is the fact that the above code will not work in simulator whereas the <iframe> does. With the above code and device all is golden.
Related
I have a view with a UIWebView on half the size of the iPhone screen.
In this webview I embed youtube videos.
The app is only in portrait mode. Though I would like to see videos play also in landscape.
Now I want the following behaviour:
When in portrait, play inline, don't go full screen.
a. For that I use "webView.allowsInlineMediaPlayback=YES;"
b. I open the webview with this link: "www.youtube.com/embed/videoid?playsinline=1"
If the user rotates the screen to landscape, I'd like the video to go full screen.
If the user then rotates back to portrait, I'd like the video to get inline again.
The rotations shouldn't stop the video in the middle, or restart the play.
What should I do?
As the embedded videos use an undocumented MPInlineVideo(Fullscreen)ViewController, you can't use its API and switch to fullscreen.
I'd thus recommend playing around with the "allowFullScreen"-parameter for the iframe-tag.
If everything fails, you should always be able to change the frame-size of the web-view so that it covers the full screen. You'd have to use width/height 100% in the iframe then.
Disclaimer: This is an educated guess. I've not actually tried to implement it that way.
I have developed a web app/website for the iPad but I can not get it stay in a fixed portrait view only.
I do not want it to rotate and work in landscape mode, because of the way the app has been designed.
I've tried various configurations of the viewport settings but that still has not worked.
I'm not very good at JavaScript so a copy paste option would be best or something in CSS/HTML.
Thanks in advance.
Unfortunately, there is no way to explicitly "lock" the orientation of a web-app in Mobile Safari, as you can also see from the link that Alex posted above in the comment:
How do I lock the orientation to portrait mode in a iPhone Web Application?
However, you can have multiple CSS files for different screen orientations. There's a handy JavaScript snippet that you can copy-paste here:
http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites
This should at least allow you to design around the rotation without having to use JS but just CSS.
I've created an HTML5 video player (very simple) that works perfectly on the iPad and the browser.
However, when I open it on the iPhone, I only get a play button which, when pressed, opens the native video player on a new window, on top of all my stuff.
That means I lose access to my custom controls and time tracking (written in Javascript), since the video is now running isolated.
Is there any way to override Apple's control of HTML5 video on the iphone and get it working like on the ipad?
Cheers
I filed a bug with Apple.
After a couple of weeks they got back to me saying, very simply, that I should add "webkit-playsinline" to the video tag on the HTML, as well as adding the "allowsInlineMediaPlayback" property on the UIWebView.
So in the end, this is what it looks like:
HTML
<video id="player" width="480" height="320" webkit-playsinline>
Obj-C
webview.allowsInlineMediaPlayback = YES;
And all works just fine :)
It's virtually undocumented and the only place I could find a reference to "webkit-playsinline" was in the iAds reference, where it says: "iAds JS only".
Until iOS Safari implements inline video support, you need to write video decoder in a web supported language. There are existing implementations of video decoders, such as Broadway for H.264 (video), jsmpeg for mpeg1, and ogv.js (video and sound support).
Keep in mind that the process of decoding a video is computationally heavy. Expect a relatively slow FPS (±20).
For your reference, these guys have prepared a demo of a video that you can play on your iOS device.
In iOS 10+
Apple enabled the attribute playsinline in all browsers on iOS 10, so this works seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
You can use iphone-inline-video to take care of the playback and audio sync (if any), and it keeps the <video> working as it should.
Do you have an app created or is this for mobile safari? If you have an app and use UIWebView you should set UIWebView's allowsInlineMediaPlayback property..
In iOS 10 adding 'playsinline' attribute to the HTML5 video tag did not prevent fullscreen playback on an iPhone UIWebview until I also added the 'controls' attribute. This is how I got it working:
<video width="100%" height="240" controls playsinline>
<source src="movie.mp4" type="video/mp4" >
</video>
With, of course, _webView.allowsInlineMediaPlayback=YES; in the ViewController also.
There are some work arounds, I'm working on a library to allow this functionality automatically. However, until Apple sets safari to
webview.allowsInlineMediaPlayback = YES;
then we will have to use hacks for the same behavior.
You can check out the project here: https://github.com/newshorts/InlineVideo to see if it meets your needs.
Just add following to your config.xml:
<preference name="AllowInlineMediaPlayback" value="true" />
Otherwise UIWebView will neglect the webkit-playsinline attribute.
You can easily allow this by adding this to your config.xml:
The UIWebView should then respect the webkit-playsinline attribute.
I have a MPMoviePlayerController and it plays fine when I play .mov from a server. I can play multiple movies in a row and I am not encountering any issues.
However, I also need to be able to play back some YouTube videos, and have embedded a UIWebView with that allows me to play YouTube videos. Playing several YouTube videos in a row is no problem. The problem occurs if I play a .mov video, and then try to play a YouTube video. The screen shows up with a landscape status bar, but all the controls are still in portrait mode. Sound works, but no video; just a black screen.
Really sounds like a bug to me... you should consider reporting it to Apple, if you haven't already.
It sounds vaguely related to another bug I've run into (the player sometimes keeps playing the audio after the movie is closed, and acts up next time it's launched). The workaround I found was to set
player.initialPlaybackTime = -1.0;
when I unload the player. It's a long shot, but you can give it a try.
The movie player on the simulator has several known bugs, see also:
video playback problems in iphone
Have you tried it on the actual device? I don't bother testing playback on the simulator at all these days.
I've seen this too and it's definitely an Apple bug. Another one you might run into is that tapping on the status bar to scroll to the top of a table after playing a YouTube video doesn't seem to work.
I've seen this happening in one of my apps. The bottom line, is you need to make sure you only have one instance of the MPMoviePlayerController object in your app. If you have more than one all hell breaks loose in OS 3.x, including the symptoms you mention.
What I have to do is play a video file in mp4 format. If the device is in portrait mode then it should display the video, but when the user changes the device to landscape mode it should just show an image.
But currently when I play a video, it takes control of the whole app; I can't send a notification to any event, and control only returns to my code after playing the full length video.
How can we can access another things while we are playing the video on the device?
Thanks for the help
Balraj Verma
Try spawning a new thread and then call the code to play the video from the new thread. This should leave the rest of your code free to do what it needs, unless I am misunderstanding your question.
You can use the shouldAutorotateToInterfaceOrientation: to check what orientation the device is in, and then do the logic in there.
Eg, if the orientation is portrait, start the MPMoviePlayerController playing the movie, then when the orientation changes to landscape, dismiss the moviePlayer.