Mobile Development kit Custom Control – VideoPlayer

Mobile Development kit (MDK) helps developers to build multi-channel applications with metadata approach and run it natively on mobile devices (iOS and Android) and as a web application in browser.

In this blog, I would like to explain the steps needed to create a custom control to play videos in mobile device running on iOS platform by extending Mobile development kit application.

Prerequisite As a reader, you should have some experience working with SAP Mobile Development kit (MDK).

Follow this tutorial to learn about creating an extension with Mobile Development kit.

Create MDK Page to include Video Player Custom Control

{
	"Caption": "VideoPlayer",
	"Controls": [
		{
			"Sections": [
				{
					"Class": "VideoPlayer",
					"Control": "VideoPlayer",
                    "ExtensionProperties": {
				        "videoURL": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        			},
					"EmptySection": {
						"FooterVisible": false
					},
					"Height": 1000,
					"Module": "extension-VideoPlayer",
					"Visible": true,
					"_Name": "SectionExtension0",
					"_Type": "Section.Type.Extension"
				}
			],
			"_Name": "SectionedTable0",
			"_Type": "Control.Type.SectionedTable"
		}
	],
	"_Name": "VideoPlayer",
	"_Type": "Page"
}

Create folder structure for Video Player extension

Create the folder structure for extension as follows:

extension-VideoPlayer
     - contols
           - VideoPlayer.ts

Implementation of extension – VideoPlayer.ts

import { IControl } from 'mdk-core/controls/IControl';
import { BaseObservable } from 'mdk-core/observables/BaseObservable';
import { IContext } from 'mdk-core/context/IContext';
import * as app from 'tns-core-modules/application';
import { screen } from 'tns-core-modules/platform';

export class VideoPlayer extends IControl {
    private _observable: BaseObservable;
    private _videoURL: string;
    private _avplayerViewController: AVPlayerViewController;
    private _avPlayer: AVPlayer;

    public initialize(props) {
            super.initialize(props);

            this._avplayerViewController = AVPlayerViewController.new();
            this._avplayerViewController.view.frame = CGRectMake(0, 0, 0, 2000);
            this._avplayerViewController.entersFullScreenWhenPlaybackBegins = true;
            this._avplayerViewController.showsPlaybackControls = true;
            
            const sVideoURL = this.definition().data.ExtensionProperties.videoURL;
            this.valueResolver().resolveValue(sVideoURL).then((resolvedValue) => {
                this._videoURL = resolvedValue;
                this._avPlayer = AVPlayer.playerWithURL(NSURL.URLWithString(this._videoURL));
                this._avplayerViewController.player = this._avPlayer;
                if (this._avPlayer){
                    this._avPlayer.play();
                }
            });
    }


    public view() {
        return this._avplayerViewController.view;
    }

    public viewIsNative() {
        return true;
    }

    public observable() {
        if (!this._observable) {
            this._observable = new BaseObservable(this, this.definition(), this.page());
        }
        return this._observable;
    }

    public setContainer(container: IControl) {
        // do nothing
    }

    public setValue(value: any, notify: boolean, isTextValue?: boolean): Promise<any> {
        return Promise.resolve();
    }

    public onPageLoaded() {
        app.on(app.orientationChangedEvent, this._fireOrientationChangedEvent, this);
    }

    public onPageUnloaded(pageExists) {
        app.off(app.orientationChangedEvent);
    }

    private _fireOrientationChangedEvent(data: any) {
        this.resetSize();
    }

    private resetSize() {
        if (app.ios) {
                const width = screen.mainScreen.heightDIPs > screen.mainScreen.widthDIPs ? screen.mainScreen.widthDIPs : screen.mainScreen.heightDIPs;
                const height = screen.mainScreen.heightDIPs > screen.mainScreen.widthDIPs ? screen.mainScreen.heightDIPs : screen.mainScreen.widthDIPs;
                if (this._avplayerViewController) {
                        this._avplayerViewController.view.frame = CGRectMake(0, 0, width, height);
                }
            }
    }
} 

The extension is using AVPlayerViewController and AVPlayer iOS classes to play the video.

The extension also register/un-register for mobile device orientation change events on pageload and pageUnload methods.

Please note:

• The code will not work to play Youtube videos. To play Youtube videos, extend the application with WKWebView and pass in the Youtube video URL to this WKWebView to play the video.
• The un-secure video URL that starts with “http:” gives App Transport Security issue as described here. As mentioned in the blog, open the generated project in XCode, navigate to Info tab and set the App Transport Security Settings -> Allow Arbitrary Loads to YES.

Fix for App Transport Issue

Conclusion

This custom control will help you to extend your Mobile Development kit with custom control to play videos.

Please share your feedback or thoughts in a comment below.