Step-by-Step: Simple Video App using Objective-C

There are two ways to try out this sample:

Download the sample

Download the entire Xcode project for experimentation.

1. Clone or download the Native SDK for iOS samples to your local system.
2. Navigate to the Player/VideoCloudBasicPlayer/objc sample app.
3. Run the pod install command.
4. Open and run the newly created workspace.

For details, see the Running Sample Apps for the Native SDK for iOS/tvOS document.

Build the app by following the steps in this guide

Follow the steps below to get familiar with setting up an app project that uses the Brightcove Player SDK for tvOS. You can view the complete code for each of the following:

1. AppDelegate implementation
2. View Controller header
3. View Controller implementation

Import the Brightcove Player SDK header file

1. Add the following import statement for the Brightcove Player SDK:

   @import BrightcovePlayerSDK;

Customize the project with your values

Add token and playlist id values to access your Video Cloud account.

This example plays a video returned from the Brightcove Playback API, which is the latest and recommended API to retrieve content from your Video Cloud library. If you are not familiar with Policy Keys, see the Policy API Overview.

1. Below the #import directives, add your own values for the following:

   • Line 11: Defines your Brightcove Playback API Policy Key.
   • Line 12: Defines your Video Cloud Account ID.
   • Line 13: Defines your Video Cloud Video ID.

   // ** Customize these values with your own account information **
   static NSString * const kViewControllerPlaybackServicePolicyKey = @"your policy key";
   static NSString * const kViewControllerAccountID = @"your account id";
   static NSString * const kViewControllerVideoID = @"your video id";

Declare properties

1. In the ViewController interface section, add the following class declarations:

   • Line 14: Adds the Brightcove delegates to the interface. This allows your app to listen and respond to video playback events.
   • Line 16: Defines the BCOVPlaybackService class, which provides asynchronous methods for retrieving data from the Playback API.
   • Line 17: Defines the BCOVPlaybackController, which has methods to control playback functionality.
   • Line 18: Defines the player view for the Brightcove UI controls.
   • Line 19: Defines the video container view.

   @interface ViewController () <BCOVPlaybackControllerDelegate>
   
   @property (nonatomic, strong) BCOVPlaybackService *playbackService;
   @property (nonatomic, strong) id<BCOVPlaybackController> playbackController;
   @property (nonatomic) BCOVPUIPlayerView *playerView;
   @property (nonatomic, weak) IBOutlet UIView *videoContainer;
   
   @end

Define initialization method

1. In the ViewController implementation section, define an init function which calls a setup function which you will define in the next step.

   @implementation ViewController
   #pragma mark Setup Methods
   
   - (instancetype)initWithCoder:(NSCoder *)coder
   {
   self = [super initWithCoder:coder];
   if (self)
   {
   		[self setup];
   }
   return self;
   }

Set up the player

1. Below the init function, create a function named setup, which is called when the app loads.

   • Line 38: Uses the shared manager to create a playback controller. The BCOVPlayerSDKManager class is a singleton that allows you to create other objects in the SDK ecosystem.

   • Line 40: Optional: If you override the BCOVVideo class or do not use the Brightcove player and playback service or catalog, you need to send your Video Cloud Account ID to Video Cloud Analytics. This allows you to view data for this app in Video Cloud Analytics.

   • Lines 42-44: set the delegate and turn on the autoadvance and autoplay features.

   • Line 46: Initializes the playback service with your Account ID and Policy Key.

   - (void)setup
   {
   _playbackController = [BCOVPlayerSDKManager.sharedManager createPlaybackController];
   
   _playbackController.analytics.account = kViewControllerAccountID; // Optional
   
   _playbackController.delegate = self;
   _playbackController.autoAdvance = YES;
   _playbackController.autoPlay = YES;
   
   _playbackService = [[BCOVPlaybackService alloc] initWithAccountId:kViewControllerAccountID policyKey:kViewControllerPlaybackServicePolicyKey];
   }

Configure the player

1. In the viewDidLoad function do the following:

   • Line 54: Create and set the Brightcove player controls, using the standard VOD layout.
   • Line 56: Adds the player view as a subview of the main view.
   • Line 57: Turn off auto-resizing mask.
   • Lines 58-63: Use Auto Layout to define dynamic contraints for the player view.
   • Lines 64: Assigns the player view to its associated global variable.
   • Lines 67: Associates the player view with the playback controller.

   • Line 69: Calls the requestContentFromPlaybackService function, which you will define in the next step.

   - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.
   
     // Set up our player view. Create with a standard VOD layout.
     BCOVPUIPlayerView *playerView = [[BCOVPUIPlayerView alloc] initWithPlaybackController:self.playbackController options:nil controlsView:[BCOVPUIBasicControlView basicControlViewWithVODLayout] ];
   
     _videoContainer addSubview:playerView];
     playerView.translatesAutoresizingMaskIntoConstraints = NO;
     [NSLayoutConstraint activateConstraints:@[
         [playerView.topAnchor constraintEqualToAnchor:_videoContainer.topAnchor],
         [playerView.rightAnchor constraintEqualToAnchor:_videoContainer.rightAnchor],
         [playerView.leftAnchor constraintEqualToAnchor:_videoContainer.leftAnchor],
         [playerView.bottomAnchor constraintEqualToAnchor:_videoContainer.bottomAnchor],
     ]];
     _playerView = playerView;
   
     // Associate the playerView with the playback controller.
     _playerView.playbackController = _playbackController;
   
     [self requestContentFromPlaybackService];
   }

Request content from the Brightcove library

In order to play back video content, you will request a video from your Video Cloud library.

1. Below the viewDidLoad function, create a function named requestContentFromPlaybackService as follows:

   - (void)requestContentFromPlaybackService
   {
     NSDictionary *configuration = @{kBCOVPlaybackServiceConfigurationKeyAssetID:kViewControllerVideoID};
     [self.playbackService findVideoWithConfiguration:configuration queryParameters:nil completion:^(BCOVVideo *video, NSDictionary *jsonResponse, NSError *error) {
   
       if (video)
       {
           [self.playbackController setVideos:@[ video ]];
       }
       else
       {
           NSLog(@"ViewController Debug - Error retrieving video playlist: `%@`", error);
       }
   
     }];
   }

View the code

The View Controller implementation is now complete. Here is the full code:

//
//  ViewController.m
//  Simple-Video-Playback
//

#import "ViewController.h"
@import BrightcovePlayerSDK;

// ** Customize these values with your own account information **
static NSString * const kViewControllerPlaybackServicePolicyKey = @"your policy key";
static NSString * const kViewControllerAccountID = @"your account id";
static NSString * const kViewControllerVideoID = @"your video id";

@interface ViewController () <BCOVPlaybackControllerDelegate>

@property (nonatomic, strong) BCOVPlaybackService *playbackService;
@property (nonatomic, strong) id<BCOVPlaybackController> playbackController;
@property (nonatomic) BCOVPUIPlayerView *playerView;
@property (nonatomic, weak) IBOutlet UIView *videoContainer;

@end

@implementation ViewController
#pragma mark Setup Methods

- (instancetype)initWithCoder:(NSCoder *)coder
{
self = [super initWithCoder:coder];
if (self)
{
		[self setup];
}
return self;
}

- (void)setup
{
_playbackController = [BCOVPlayerSDKManager.sharedManager createPlaybackController];

_playbackController.analytics.account = kViewControllerAccountID; // optional

_playbackController.delegate = self;
_playbackController.autoAdvance = YES;
_playbackController.autoPlay = YES;

_playbackService = [[BCOVPlaybackService alloc] initWithAccountId:kViewControllerAccountID policyKey:kViewControllerPlaybackServicePolicyKey];
}

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// Set up our player view. Create with a standard VOD layout.
BCOVPUIPlayerView *playerView = [[BCOVPUIPlayerView alloc] initWithPlaybackController:self.playbackController options:nil controlsView:[BCOVPUIBasicControlView basicControlViewWithVODLayout] ];

[_videoContainer addSubview:playerView];
  playerView.translatesAutoresizingMaskIntoConstraints = NO;
  [NSLayoutConstraint activateConstraints:@[
    [playerView.topAnchor constraintEqualToAnchor:_videoContainer.topAnchor],
    [playerView.rightAnchor constraintEqualToAnchor:_videoContainer.rightAnchor],
    [playerView.leftAnchor constraintEqualToAnchor:_videoContainer.leftAnchor],
    [playerView.bottomAnchor constraintEqualToAnchor:_videoContainer.bottomAnchor],
]];
_playerView = playerView;

// Associate the playerView with the playback controller.
_playerView.playbackController = _playbackController;

[self requestContentFromPlaybackService];
}

- (void)requestContentFromPlaybackService
{
  NSDictionary *configuration = @{kBCOVPlaybackServiceConfigurationKeyAssetID:kViewControllerVideoID};
  [self.playbackService findVideoWithConfiguration:configuration queryParameters:nil completion:^(BCOVVideo *video, NSDictionary *jsonResponse, NSError *error) {

    if (video)
    {
        [self.playbackController setVideos:@[ video ]];
    }
    else
    {
        NSLog(@"ViewController Debug - Error retrieving video playlist: `%@`", error);
    }
  }];
}

@end

//
//  ViewController.m
//  Simple-Video-Playback
//
//  Copyright © Brightcove. All rights reserved.
//

#import "ViewController.h"

// ** Customize these values with your own account information **
static NSString * const kViewControllerAccountID = @"your account id";

@interface ViewController () <BCOVPlaybackControllerDelegate>

@property (nonatomic, strong) id<BCOVPlaybackController> playbackController;
@property (nonatomic) BCOVPUIPlayerView *playerView;
@property (nonatomic, weak) IBOutlet UIView *videoContainer;

@end

@implementation ViewController
#pragma mark Setup Methods

- (instancetype)initWithCoder:(NSCoder *)coder
{
self = [super initWithCoder:coder];
if (self)
{
	[self setup];
}
return self;
}

- (void)setup
{
_playbackController = [BCOVPlayerSDKManager.sharedManager createPlaybackController];

_playbackController.analytics.account = kViewControllerAccountID; // optional

_playbackController.delegate = self;
_playbackController.autoAdvance = YES;
_playbackController.autoPlay = YES;
}

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// create an array of videos
NSArray *videos = @[
	[self videoWithURL:[NSURL URLWithString:@"https://solutions.brightcove.com/bcls/assets/videos/Great_Horned_Owl.mp4"]],
	[self videoWithURL:[NSURL URLWithString:@"https://solutions.brightcove.com/bcls/assets/videos/Great_Blue_Heron.mp4"]]
];

// Set up our player view. Create with a standard VOD layout.
BCOVPUIPlayerView *playerView = [[BCOVPUIPlayerView alloc] initWithPlaybackController:self.playbackController options:nil controlsView:[BCOVPUIBasicControlView basicControlViewWithVODLayout] ];

// add the view as a subview of the main view
[_videoContainer addSubview:playerView];
playerView.translatesAutoresizingMaskIntoConstraints = NO;
[NSLayoutConstraint activateConstraints:@[
  [playerView.topAnchor constraintEqualToAnchor:_videoContainer.topAnchor],
  [playerView.rightAnchor constraintEqualToAnchor:_videoContainer.rightAnchor],
  [playerView.leftAnchor constraintEqualToAnchor:_videoContainer.leftAnchor],
  [playerView.bottomAnchor constraintEqualToAnchor:_videoContainer.bottomAnchor],
]];
_playerView = playerView;

// Associate the playerView with the playback controller.
_playerView.playbackController = _playbackController;

// add the video array to the controller's playback queue
[self.playbackController setVideos:videos];
// play the first video
[self.playbackController play];
}

- (BCOVVideo *)videoWithURL:(NSURL *)url
{
// set the delivery method for BCOVSources that belong to a video
BCOVSource *source = [[BCOVSource alloc] initWithURL:url deliveryMethod:kBCOVSourceDeliveryHLS properties:nil];
return [[BCOVVideo alloc] initWithSource:source cuePoints:[BCOVCuePointCollection collectionWithArray:@[]] properties:@{}];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

The app is ready to build and run on an iPhone, iPad or the iOS Simulator. You should be able to play the video from your Video Cloud library.

For more details, check out the Brightcove Player SDK for iOS Samples.