Implementing Inline Custom Controls for iOS

Learn how to customize player controls for iOS playback. Note that these steps are specific to inline controls. Use the same process for fullscreen controls but replace the inline source files with the fullscreen source files.

The following steps assume the base application is already includes the base Ooyala player configurations as described in Getting Started: Setting Up Your Environment in Xcode. The tutorial works through customizing controls using the GettingStarted app included in the SDK samples.

Copy the Headers folder from the SDK and paste it into the project.

The following steps explain how Prepare a project for customization using files include in the Ooyala Mobile SDK for iOS download.

  1. Open the SDK DefaultSource folder and copy the following files to your project:
    • OOClosedCaptionsSelectorBackgroundViewController.h
    • OOClosedCaptionsSelectorBackgroundViewController.m
    • OOClosedCaptionsSelectorViewController.h
    • OOClosedCaptionsSelectorViewController.m
    • OOControlsViewController.h
    • OOControlsViewController.m
    • OOFullScreenIOS7ControlsView.h
    • OOFullScreenIOS7ControlsView.m
    • OOFullScreenIOS7ViewController.h
    • OOFullScreenIOS7ViewController.m
    • OOImagesIOS7.h ./OOImagesIOS7.m
    • OOInlineIOS7ControlsView.h
    • OOInlineIOS7ControlsView.m
    • OOInlineIOS7ViewController.h
    • OOInlineIOS7ViewController.m
    • OOOoyalaPlayerViewController.h
    • OOOoyalaPlayerViewController.m
    • OOUIUtils.h
    • OOUIUtils.m
  2. Rename each of the following files.
    • OOInlineIOS7ControlsView.m
    • OOInlineIOS7ControlsView.h
    • OOInlineIOS7ViewController.m
    • OOInlineIOS7ViewController.h

    For this tutorial they are renamed as follows:

    • CustomInlineIOS7ControlsView.m
    • CustomInlineIOS7ControlsView.h
    • CustomInlineIOS7ViewController.m
    • CustomInlineIOS7ViewController.h
    1. Copy all of the files into the XCode project.
    2. Select to add the source to your target in the options dialog.
    3. Select Finish.
    Move Files to Project
  3. Open CustomInlineIOS7ContolsView.m and replace the import statement for OOInlineIOS7ControlsView.h with the renamed file. This is shown in the following code sample:
    #import "CustomInlineIOS7ControlsView.h"
     #import <OoyalaSDK/OOOoyalaPlayer.h>
    #import "iOS7ScrubberSliderFraming.h" 
  4. Change the interface and implementation declarations to match the renamed files. This is shown in the following code sample:
    @interface CustomInlineIOS7ControlsView() {
    }
    
    @property (nonatomic) CGFloat playpauseScale;
    @property (nonatomic) CGFloat ccScale;
    @property (nonatomic) CGFloat fullscreenScale;
    
    @property (nonatomic) UIBarButtonItem *fixedSpace;
    @property (nonatomic) UIBarButtonItem *flexibleSpace;
    @end
    
    @implementation CustomInlineIOS7ControlsView
    ...
  5. Open CustomInlineIOS7ControlsView.h and change the interface declaration for the controls view to the renamed file. This is shown in the following code sample:
    ...
     #import <OoyalaSDK/OOOoyalaPlayer.h>
    
    
    @interface CustomIOS7ControlsView : UIView
    
    //Navigation Bar
    @property (nonatomic) UIToolbar *navigationBar;
    @property (nonatomic) UIBarButtonItem *doneButton;
    ...
  6. Open CustomInlineIOS7ViewController.h and change the interface declaration for the view controller to the renamed file. This is shown in the following code sample:
    @interface OOInlineIOS7ViewController : OOControlsViewController
    @end
  7. Open CustomInlineIOS7ViewController.m and update the code to point to the renamed files.
    1. Replace the import statement for the inline view controller header file to the renamed file. This is shown in the following code sample:
      #import "CustomInlineIOS7ViewController.h"
      #import "CustomInlineIOS7ControlsView.h"
       #import <OoyalaSDK/OOOoyalaPlayer.h>
    2. Replace the import statement for the inline controls view header file to the renamed file. This is shown in the following code sample:
      #import "CustomInlineIOS7ViewController.h"
      #import "CustomInlineIOS7ControlsView.h"
      #import <OoyalaSDK/OOOoyalaPlayer.h>
    3. Replace the inline view controller interface declaration with the renamed file. This is shown in the following code sample:
      @interface CustomInlineIOS7ViewController() {
        BOOL wasPlaying;
        BOOL seeking;
        CGFloat bottomBarHeight;
      }
    4. Replace the inline controls view property declaration with the renamed file. This is shown in the following code sample:
      @property (nonatomic) CustomInlineIOS7ControlsView *controls;
      @end
    5. Replace the inline view controller implementation declaration with the renamed file. This is shown in the following code sample:
      @implementation CustomInlineIOS7ViewController
      
      @dynamic controls;
      ...
    6. Replace self.controls = [[OOInlineIOS7ControlsView alloc] initWithFrame:self.view.bounds]; with the following:
      self.controls = [[CustomInlineIOS7ControlsView alloc] initWithFrame:self.view.bounds];
  8. Open OOControlsViewController.h and replace the inline custom controls view header file import statement with the renamed file. This is shown in the following code sample:
    #import <UIKit/UIKit.h>
    #import "CustomInlineIOS7ControlsView.h"
    #import <OoyalaSDK/OOOoyalaPlayer.h>
    ...
  9. Run the app in the simulator to make sure the updates are correctly implemented. The app is now configured for player customization.
  10. Open ViewController.m and edit the file to include the OoyalaPlayerViewController and the custom files. This is shown in the following code sample:
    // Create Ooyala ViewController
    _ooyalaPlayerViewController = [[OOOoyalaPlayerViewController alloc] initWithPcode:PCODE domain:[[OOPlayerDomain alloc] initWithString:PLAYERDOMAIN]];
          
          CustomInlineIOS7ViewController *customInlineIOS7ViewController = [[CustomInlineIOS7ViewController alloc] initWithControlsType:OOOoyalaPlayerControlTypeInline 
          player:_ooyalaPlayerViewController.player overlay:nil delegate:_ooyalaPlayerViewController];
          
          [_ooyalaPlayerViewController setInlineIOS7ViewController:customInlineIOS7ViewController];
The project is now ready for your specific player customizations.

해당 내용이 도움 되었습니까?