@cdf/cdf-ng-media1.2.4 • Public • Published
CDF Media UI Module (@cdf/cdf-ng-media)
CDF-NG-MEDIA is an Angular module containing UI components for displaying different forms of media (images and/or video). This module simplifies the displaying of media assets. CDF-NG-MEDIA is a UI module existing in Content Delivery Framework's eco-system.
CDF-NG-MEDIA requires the latest version of Angular (at the time of this writing: 2.4.7).
CDF-NG-MEDIA also utilizes the following 3rd party sources:
- JW Player as the vehicle for loading videos. CDF-NG-MEDIA is currently using:
- JW Player version 7.6.1
CDF-NG-MEDIA requires a JW Player key in order for JW Player to work correctly. You will need to create an account and establish a JW Player key. You will provide the JW Player Key during configuration. See JW Player for creating an account.
Installing CDF-NG-MEDIA in your Angular application:
//STEP 1: INSTALL CDF-NG-MEDIAnpm install @cdf/cdf-ng-media --save...................................................//STEP 2: create a config file to provide configuration settings:import
CDF-NG-MEDIA containes the following models needed to show media asset(s):
CdfMediaModel is the model that contains data about the media asset (image and/or video). CdfMediaModel contains the following data points:
Id: string;Type: string;Title: string;Description: string;ImageUri: string;YouTubeId: string;VideoList: CdfVideoModel = ;HasImage: boolean = false;HasVideo: boolean = false;
- Type can be used to apply a label ontop of the media asset (perfect for a collection of media assets of different types)
- ImageUri is the complete http URL to an image
- YouTubeId is the unique value representing a YouTube video (ex. 8geR0yacozY)
- VideoList is an optional collection of URIs to different videos. This is a placeholder for future functionality
CdfVideoModel is a placeholder data model for future development.
CDF-NG-MEDIA containes the following components you can use:
CdfMediaComponent is the base component used to display either an image or a video. CdfMediaComponent consumes CdfMediaModel which contains all the data necessary to determine if the media asset is a video or an image.
CdfMediaSliderComponent is a component handling a collection of CdfMediaModels (mix of images and/or videos). CdfMediaSliderComponent arranges the media in a grid. If one of the items is a video, then playing the video will cause an information pane to slide out showing media's title, type, description and a button to click. You can toggle on/off title, type, and description.
CdfVideoBackgroundComponent uses JW Player's capability to run a video contained in CdfMediaModel in the background.
- made cdf-media-slider self-contained
- removed configuration requirement passing in image source URL
- < 1.0.65
- Rounds and rounds of trial and error...