I want to create a couple of CSS to manage the orientation of embedded video player in UIWebView. And these CSS shall work to resize the player according to the device's orientation.
How can I create and add a CSS in my iphone application to execute the following code with my iPhone/iPad?
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
EDIT:
Following is the code that I have done for embedded video.(*youTubePlayer is an instance of UIWebView.)
NSString* embedHTML = #"<html><head><style=\"margin:0\" link rel=\"stylesheet\" media=\"all and (orientation:portrait)\" href=\"portrait.css\">"
"<link rel=\"stylesheet\" media=\"all and (orientation:landscape)\" href=\"landscape.css\">"
"</style></head>"
"<body embed id=\"yt\" src=\"%#\"type=\"application/x-shockwave-flash\"></embed>"
"</body></html>";
NSString* html = [NSString stringWithFormat:embedHTML, url];
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[youTubePlayer loadHTMLString:html baseURL:baseURL];
And also have added landscape.css
body
{
width: 1002;
height: 768;
}
portrait.css
body
{
width: 768;
height: 1024;
}
Even though it's not working properly. What is wrong with the code, please let me know.
Finally I have reached to my destination and sort out the problem by the following code. It's working perfect with youtube videos and also setting orientation of UIWebview. The benefit of the following code is, it won't re-start the video on the change of orientation of device.
NSString* embedHTML = #"<html><head><link rel=\"stylesheet\" media=\"all and (orientation:portrait)\" href=\"portrait-ipad.css\"><link rel=\"stylesheet\" media=\"all and (orientation:landscape)\" href=\"landscape-ipad.css\"></head><body><iframe type=\"text/html\" src=\"http://www.youtube.com/embed/%#\" frameborder=\"0\"></iframe></body></html>";
NSString *videoID = [url stringByReplacingOccurrencesOfString:#"http://www.youtube.com/watch?v=" withString:#""];
videoID = [videoID stringByReplacingOccurrencesOfString:#"&feature=youtube_gdata" withString:#""];
html = [NSString stringWithFormat:embedHTML, videoID];
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[youTubePlayer loadHTMLString:html baseURL:baseURL];
(youTubePlayer is an instance of UIWebView.)
are you just missing px after your widths and heights? eg portrait.css body { width: 768px; height: 1024px; } instead of portrait.css body { width: 768; height: 1024; }
Related
I have created a UIWebView and used a HTML file to display some contents. But when I run it instead of showing the contents only the whole HTML file coding is coming in the WebView. Please help and tell me what is wrong.
UIWebView *ingradients= [[UIWebView alloc]init];
[ingradients setFrame:CGRectMake(10, 170, 300, 300)];
[ingradients loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:#"htmlfile" ofType:#"html"]isDirectory:NO]]];
ingradients.delegate=self;
[self.view addSubview:ingradients];
My htmlfile.html contains
<html>
<body>
<p><strong>Ingredients</strong></p>
</body>
</html>
Instead of showing "Ingredients" in bold its showing the whole coding of htmlfile.html
In Your code you alway contain HTML code because your request always return file htmlfile with extantion .html
If you want to get specific value from HTML content you need to Parce HTML content by using Hpple. Also This is documentation with exmple that are use for parse HTML content.
In your case you use: (by using Hpple)
TFHpple *dataParser = [TFHpple hppleWithHTMLData:placesData];
// name of place
NSString *XpathQueryString = #"//p/strong";
NSArray *listOfdata= [dataParser searchWithXPathQuery: XpathQueryString];
That's weird, I have similar code for this and html is rendered as rich text but not as plain text (like you have), the only difference I have is using fileURLWithPath: but not fileURLWithPath:isDirectory:. Here's my code:
NSString *localFilePath = [[NSBundle mainBundle] pathForResource:#"about" ofType:#"html"];
NSURLRequest *localRequest = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:localFilePath]];
[_aboutWebView loadRequest:localRequest];
Maybe you have some issues with file encoding, but as far as I guess, that should not be the case.
Try this code:
- (NSString *) rootPath{
return [NSSearchPathForDirectoriesInDomains(NSDocumentationDirectory, NSUserDomainMask, YES) lastObject];
}
- (NSString *) pathFoResourse : (NSString *) resourseName ofType: (NSString *)type{
NSString *path = [[MMSupport rootPath] stringByAppendingPathComponent:[NSString stringWithFormat:#"%#.%#", resourseName, type]];
if (![[NSFileManager defaultManager] fileExistsAtPath:path]) {
path = [[NSBundle mainBundle] pathForResource:resourseName ofType:type];
}
NSLog(#"**path:%#**", path);
return path;
}
- (void) loadDataToWebView : (CGRect) frame{
NSString *htmlString = [NSstring stringWithContentsOfFile:[MMSupport pathFoResourse:#"filename" ofType:#"html"] encoding:NSUTF8StringEncoding) error:nil];
UIWebView *webView = [[UIWebView alloc] initWithFrame:frame];
[webView loadHTMLString:htmlString baseURL:nil];
}
I am in trouble to sort the issue of playing the you tube video on my iphone 5...
I am using this code for this:
urls = [urls stringByAppendingString:#"&autoplay=1"];
NSString *htmlString =[NSString stringWithFormat: #"<html><head> <meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = no, width = 212\"/></head> <body style=\"background:#F00;margin-top:0px;margin-left:0px\"><div><object width=\"212\" height=\"212\"><param name=\"movie\" value=\"%#\">",urls];
NSString *htm2=[NSString stringWithFormat:#"</param><param name=\"wmode\" value=\"transparent\"></param> <embed src=\"%#\"type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"212\" height=\"212\"></embed> </object></div></body></html>",urls];
// NSString* embedHTML = #"<html><head> </head><body style=\"margin:0\"> <iframe title=\"YouTube video player\" class=\"youtube-player\" type=\"text/html\" width=\"%d\" height=\"%d\" src=\"%#\" frameborder=\"0\" allowFullScreen></iframe> </body></html>";
NSString* html = [NSString stringWithFormat:#"%#%#",htmlString,htm2];
NSLog(#"Html - %#",urls);
float version = [[[UIDevice currentDevice] systemVersion] floatValue];
if(version <= 5.0)
{
NSRange r=[urls rangeOfString:#"v="];
NSRange ran=NSMakeRange(r.location+2, [urls length]-r.location-2);
NSString *vid=[urls substringWithRange:ran];
html=[NSString stringWithFormat:#"<embed id=\"yt\" src=\"http://www.youtube.com/watch?v=%#&fs=0\" type=\"application/x-shockwave-flash\" width=\"300\" height=\"300\"></embed>", vid];
}
//NSLog(html);
[videoView loadHTMLString:html baseURL:nil];
Can anybody please help to me to sort out with this issue?
Your help will be highly appreciated.
Have you using web view Delegate method for play video automatically ? if yes then remove code for playing video automatically. Check your HTML. Use balh instead of . One more thing please check video URL on browser confirm video exist or not j
follow the following links you will get this done
http://apiblog.youtube.com/2009/02/youtube-apis-iphone-cool-mobile-apps.html
http://iphoneincubator.com/blog/audio-video/how-to-play-youtube-videos-within-an-application
I have video embedded in my application using this solution (html string in UIWebView):
http://iphoneincubator.com/blog/audio-video/how-to-play-youtube-videos-within-an-application
Unfortunately client requires his own thumbnail. I would like to solve it by creating UIWebView once he taps on this thumbnail and play the video inside automatically.
How can I do it?
Try this:-
NSString *htmlString = [NSString stringWithFormat:#"<html><head>"
"<meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = no, width = 50\"/></head>"
"<body style=\"background:#F00;margin-top:0px;margin-left:0px\">"
"<div><object width=\"50\" height=\"50\">"
"<param name=\"movie\" value=\"%#\"></param>"
"<param name=\"wmode\" value=\"transparent\"></param>"
"<embed src=\"%#\" type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"50\" height=\"50\"></embed>"
"</object></div></body></html>",[d objectForKey:#"hrefUrl"],[d objectForKey:#"hrefUrl"]];
[videoView loadHTMLString:htmlString baseURL:[NSURL URLWithString:#"http://www.your-url.com"]];
Following is the html string to play video automatically inside UIWebView...
NSString *embedHTML = [NSString stringWithFormat:#"<html><body><video controls=\"controls\" autoplay=\"autoplay\"><source src=\"%#\" type=\"video/mp4\"/></video></body></html>", url];
[_webView loadHTMLString:embedHTML baseURL:baseURL];
I have tried the following one, it is working fine and also starts to play automatically.
NSString *embedHTML = #"<html><body bgcolor="black"><embed id="yt" src="http://www.youtube.com/watch?v=9vyYHVB-QnY"type="application/x-shockwave-flash" width="320.00" height="370.00"></embed></body></html>";
[_webView loadHTMLString:embedHTML baseURL:baseURL];
I've read many of the existing questions and answers for my problem but none seem to answer it specifically and simply.
I am displaying many HTML files in my app and want to use a CSS to help format them. The CSS file will be held locally together with the HTML files.
I think I want to add the CSS ref inline - presuming that's then right way to do it?
My code is
- (void)viewDidAppear:(BOOL)animated {
[super viewWillAppear:animated];
[adviceContent loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle]
pathForResource:[advice objectForKey:#"HTML"] ofType:#"html"]
isDirectory:NO]]];
[super viewDidAppear:animated];
}
And I've inserted my CSS reference in the HTML file thus within the head tags <
link rel="stylesheet" type="text/css" href="photovaluesCSS_2column.css" media="screen"/>
Can someone explain where I'm going wrong?
Thanks
When loading the HTML, you need to specify a base URL for the css file, so your controller will "know" where that CSS file is located.
Here's a code that loads a html string which uses a css file. You can load the entire css from a file, or modify it as you need.
// HTML files are stored in the main bundle
NSBundle *bundle = [NSBundle mainBundle];
NSString *path = [bundle bundlePath];
NSString *filename = #"none";
NSString *fullPath = [NSBundle pathForResource:filename ofType:#"html" inDirectory:path];
// load a HTML from a file
NSString *chapter_filename = [NSString stringWithFormat:#"Section%d", _chapter];
NSString *sectionHTMLPath = [[NSBundle mainBundle] pathForResource:chapter_filename ofType:#"html"];
NSString* htmlContent = [NSString stringWithContentsOfFile:sectionHTMLPath encoding:NSUTF8StringEncoding error:nil];
// add a generic template and the css file directive
NSString* htmlString = #"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"he\" lang=\"he\"><head><style type=\"text/css\" media=\"all\">#import \"styles.css\";</style><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /></head><body>%#</body></html>";
// load the html into a web view
NSURL *url = [NSURL fileURLWithPath:fullPath];
[_webView loadHTMLString:[NSString stringWithFormat:htmlString, htmlContent] baseURL:url];
Here is the code I am using:
NSString *imagePath = [[NSBundle mainBundle] resourcePath];
imagePath = [imagePath stringByReplacingOccurrencesOfString:#"/" withString:#"//"];
imagePath = [imagePath stringByReplacingOccurrencesOfString:#" " withString:#"%20"];
NSString *HTMLData = #"<meta name=\"viewport\" content=\"width=320\"/> <img src=\"image.png\" alt=\"\" width=\"320\" height=\"480\">";
[self.webView loadHTMLString:HTMLData baseURL:[NSURL URLWithString: [NSString stringWithFormat:#"file:/%#//",imagePath]]];
[self.webView setScalesPageToFit:YES];
There is a white border surrounding the image in the web view. Is there any way to just have the image take up the screen?
Edit: Added screenshot
Thanks in advance for your help.
Try adding a body tag that has its CSS margin property set to 0px. The generated HTML should look like this:
<meta name="viewport" content="width=320"/>
<body style="margin:0px;">
...img tag goes here...
</body>
Have your tried adding border="0"
Change: <img src=\"image.png\" alt=\"\" width=\"320\" height=\"480\">
To: <img src=\"image.png\" alt=\"\" width=\"320\" height=\"480\ border=\"0\">