Marfeel Docs

# Video providers

Marfeel understands the crucial role that video plays for a customer's mobile presence, and is why Marfeel supports over 150 video providers (opens new window) and continues to integrate more to proactively feed their customers' needs and the mobile user's demand for video content.

If the provider is an iframe video, Marfeel copies the iframe on the frontend along with its source.

On the backend, Marfeel inspects if the source of the iframe identified is in its allowed list of sources. If it is, Marfeel displays the iframe on the frontend.

If the video provider is not supported by Marfeel and is not an iframe, a new extension needs to be created doing reverse engineer. If it's the first time for this provider, the extension is created in the Tenant's code repository as a custom extension. Otherwise, add the extension to Marfeel core.

# Custom video provider

To detect a new video provider it's necessary to use CustomVideoDetector following these steps:

  1. Add the path of to CustomVideoDetector file in the providers.json:

providers.json file must be in the Tenant's root folder in the site code repository.

{
    "videos":{
        "/www.tenant.com/provider/main/videos/CustomVideoDetector.js": []
    }
}
  1. Write a javascript class with all the required behavior, following this structure.

The file must be in under www.tenant.com/providers/main/videos/ in the site code repository.

var Pattern = Java.type("java.util.regex.Pattern");

var CustomVideoDetector = function () {};

CustomVideoDetector.prototype = {
    // ----------------- VIDEO PATTERN --------------------
    VIDEO_PATTERN : Pattern.compile("<video src=\"(http:\\/\\/.*?\\/fVideo\\/video\\/.+?)\\.mp4\""),
    POSTER_PATTERN : Pattern.compile("<video.+?poster=\"(http:\\/\\/.*?\\/video\\/.*?\\.(?:jpg|jpeg|png|gif))\""),

    getVideoPattern : function() {
        return this.VIDEO_PATTERN;
    },

    getPosterPattern: function() {
        return this.POSTER_PATTERN;
    },

    // ----------------- VIDEO DETECTOR --------------------
    getVideoType: function() {
        return "MP4";
    },

    getVideoSource: function(videoMatcher, hostName) {
        return videoMatcher.group(1);
    },

    getPosterSource: function(posterMatcher) {
        return posterMatcher.group(1);
    }
};
  • Constructor function: Receives an array with the attributes you set up in the providers.json. See the NextPagesProviders article to see an example.
  • getVideoPattern: Returns a Java class Pattern for the video. To do that it's important to do the Java.type evident at the beginning of the file.
  • getPosterPattern: Returns a Java class Pattern for the poster. It's not a mandatory function and as a default behavior returns null.
  • getVideoType: It returns a String identifying the type of the video you are defining. The types include:
    • IFRAME
    • MP4
    • AUDIO
    • PLUGIN
    • M3U8
  • getVideoSource: Receives a Matcher and a String with the hostName of the article. It returns a String with the source of the video.
  • getPosterSource: Receives a Matcher and returns a String with the source of the poster. It's not a mandatory function and as a default behavior returns null.
  1. To run a test for this provider follow the instruction about how to test a provider.

# Custom Video provider implementation examples

# Custom video provider from attributes

To detect a new video provider from attributes it's necessary to use CustomVideoAttrDetector following these steps:

  1. Add the path of to CustomVideoAttrDetector file in the providers.json:

providers.json file must be in the Tenant's root folder in the site code repository.

{
    "videoAttrs":{
        "/www.tenant.com/providers/main/videoAttrs/CustomVideoAttrDetector.js": []
    }
}
  1. Write a javascript class with all the required behavior, following this structure.

The file must be in under example.com/providers/main/videoAttrs/ in the site code repository.

var CustomVideoAttrDetector = function () {};

CustomVideoAttrDetector.prototype = {
    DATA_VIDEO_IFRAME : 'data-video-iframe',

    getVideoType : function() {
        return 'IFRAME';
    },

    getVideoSource : function (hostName, attrs) {
        return attrs.getValue(this.DATA_VIDEO_IFRAME);
    },

    isCandidate : function(attrs) {
        return attrs.getValue(this.DATA_VIDEO_IFRAME) != null;
    }
};
  • Constructor function: Receives an array with the attributes you set up in the providers.json. See the NextPagesProviders article to see an example.
  • getVideoType: It returns a String identifying the type of the video you are defining. The types include:
    • IFRAME
    • MP4
    • AUDIO
    • PLUGIN
    • M3U8
  • getVideoSource: Receives a String with the hostname of the article and Attributes of the element as parameters. It returns a String with the source of the video.
  • isCandidate: Receives the Attributes from the element and returns a boolean indicating if that element is a video candidate or not.

Custom tag actions

The elements that are being send as candidates are by default scripts. To get the video from a different tag its necessary to use definition.json flag customTagActions. E.g:

"customTagActions": "DIV:GenericVideoAttrElement"
  1. To run a test for this provider follow the instruction about how to test a provider.

# Custom video provider from attributes implementation examples