I have a YouTubeView in an app I am making and I am trying to disable some of the video controls that are appearing, I have seen another App do it where it only displays the Play/Pause and Fullscreen icons. Some of the videos I am rendering are quite small (200x150) so the scrubber is useless and the time is actually overlapping itself.
The function I am using is:
- (YouTubeView *)initWithStringAsYouTubeId:(NSString *)idString frame:(CGRect)frame;
{
if (self = [super init])
{
self.frame = frame;
self.delegate = self;
// HTML to embed YouTube video
NSString *embedHTML = #"\
<html><head>\
<style type=\"text/css\">\
body {\
background-color: transparent;\
color: transparent;\
}\
</style>\
</head><body style=\"margin:0\">\
<embed id=\"yt\" src=\"http://www.youtube.com/v/%#\" type=\"application/x-shockwave-flash\" \
width=\"%0.0f\" height=\"%0.0f\"></embed>\
</body></html>";
// Populate HTML with the URL and requested frame size
NSLog(#"%f", frame.size.height);
NSString *html = [NSString stringWithFormat:embedHTML, idString, frame.size.width, (frame.size.height*-1.0f)];
// Load the html into the webview
[self loadHTMLString:html baseURL:nil];
}
return self;
}
It loads and plays fine but I just want to disable the scrubber and times, I have tried ?controls=0 with no luck.
Cheers,
Dean
To be able to hide the scrubber and other controls, remove your <embed> tag and replace it with its <iframe> equivalent, like this (I've set it up using the parameters/attributes from your example code):
<iframe id=\"yt\" type=\"text/html\" src=\"http://www.youtube.com/embed/%#?controls=0\" width=\"%0.0f\" height=\"%0.0f\" frameborder=\"0\"></iframe>
'controls=0' used with <iframe> will hide the controls for you.
In my brief experience with iOS embedded video, it seems like a solution to one problem often causes grief with something else that was previously working fine. Case in point: the above example hides the controls, but will overlay the video's title at the top-left of the UIWebView. The solution is to use this for your video's parameter list: '?controls=0&showinfo=0'
To see the scoop on the 'showinfo' parameter and others, check out the docs at: https://developers.google.com/youtube/player_parameters#Parameters Not everything in the parameter docs works in the iOS <iframe>, but play around with some of them and you might find something useful.
For what it's worth (and this might be obvious to expert web coders, which I am not), you don't have to assign the 'id' attribute to be 'yt', but most every example I've seen does this; 'yt' is no magic value, you can set the id to be whatever makes sense to you.
Is there a reason you don't use MPMoviePlayerController?
Using MPMoviePlayerController, you would simply create a UIView in your nib that is the size you want to player to be. Then alloc/init the player and set its frame to be the frame of the view. Using MPMoviePlayerController gives you access to a property to show/hide the controls. Additionally, you get all the great delegate methods telling you when video stops, if the users goes into or out of full screen, etc.
Related
I have a UITableView full of thumbnails of YouTube videos, and when they tap on one I want to start playing the YouTube video full screen automatically without the user seeing a view being added or having to interact any further than tapping the thumbnail.
Basically, I don't want to see the YouTube video player with that red play icon at all.
I was planning to use youtube-ios-player-helper/YTPlayerView to accomplish this, and I understand it just employs a UIWebView but I can't seem to figure out how to get it to work.
If I create an instance variable on my class, set myself as the delegate and select a random video for watching:
let YouTubePlayer = YTPlayerView()
override func viewDidLoad() {
super.viewDidLoad()
YouTubePlayer.delegate = self
YouTubePlayer.loadWithVideoId("apKJikXWU2g")
...
}
and then when the delegate method gets called:
func playerViewDidBecomeReady(playerView: YTPlayerView!) {
YouTubePlayer.playVideo()
}
But most of the time it either crashes in my AppDelegate with this message:
Nov 5 23:34:44 rtcreporting[73827] : logging starts...
Nov 5 23:34:44 rtcreporting[73827] : setMessageLoggingBlock: called
Or it will work if I disable breakpoints but I get a ton of Auto Layout constraint complaint messages before the video plays, indicating something is angry on some level.
Is this because I'm using a UIView subclass without actually adding it to the view hierarchy?
How would I accomplish the behaviour of autoplaying a YouTube video after a certain event without revealing a kludgy intermediary view?
Here you go, you don't have to see the youtube logo.
Define youtube iFrame, You'll need to replace the '%#' part with your youtube Video ID later when you supply to a UIWebView
#define youtubeVideoPlayUrl
#"<html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script> var tag = document.createElement('script'); tag.src = 'http://www.youtube.com/player_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { width:'%f', height:'%f', videoId:'%#', events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>"
Define a UIWebView object of name videoWebView to display the iFrame. You can set the height and width to be zero so it doesn't block your screen. It's like a hidden iFrame.
self.videoWebview = [UIWebView alloc] init];
I suggest you to use your own default Image and a play button on top of the image to avoid having to show 'Youtube' video logo. Once you've done that, use the following code to play the youtube video full screen
- (void)onPlayYouTubeVideo:(UIButton *)sender
{
NSString *youtubeVideoID = YOUR_YOUTUBE_VIDEO_ID;
NSString *html = [NSString stringWithFormat:youtubeVideoPlayUrl,
_videoWebView.frame.size.width, _videoWebView.frame.size.height, youtubeVideoID];
_videoWebView.mediaPlaybackRequiresUserAction = NO;
_videoWebView.delegate = self;
[_videoWebView loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];
}
I'm using like this for a hotel booking app.
I've created a demo app for you.
Source code to load webView html taken from: http://iphoneincubator.com/blog/audio-video/how-to-play-youtube-videos-within-an-application
ViewController header file
#interface ViewController : UIViewController
#property (nonatomic, strong) UIWebView *webView;
#end
ViewController implementation file
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 300, 200)];
self.webView.layer.borderWidth = 1.0;
self.webView.layer.borderColor = [UIColor redColor].CGColor;
self.webView.backgroundColor = [UIColor blackColor];
self.webView.center = self.view.center;
[self.view addSubview:self.webView];
NSString* embedHTML = #"\
<html><head>\
<style type=\"text/css\">\
body {\
background-color: transparent;\
color: white;\
}\
</style>\
</head><body style=\"margin:0\">\
<embed id=\"yt\" src=\"%#\" type=\"application/x-shockwave-flash\" \
width=\"%0.0f\" height=\"%0.0f\"></embed>\
</body></html>";
NSURL *url = [NSURL URLWithString:#"https://www.youtube.com/watch?v=K14RnTVt194"];
NSString* html = [NSString stringWithFormat:embedHTML, url, self.webView.frame.size.width, self.webView.frame.size.height];
[self.webView loadHTMLString:html baseURL:nil];
}
You should see this:
When you press the play button it goes full screen.
You probably want to create a method that accepts a URL to the youtube video in your custom cell class.
Then in the cellForRowAtIndexPath: method of your View Controller, you can call your custom cell loadYouTubeVideoWithURL: method to load the Youtube video url from your data source.
The YouTube Helper Library is definitely a nice way to embed Youtube in your iOS application while following YouTube's Terms of Service.
Regarding the Auto Layout constraints log warnings,
Is this because I'm using a UIView subclass without actually adding it to the view hierarchy?
These errors have nothing to do with your implementation and are easily reproducible.
You can create an empty iOS 8 project, add a UIWebView in your interface and try to load a Youtube page.
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:#"YOUTUBE_URL"]]];
You'll get the same Auto Layout constraints log messages that you got when using the YouTube Helper Library.
If you take a closer look at the elements having Auto Layout constraints problems, you'll see AVAudioOnlyIndicatorView, AVUnsupportedContentIndicatorView, AVExternalPlaybackIndicatorView, etc. The constraints with warnings are not related to views you created but are related to Apple's internal views structure. It has nothing to do with the YouTube Helper Library or your implementation.
You should definitely file a report: https://bugreport.apple.com
These warnings won't get your app rejected or lessen your chance to get your app approved until the issue is fixed from Apple, especially if you can get the warnings using an empty project with a UIWebView loading any Youtube page.
for an iOS app I have a Youtube video which is loaded in using the following HTML/objc
NSString *embedHTML = #"\
<html><head>\
<style type=\"text/css\">\
body {\
background-color: transparent;\
color: white;\
}\
</style>\
</head><body style=\"margin:0\">\
<embed allowScriptAccess=\"always\" id=\"yt\" src=\"%#&enablejsapi=1&playerapiid=yt\" type=\"application/x-shockwave-flash\" \
width=\"262\" height=\"187\"></embed>\
</body></html>";
NSString *html = [NSString stringWithFormat:embedHTML, urlString];
[self.webView loadHTMLString:html baseURL:nil];
Which loads up and plays fine. The issue I'm having is that my app is strictly portrait view and you cannot rotate it while in the app. If you're watching the youtube video the webview does an override (or something like that) that allows the user to rotate for full screen which is fine however if they close / select "Done" on the video and it closes while in landscape the app is all of a sudden in landscape and is severely cut off. How do I prevent this from happening while still allowing landscape playback of video?
In your project settings (App Target > General > Deployment Info > Device Orientation), select Portrait, Landscape Left and Landscape Right.
In your root view controller, add:
- (BOOL)shouldAutorotate
{
return YES;
}
- (NSUInteger)supportedInterfaceOrientations
{
return UIInterfaceOrientationMaskPortrait;
}
If everything gets loaded into this view controller, that should be all you have to do. If you find that some views are rotating when they shouldn't, add this same code to their view controllers.
The controller for the fullscreen video will use the supported orientations specified in the target settings, and so will allow rotation to landscape. When you close the video, the view will rotate back to portrait.
In my iOS Phonegap application, we are playing youtube video inside a UIWebView using a cordova plugin. Below is the code I am using to embed the youtube video in UIWebView. We are using iFrame tag to embed the video.
customWebView= [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, 512, 374)];
customWebView.delegate=self;
customWebView.scrollView.bounces=NO;
[customWebView setOpaque:NO];
customWebView.backgroundColor = [UIColor clearColor];
[webViewBackground addSubview:customWebView];
NSString* embedHTML = #"<html><head>\
<style type=\"text/css\">\body {\background-color: #000000;\
color: white;}</style></head><body style=\"margin:0\">\
<iframe width=\"512\" height=\"374\" src=\"%#\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
NSString* html = [NSString stringWithFormat:embedHTML, urlVideo];
[customWebView loadHTMLString:html baseURL:nil];
The video is playing perfectly fine. Both in normal mode and full screen mode. But in full screen mode, user can see the previous and next buttons. On click of next and previous button few times, the video is getting over and I can see only a black screen in webview.
Below are the screenshots.
Is there anyway we can disable the next and previous buttons in a iFrame video player? Or Is there any other way in which we can handle this?
I really need your help. Working on an iOS app. I want to play youtube. I understood from reading many many blogs and posts, that we need to use an iframe in order to play a youtube video.
However, on some videos I get: "This video contains content from XYZ. It is restricted from playback on certain sites. Watch on YouTube"
I read this question: Youtube in iOS5 - done button Tapped which gives the link to youtube api: https://developers.google.com/youtube/player_parameters
They recommend to use the iframe. the example for youtube site is:
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
frameborder="0"/>
The code I used:
<!DOCTYPE html>
<html>
<head>
<style>
* {
border:0;
margin:0;
}
</style>
</head>
<body>
<iframe webkit-playsinline id="player" type="text/html" width="320" height="180" src="http://www.youtube.com/embed/rEevIL1Wpcg?enablejsapi=1&playsinline=1&autoplay=1" frameborder="0">
</iframe>
</body>
</html>
Can someone help me understand it? I check the embedded flag to be true, they are all clips that are allowed to play on mobile devices.
Example for videos that works on the device:
http://www.youtube.com/watch?v=rEevIL1Wpcg&feature=youtube_gdata
http://www.youtube.com/watch?v=KzGe7pbGUiM
Example for videos that don't work on the device and bring up the error msg:
http://www.youtube.com/watch?v=1vhFnTjia_I&feature=youtube_gdata
http://www.youtube.com/watch?v=sxkiA0IjBZ0&feature=youtube_gdata
you can use webview as youtube player
Try Below Code it is working for me
in .h file
#property (strong, nonatomic) UIWebView *webView;
and in your .m file
NSString *videoURL = #"http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com";
// if your url is not in embed format or it is dynamic then you have to convert it in embed format.
videoURL = [videoURL stringByReplacingOccurrencesOfString:#"watch?v=" withString:#"embed/"];
NSRange range = [videoURLString rangeOfString:#"&"];
#try {
videoURLString = [videoURLString substringToIndex:range.location];
}
#catch (NSException *exception) {
}
// here your link is converted in embed format.
NSString* embedHTML = [NSString stringWithFormat:#"\
<html><head>\
<style type=\"text/css\">\
iframe {position:absolute; top:50%%; margin-top:-130px;}\
body {\
background-color: transparent;\
color: white;\
}\
</style>\
</head><body style=\"margin:0\">\
<iframe width=\"100%%\" height=\"240px\" src=\"%#\" frameborder=\"0\" allowfullscreen></iframe>\
</body></html>",videoURL];
self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
[self.view addSubview:self.webView];
[self.webView loadHTMLString:embedHTML baseURL:nil];
Here you can change webview frame as you want and also can change videoUrl.
There are two concepts, embeddable and syndicated.
iOS devices use iframe so they basically embed.
Android devices that use player API can check syndicated.
When you do a search->list, you can set videoEmbeddable and videoSyndicated to true.
Or if you are iterating through videos, for each video, you can do a video->list call with video id and check status.embeddable in the response.
Here is a blog post about this topic, even though examples are in v2, information is still relevant.
I would like to know if I can play a video in UIView?
I want to play a video in a small UIView (say 100 x 100 ) which should be played automatically when the UIView loads.
First I would say what I tried out ... It would be really helpful if the experts ( I am a 2 week old baby in IOS development & Obj- C) to confirm whether the route I am heading is right..
I created a UIWebView and and tried to embed a video in it using HTML video tag (html5)
For the UIWebview I set the allowInlineMediaPlayback to YES and mediaPlaybackRequiresUserAction to NO ... Also in the HTML code, for the video tag, I used - webkit-playsinline.
Any help is much appreciated.
Update
This is my code with my html block ... I did add the play video JS .... But when I run the app in simulator , I do not get the video , only get audio.
NSString *embedHTML = #"\
<!DOCTYPE HTML>\
<html>\
<head>\
<script type=\"text/javascript\">\
function playvideo() {\
var myVideo=document.getElementsByTagName('video')[0];\
myVideo.play();\
myVideo.webkitExitFullscreen();\
myVideo.height = 120;\
myVideo.width = 120;\
}\
</script>\
</head>\
<body onLoad = \"playvideo()\" >\
<video id=\"player\" webkit-playsinline width=\"140\" height=\"140\">\
<source src=\"file:///Users/Shilpa/Desktop/Movie Player/MoviePlayer-ios4-Next/Movie-1.mp4\"/>\
</video>\
</body>\
</html>";
webView = [[UIWebView alloc] initWithFrame:CGRectMake(100.0, 170.0, 150.0, 150.0)];
[webView setOpaque:YES];
NSString *html = [NSString stringWithFormat:embedHTML, webView.frame.size.width, webView.frame.size.height];
[webView loadHTMLString:html baseURL:nil];
webView.allowsInlineMediaPlayback = YES;
webView.mediaPlaybackRequiresUserAction = NO;
webView.transform = CGAffineTransformMakeRotation(3.14/2);
[moviePlayerWindow addSubview:webView];
HTML Video tag, might needs an action via JavaScript,
try to put following code in your html page,
<body onload = playvideo() >
and see the magic :)
i believe, only to play the video you are using WebView, but you can use the QTView also to do the same.