Template example

There are 4 templates:

• Video player interface for desktop
• Ad video player interface for desktop
• Video player interface for mobile
• Ad video player interface for mobile
  

The rules will look like this:

player.setConfig({
   ui: {  
   	name: “my-ui-theme”,
   	rule: [  
           {  
   		renderWhen: (api) => api.isAdPlayer && api.device.isMobile, // rendered when the current templateRuleAPI is ad and the platform is mobile  
   		hideWhen: (api) => api.isContentPlayer, // hide the interface if the current templateRuleAPI is a content player
   		showWhen: (api) => api.isAdPlayer,
   		initElementFor: api => api.isAdPlayer, // initialize all custom player elements for ad templateRuleAPI 
   		template: document.getElementById(“ad-mobile-player-template”),
   		option: {  
   			showOnce: true // delete the rendered interface after hideWhen works out   			}  
           }, {
   		renderWhen: (api) => api.isContentPlayer && api.device.isMobile, // render when current templateRuleAPI is content player and platform is mobile  
   		hideWhen: (api) => api.isAdPlayer, // hide when templateRuleAPI is an ad player  
   		showWhen: (api) => api.isContentPlayer, // only show if the current templateRuleAPI is a content player  
   		initElementFor: api => api.isContentPlayer || api.isSource, // initialize custom player element if the current templateRuleAPI is a content player or media manager  
   		template: document.getElementById(“content-mobile-player-template”),
   		   }, {
   			renderWhen: (api) => api.isAdPlayer && !api.device.isMobile, // render if the current templateRuleAPI is ad player and the platform is desktop  
   			hideWhen: (api) => api.isContentPlayer,
   			showWhen: (api) => api.isAdPlayer,
   			initElementFor: api => api.isAdPlayer,
   			template: document.getElementById(“ad-desktop-player-template”),
   			option: {  
   				showOnce: true  
   				}  
           }, {
   		renderWhen: (api) => api.isContentPlayer && !api.device.isMobile,// render if the current templateRuleAPI is content player and the platform is desktop  
   		hideWhen: (api) => api.isAdPlayer,
   		showWhen: (api) => api.isContentPlayer,
   		initElementFor: api => api.isContentPlayer || api.isSource,
   		template: document.getElementById(“content-desktop-player-template”),
   		   }  
       ]  
   }  
});