Implement Each Tabbar With Webview Videoplay And Soundplay In iPhone

In this application we will see how to to create a tab bar application with webview,Videoplay and soundplay  in each of the tab bar.

Step 1: Create a TabBar Application using template. Give the application name “TabBarWebView”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We’ll add UIViewController class to the project.Choose New file -> Select cocoa touch classes group and then select UIViewController subclass. Give the name “VideoPlayViewController”, do it once more time, save it into “AudioPlayViewController” and make the corresponding .xib file.

Step 4: First tab of the tabbar we will display webview so let see how to do this, in the FirstViewController.h we have added UIWebView for displaying the webview, make the following changes in the header file.

 

 

 

Step 5: Now double click your MainWindow.xib file open it to the Interface Builder. Open the Tab Bar Controller view, you will see there are two tabs, now drag the Tab Bar Item from the library and place it below of the Tab Bar Controller. Change the each of the TabBar name to the WebPage, VideoPlay and AudioPlay(See the figure below). Select the WebPage from the tab bar  and bring up Attributes Inspector and change the class name into FirstViewController then drag the web view from the library and place it to the view window. Now select the WebPage from the tab bar and bring up connection inspector drag webDisplay to the Web View.

Step 6: Make the changes in the FirstViewController.m file.

 

 

 

Step 7: We implemented in the VideoPlayViewController.h file MPMoviePlayerController for the video playing, and NSURL for loaded the video for the second tab bar (Videoplay) .make the following changes in the VideoPlayViewController.h file.

 

 

 

Step 8: Double click your MainWindow.xib file and open it to the Interface Builder. Select the VideoPlay from the tab bar and bring up Identity Inspector change the class name into the VideoPlayViewController. Save the MainWindow.xib file and go back to the Xcode.

Step 9: For the videoplay we need to add framework, select frameworks -> Add -> Existing framework -> Framework -> MediaPlayer.framework. Add the video file in the Resource folder.

Step 10: Make the following changes in the VideoPlayViewController.m file.

 

 

 

Step 11: In the AudioPlayViewController.h file we have added AVAudioPlayer class is used  for play sound in any audio format in available iPhone OS .Use a delegate to handle interruptions and to update the user interface when a sound has finished playing. So make the following changes in the file.

 

 

 

Step 12: For the AudioPlay we need to add frameworks. Select Framework -> Add -> Existing folder -> framework -> select AudioToolBox.framework and AVFoundation.framework. And add the the sound file in the Resource folder.

Step 13: Double click your AudioPlayViewController.xib file and open it to the Interface Builder. Open the View window, drag the Round Rect from the library and place it to the view window. Double click the Round Rect and give the name “PlayMusic”. Select File’s Owner icon and bring up Identity Inspector , change the class name into the AudioPlayViewController.Now select the Round Rect and bring up Connection Inspector drag from the TouchUp Inside to the File’s Owner icon and select playSound method. Save the AudioPlayViewController.xib file and go back to the Xcode.

Step 14: Make the following changes in the AudioPlayViewController.m file for the playing the audio file.

 

 

 

Step 15: Now compile and run the application.

You can downloaded SourceCode from here TabBar WebView

Leave a Comment:

4 comments
cc says March 25, 2010

Hello, this is a nice article.
but i got a problem about the video part.
it’s no problem to test the program on the simulator but the device.
I got a error message when i try to test it on Device:

Codesign error: no certificate was found in your keychain for the specified identifier “(null)”

actually i’ve ever tested the MadiaPlayer framework once, and it was worked on my device (iPhone 3G) .

below is where I guess the problem:

[[NSNotificationCenter defaultCenter] removeObserver:self
name:NULL
object:nil];

would you please tell me how to fix it?

thank a lot

Reply
carlos says August 31, 2011

Video does not play, only audio.
What is the fix?

Reply
bemboman says October 23, 2011

Hello
thank you very much for all tutorials.
I have a problem, when I do all the steps in the Xcode 4.2 does not work for some reason or that is new this version, I could help by updating the tutorial to this version.
thank you very much beforehand.

Reply
Roman says November 15, 2011

Hi Sushant, thanks for the tutorial. Unfortunately audio stops playing after the screen switches off. Can you explain how do you solve it ?
Thanks

Reply
Add Your Reply