Video browsing embedding options

Similarly to what we have detailed for the recording here, we will now introduce the most common options for embedding video browsing capabilities in your Salesforce Org.
The way in which you add video playing to your environment depends on which type of Salesforce interface you are running, if you've already transitioned to Lightning or if you are still on Classic. In this page we will be focusing on Lightning, but if you are interested on Classic jump here.

The most common approaches for embedding video browsing capabilities in Lightning are:

• • In the App / Community builder, drag and drop the standard VideoList component included in the NativeVideo package. No coding required.
  • Dynamically create and inject the VideoList standard component inside your own component. Here you need a bit of coding.

Let's discuss these two options.

1. Configure video browsing without any code

Definitely the most commonly used approach, because of its simplicity and also because no coding is required at all. Simply open the page you want to edit through either the Lightning App Builder or the Lightning Community Builder, check the list of components on the left, scroll to the bottom and you'll find VideoList. Just drag and drop the component where you want on your page.

The only effort required is to fill in at least the required fields for this component to work, that vary according to which scenario you are configuring:

• One to one (1 video stored in a lookup field on a target record). Specify the following parameters:
  • "Query Object" with the API name of the target object, the one that contains the video lookup that you want to display
  • "Query Record ID" with the string "recordID", so that NativeVideo will dynamically replace the string with the Salesforce ID of the target record
  • "Select Video Field" with the API name of the lookup field that hosts the reference to the video on the target object
• One to many (multiple videos stored in a junction object, all pointing to the same parent record). Assuming you are using the default junction object provided by the package, specify the following parameters:
  • "Parent Object" with the object API name of the parent record, for instance "Opportunity"
  • "Filter By Field" with the API name of the field that hosts a reference to the parent record on the junction object, for instance "Opportunity__c"
  • "Filter By Value" with the string "recordID", so that NativeVideo will dynamically replace the string with the Salesforce ID of the target record

Simply save the page, leave the Lightning Builder and test it on a details page... to see a video player showing either none, one or multiple videos ready for you and your users to watch.

2. Video browsing embedded in a Component

This section will cover you in case you want to embed a video player showing either one or many videos inside another component you are building. An example of this scenario is again the custom component built to welcome candidates during the recruitment process, so that they can watch a generic message from the CEO or a video introduction to the role directly from the hiring manager:

The video displayed on the right column of the above screenshot has been recorded with NativeVideo by the hiring manager, directly from the details page of the vacancy record, now browsed by the candidate.
Directly from the component's front end controller, we will dynamically create a new configured instance of the VideoList standard component and inject it in a hosting HTML element:

({
    doInit : function(component, event, helper) {
        var vacancyId = component.get('v.vacancyId');
        $A.createComponent(
            "nativevideo:VideoList",
            {
                "aura:id": "vacancyPlayer",
                "queryObject" : "Vacancy__c",
                "selectVideoField" : "Video__c",
                "queryRecordID" : vacancyId,
				"hideFooter" : true,
                "videoApprovedOrigin" : "https://" + window.location.host
            },
            function(newComponent, status, errorMessage) {
                if (status === "SUCCESS") {
                    component.find("vacancyPlayerCnt").set("v.body", newComponent);
                } else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.");
                } else if (status === "ERROR") {
                    console.log("Error: " + errorMessage);
                }
            }
        );
    }
})

This approach is inline with previously discussed ways of embedding components, so it should not come as a big surprise.