Quick Start: Create a Simple Video App using Objective-C

Product(s)
Brightcove Player
Video Cloud
Role(s)
Device SDK Developer
Task(s)
Develop with the Native SDKs
Topic(s)
Code Samples
API(s)
Playback API
SDK
Get Started
iOS

In this topic, you will learn how to build a simple video playback app using the Brightcove Player SDK for iOS. You will build it using the Objective-C programming language.

Overview

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.

For this option, you will need a Policy Key. If you are not familiar with Policy Keys, see Policy API Overview.

Get started

This example plays videos from an internal array of video files.

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

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.

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

Create the project

Set up a project in Xcode. Then add the Brightcove Player SDK along with any dependencies to the project.

Set up the Xcode project

Create a new Xcode project for the app.

  1. Start the creation of a new iOS project in Xcode. Select Create a new Xcode project.

    Create Project
    Create Project
  2. Choose Single View Application for the template and select Next.

    Choose project template
    Choose project template
  3. Set the project information as follows:

    • Product Name: Simple-Video-Playback
    • Team: none

      The Team field is optional. If you want to distribute your app on the App Store, you will need to select a team that you belong to through the Apple Developer Program. The team name is required for code signing. In this example, we'll select none.

    • Organization Name: your company name
    • Organization Identifier: com.example-company
      This makes the product name unique for the app store.
    Add project information
    Add project information
  4. Choose the location where you want to save your project and create it.

    Save project
    Save project
  5. Now close the project (yes, close it — this is important!)

Add the SDK and its dependencies to your project

The easiest way to add the SDK and its dependencies to your project is to use CocoaPods.

CocoaPods is a dependency manager that adds libraries to your project. It is not required, but makes installation easier. To install CocoaPods, see the instructions on the CocoaPods site.

  1. In your project folder, create a plain text file called Podfile (no file extension).

  2. Using a text editor, add the following lines of code to the Podfile and save it. This code does the following:

    • Line 1: Points to the GitHub location for the Brightcove pod specs.
    • Line 3: Sets Pods to use frameworks instead of static libraries.
    • Line 5: Defines the iOS platform version.
    • Lines 7-9: Install the current version of the Brightcove player SDK.

    source 'https://github.com/brightcove/BrightcoveSpecs.git'
    
    use_frameworks!
    
    platform :ios, '10.0' # (or whatever version you want)
    
    target 'Simple-Video-Playback' do
    pod 'Brightcove-Player-Core'
    end
  3. Open a Terminal session and navigate to your Simple-Video-Playback Xcode project folder.

    Terminal session
    Terminal session
  4. In the Terminal session, type the following command:

    pod install

    and press Return to run the it. You should see a series of messages in the terminal indicating that the Brightcove Player SDK has been added to your project.

  5. Notice the last line, which is important — from this point on, you must open the Simple-Video-Playback.xcworkspace file in Xcode, not the Simple-Video-Playback.xcodeproj file. The pod install command creates this .xcworkspace file for your project.

Code the video app

Create the code for a simple video playback app.

  1. In Xcode, open the Simple-Video-Playback.xcworkspace file.

Set the audio behavior for the app

The audio session handles audio behavior at the app level. Learn more about the AVAudioSession class.

For this sample, we will use AVAudioSessionCategoryPlayback. This plays audio even when the screen is locked and with the Ring/Silent switch set to silent. To keep it simple, we will put the code for this in the App Delegate.

  1. In your project, open the App Delegate implementation file (AppDelegate.m).

  2. In the didFinishLaunchingWithOptions method, add code to set the audio session category. Make sure you import the AVFoundation framework.

    • We need the code below in order to ensure that audio plays back when we expect it to. For example, without setting this code, we won't hear the video when the mute switch is on.
    • For simplicity in the sample, we are putting this in the app delegate. For more information about how to use this in your own app, see the Audio Session Programming Guide.
    //  AppDelegate.m
    //  Simple-Video-Playback
    //
    //  Created on 1/2/18.
    //  Copyright © 2018 Brightcove. All rights reserved.
    //
    
    #import "AppDelegate.h"
    #import <AVFoundation/AVFoundation.h>
    
    @interface AppDelegate ()
    
    @end
    
    @implementation AppDelegate
    
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    NSError *categoryError = nil;
    BOOL success = [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:&categoryError];
    
    if (!success)
    {
    		NSLog(@"AppDelegate Debug - Error setting AVAudioSession category.  Because of this, there may be no sound. `%@`", categoryError);
    }
    return YES;
    }
    
    - (void)applicationWillResignActive:(UIApplication *)application {
    // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
    // Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
    }
    
    - (void)applicationDidEnterBackground:(UIApplication *)application {
    // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
    // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
    }
    
    - (void)applicationWillEnterForeground:(UIApplication *)application {
    // Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
    }
    
    - (void)applicationDidBecomeActive:(UIApplication *)application {
    // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
    }
    
    - (void)applicationWillTerminate:(UIApplication *)application {
    // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
    }
    
    @end

Build the View Controller class declaration

Update the View Controller class to include the Brightcove SDK.

  1. In your project, open the View Controller header file (ViewController.h).

Import the Brightcove Player SDK header file

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

    @import BrightcovePlayerSDK;

Set the class delegate

This allows your app to listen and respond to video playback events.

  1. Update the line @interface ViewController : UIViewController as follows:

    @interface ViewController : UIViewController <BCOVPlaybackControllerDelegate>

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

//  ViewController.h
//  Simple-Video-Playback
//
//  Created on 1/2/18.
//  Copyright © 2018 Brightcove. All rights reserved.
//

#import <UIKit/UIKit.h>
@import BrightcovePlayerSDK;

@interface ViewController : UIViewController <BCOVPlaybackControllerDelegate>

@end

Build the View Controller implementation

Update the View Controller implementation to play a video from the Brightcove catalog service.

  1. In your project, open the View Controller implementation file (ViewController.m).

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 12: Defines your Brightcove Playback API Policy Key.
    • Line 13: Defines your Video Cloud Account ID.
    • Line 14: 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 16: Adds the Brightcove delegates to the interface.
    • Line 18: Defines the BCOVPlaybackService class, which provides asynchronous methods for retrieving data from the Playback API.
    • Line 19: Defines the BCOVPlaybackController, which has methods to control playback functionality.
    • Line 20: Defines the player view for the Brightcove UI controls.
    • Line 21: 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 40: 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 42: 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 44-46: set the delegate and turn on the autoadvance and autoplay features.
    • Line 48: 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 56: Create and set the Brightcove player controls, using the standard VOD layout.
    • Lines 59-60: Configure the playback controller's view.
    • Line 61: Adds the player view as a subview of the main view.
    • Lines 62: Assigns the player view to its associated global variable.
    • Lines 65: Associates the player view with the playback controller.
    • Line 71: 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] ];
    
    // Install in the container view and match its size.
    playerView.frame = _videoContainer.bounds;
    playerView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    [_videoContainer addSubview:playerView];
    _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
    {
    [self.playbackService findVideoWithVideoID:kViewControllerVideoID parameters:nil completion:^(BCOVVideo *video, NSDictionary *jsonResponse, NSError *error) {
    
    		if (video)
    		{
    				[self.playbackController setVideos:@[ video ]];
    		}
    		else
    		{
    				NSLog(@"ViewController Debug - Error retrieving video: `%@`", error);
    		}
    
    }];
    }

View the code

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

//
//  ViewController.m
//  Simple-Video-Playback
//
//  Created on 1/2/18.
//  Copyright © 2018 Brightcove. All rights reserved.
//

#import "ViewController.h"

// ** 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] ];

// Install in the container view and match its size.
playerView.frame = _videoContainer.bounds;
playerView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[_videoContainer addSubview:playerView];
_playerView = playerView;

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

[self requestContentFromPlaybackService];
}

- (void)requestContentFromPlaybackService
{
[self.playbackService findVideoWithVideoID:kViewControllerVideoID parameters:nil completion:^(BCOVVideo *video, NSDictionary *jsonResponse, NSError *error) {

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

}];
}

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

@end

Customize the project with your values

Set the value of your Account Id, which will be sent to Brightcove in a later step.

  1. Below the #import directives, add your own value for your Brightcove Account Id. This will be used to register your app with Brightcove.

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

Declare properties

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

    • Line 14: Adds the Brightcove delegates to the interface.
    • Line 16: Defines the BCOVPlaybackController, which has methods to control playback functionality.
    • Line 17: Defines the player view for the Brightcove UI controls.
    • Line 18: Defines the video container view.
    @interface ViewController () <BCOVPlaybackControllerDelegate>
    
    @property (nonatomic, strong) id<BCOVPlaybackController> playbackController;
    @property (nonatomic) BCOVPUIPlayerView *playerView;
    @property (nonatomic, weak) IBOutlet UIView *videoContainer;
    
    @end

Define initialization methods

  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 method named setup, which is called when the app loads.
    • Line 37: Creates the playback controller using a shared manager. The BCOVPlayerSDKManager class is a singleton that allows you to create other objects in the SDK ecosystem.
    • Line 39: Registers your app with Brightcove by sending your Account Id.
    • Lines 41-43: set the delegate and turn on the autoadvance and autoplay features.
    - (void)setup
    {
    _playbackController = [BCOVPlayerSDKManager.sharedManager createPlaybackController];
    
    _playbackController.analytics.account = kViewControllerAccountID;
    
    _playbackController.delegate = self;
    _playbackController.autoAdvance = YES;
    _playbackController.autoPlay = YES;
    }

Configure the player and start playback

  1. In the viewDidLoad method do the following:

    • Lines 50-53: Create an array of video sources. You'll define the videoWithURL function in the next step.
    • Line 56: Create the player view with a standard VOD layout.
    • Lines 59-60: Set the player view to match the size of the container view.
    • Line 61: Adds the player view as a subview of the main view.
    • Line 65: Associates the player view with the playback controller.
    • Line 68: Adds the video array to the controller's playback queue.
    • Line 70: Starts playback of the first video.
    - (void)viewDidLoad {
    [super viewDidLoad];
    
    // 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] ];
    
    // Install in the container view and match its size.
    playerView.frame = _videoContainer.bounds;
    playerView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    [_videoContainer addSubview:playerView];
    _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];
    }

The rest

  1. Below the viewDidLoad function, create a function that sets the delivery method for BCOVSources that belong to a video.

    - (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:@{}];
    }

View the code

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

//
//  ViewController.m
//  Simple-Video-Playback
//
//  Created on 1/2/18.
//  Copyright © 2018 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] ];

// Install in the container view and match its size.
playerView.frame = _videoContainer.bounds;
playerView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[_videoContainer addSubview:playerView];
_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

Connect the storyboard view

Connect the Main.storyboard view with thevideoContainer property.

  1. In the Xcode, open the Main.storyboard file.

  2. In the companion view, expand the View Controller Scene and then the View Controller menu to expose the View object.

    Storyboard view
    Storyboard view"
  3. Show the Assistant Editor, and open the ViewController.m file.

    Assistant editor
    Assistant editor
  4. Select the open circle next to the @property for videoContainer, and drag it to the View object to connect these components.

    Connect the view
    Connect the view

Manage Media Security

App Transport Security (ATS) enforces secure connections between your app and web services. With Apple's release of the iOS 9 SDK, a new feature called App Transport Security (ATS) was added.

  1. One of the following situations will apply to your app:

    • By default the Brightcove Native SDK for iOS uses a source selection policy to choose HTTPS over HTTP sources, so you can build your apps with ATS enabled.

      That's it, you are ready to run your app.

       

    • If your remote assets use HTTPS instead of HTTP sources, then you can build your apps with ATS enabled.

      That's it, you are ready to run your app.

       

    • If you are using HTTP sources or have other HTTP calls in your app, you may encounter the following error message:

      App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure.
      Temporary exceptions can be configured via your app's Info.plist file.

      This means that ATS is enabled, but your system is not configured to meet the ATS requirements. To fix this situation, see the Working with App Transport Security (ATS) document.

Run the app

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.

iPhone sample
iPhone sample

The app is ready to build and run on an iPhone, iPad or the iOS Simulator. You should be able to play the videos defined in your array.

iPhone sample
iPhone sample