Getting started

Before using any of our products you need to sign up to create a Vilynx account and upload some videos to your Dashboard.
If you are already a user skip this.

  • CREATE YOUR ACCOUNT

    The first thing you need to do to get started with Vilynx Gallery is sign up for a free account: Register your account now
    Are you already a user? Sign in

  • UPLOAD YOUR VIDEOS

    Upload your videos to your Vilynx account: either automatically (MRSS) or manually from your computer or your cloud accounts.

    a. Media RSS Feed

    Using a Media RSS (MRSS) feed it's the easiest way to automatically create video previews for your videos.
    Go to your Vilynx Dashboard and paste the URL of your MRSS feed here:

    As new videos are published to the MRSS feed, Vilynx will automatically extract the values in the <link> element and <media:content url> parameter for newly discovered items. Vilynx will automatically download the video from the URL in the <media:content url> parameter, automatically creating a video preview. The <link> element's value will be used as the external video ID that the Vilynx Gallery library uses to place the video preview on the page.

    The table below lists the MRSS XML specs for all of the fields that Vilynx expects in your feed. Only the elements listed here are recognized.
    Please note that any video that appears in the feed will be ingested and therefore will be used within our recommendation or trending plugins, unless it has a dcterms:valid value which includes an end date in the past (see more info below).

    Tag Name Required Description
    <title> or <media:title> Yes Name of video asset
    <link> or <canonicalUrl> Yes The URL where the video can be viewed
    <media:content> Yes The URL to the video file, has to be type=video
    <description> No Description of the video asset. If present, the description will be parsed and added to the videos
    <media:thumbnail> or <media:image> No The URL of the video thumbnail.
    <media: defaultThumbnailUrl> No If several media-thumbnails urls are present, we prioritize the ones with `defaultThumbnailUrl`
    <guid> No The video’s unique identifier. If present, the guid will be associated with the video in our system.
    <pubdate> No The video’s publish date. If present, it will override the auto assigned system date.
    <dcterms:valid> No The video’s start and end dates.If present, the content will be marked as private after the end date, and will not be recommended to the user.
    <media:keywords> No Publisher-generated video keywords. If present, the keywords will be parsed and added to the videos
    <media:category> No Publisher-defined content category. If present, the category will be parsed and added to the videos
    <next_page> No URL to the next set of results. If present, the 'next_page' property will be used to retrieve the next page if the feed contains too many videos to fit on a single page.

    Examples:

    Basic MRSS feed

    
                                    <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
        <channel>
            <title>Vilynx Sample MRSS Feed</title>
            <link>https://vilynx.com</link>
            <description/>
            <item>
                <title>
                    The Technology Behind a Vilynx Tag
                </title>
                <link>
                    https://blog.vilynx.com/the-technology-behind-a-vilynx-tag-a7a8753aea1d
                </link>
                <media:content url="https://vilynx.com/sample.mp4" type="video/mp4" bitrate="764000" height="360" width="640" medium="video" duration="10" lang="en">
            </item>
        </channel>
    </rss>
    

    MRSS Feed with extra fields

    
                                    <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
        <channel>
            <title>Vilynx Sample MRSS Feed</title>
            <link>https://vilynx.com</link>
            <description/>
            <item>
                <guid>123456789</guid>
                <title>
                    The Technology Behind a Vilynx Tag
                </title>
                <link>
                    https://blog.vilynx.com/the-technology-behind-a-vilynx-tag-a7a8753aea1d
                </link>
                <description>
                    Tagging a video based on its contents is easy for the human brain, but can be very time consuming.
                </description>
                <pubDate>Wed Sep 06 09:57:33 EDT 2017</pubDate>
                <media:keywords>
                    Vilynx, Machine Learning, Deep Learning, Artificial Intelligence, Digital Media, Brain
                </media:keywords>
                <media:thumbnail url="https://vilynx.com/sample.jpg" width="384" height="288"/>
                <media:category>News</media:category>
                <media:content url="https://vilynx.com/sample.mp4" type="video/mp4" bitrate="764000" height="360" width="640" medium="video" duration="10" lang="en">
                <dcterms:valid>start=2017-09-06T14:00:00-07:00;end=2017-09-18T00:01:00-07:00;</dcterms:valid>
            </item>
            <next_page>https://www.vilynx.com/next_page_example</next_page>
        </channel>
    </rss>
    

    Do you have a Youtube Channel? Go to your Vilynx Dashboard and paste your Channel ID here:

    To find your channel_id, copy the string from your YouTube channel’s URL http://www.youtube.com/feeds/videos.xml?channel_id=XXXX

    If you need help obtaining this, please visit: http://support.google.com/youtube/answer/3250431?hl=en

    b. Upload videos manually

    You can also easily add videos to your Vilynx account manually to create a Vilynx video preview. Go to your Vilynx Dashboard and click the Import Videos button.

    • If the videos are stored on your computer click Import videos from PC and select the videos on your computer.

    Once the videos have been processed and a preview is available, you will need to assign the external video ID to each video so the Vilynx Gallery library can locate the videos on the page. Select each new video from the home page of the Vilynx Dashboard and then click Assign ID. Make sure to use the value from the href parameter in the <a> tag associated with this video or the Vilynx Gallery library will not be able to automatically discover the video on the page.

    c. Let us do the job for you

    If you want us to crawl your site and upload your videos for you, send us a message with your username and site URL:

    Do it for me!

The Vilynx Gallery

Replace your static video thumbnail with the best 5 seconds of your video using only one line of code.

Discover our brand new version of the Vilynx Gallery plugin. This new release is coded in ECMAscript 6 and comes together with a bunch of other improvements in terms of efficiency, DOM changes and smaller library size.

Create your gallery

Do you already have a user account and some videos uploaded? If you do, your videos are ready so it's time to add the Vilynx Gallery to your page, it's only one line of code! If not, read first the quick setup guide here.

In your Vilynx Dashboard, click your profile pic and choose “Get the Vilynx Code” from the dropdown. Paste the line of code in the page(s) where you want the gallery to show. You must place it at the end of the page's <body> section:

<script src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js" data-publickey="youruserhash" data-redirect="true"></script>
  • publickey="youruserhash" This is your user ID.

  • redirect="true" Shows a countdown while user is hovering the video. Once the countdown is finished, the user will get redirected to the parent link.

Remember that the Vilynx Gallery plugin will automatically detect videos on the page that match an external video ID identified in the Vilynx database and replace the thumbnail with the video preview. Note that this external video ID must exactly match the value of the href parameter in the <a> tag of your web page for the Vilynx video preview to be included on the web page.

Other configuration options are available here.

Release notes

Current version

Here is a list of the changes and improvements included in this new version:

  • jQuery-less. Have you ever thought it is time to drop jQuery? In this release the Vilynx Gallery plugin doesn’t use it anymore.

  • Native Browser Support for Video. All our video previews now run natively across any browser for improved speed.

  • CSS Rendering. Improved flexibility and better browser efficiency with CSS rendering

  • Improved Video Play times! Video starts playing 3–5x faster than with previous gallery versions.

  • No External Libraries. Tired of scripts that load other libraries? the Vilynx Gallery plugin uses no external libraries.

  • Small is the new smart. Compressed, minified, condensed: the updated Vilynx Gallery plugin with ES6 support only weights 41.3kB (4x smaller than before)

NEW REPOSITORY

This new code is beautifully packed in a repository so devops and JS ninjas can contribute and build their own solutions. This release is bundled using ES6 modules, has built-in gulp support and comes with its own server to test your code right away!
Are you interested in? Request access to our repository now by contacting us: info@vilynx.com

Usage & Options

Web page requirements

The Vilynx Gallery library looks for certain tag patterns in the web page containing the video gallery. The inner tag is always an image <img> tag and the outer tag is always an anchor <a> tag. There may also be <span>, <p> or <div> tags, though these are optional:

<a href="external_video_id">
    { <span> | <p> | <div> }
    <img />
</a>

Remember that the Vilynx Gallery library will search for the external_video_id in your uploaded video database in order to match every <a> with its video preview.


If you want to set an external_id that doesn't match your href value you can use the vilynx-id attribute. You can also use this attribute to mark your DOM objects up like this:

<a href="link_url" data-vilynx-id="your_video_external_id">
    <img />
</a>
<div class="vilynx_enabled" data-vilynx-id="your_video_external_id">
    <img />
</div>

With this attribute the Vilynx Gallery library will search for the your_ideo_external_id in your uploaded video database in order to match every <a> or <div> with its video preview.

Another option would be use a custom attribute instead of vilynx-id. When using this scheme please use idattribute configuration attribute in your Gallery definition.

<div class="vilynx_enabled" data-custom-attr-id="your_video_external_id">
    <img />
</div>

As of version 3.3.5 it's possible to use another HTML scheme that allows The Gallery to discover elements with backgroung images. This is an example:

<div class="vilynx_enabled" data-vilynx-id="your_video_external_id" style="background-image: url('img/bg01.png')">
</div>
Options

Several options can be passed through the script:

Name type default description
aggressivelazy integer (px) 200 Pixel distance between the element and the bottom of the viewport. Default value ensures the Gallery object is created before the user reaches it. A major value could be useful for faster than normal scrolling situations
allautoplay boolean false Autoplay all videos + gif fallback on iOS
audio boolean false Activates audio
audioonce boolean false Summary plays first time with audio
autoplay boolean false Show the Summary playing without user interaction
debug boolean false Print debug console logs
divignore string Query selector none Ignore the element defined by the CSS selector when mousing over it
divignorelevels integer 0 Ignores all pointer events descendent from the (N+1)-th ancestor. CSS Selector
idattribute string vilynx-id Use this param in order to set the external-id in other attribute rather than href or vilynx-id
imgignore string Query selector none Ignore this images as Gallery item's reference inside anchor
nocache boolean false Prevent browser from caching summaries adding a random param to the mp4 source url
noimage boolean false Removes the original thumbnail (displays the summary right away)
nomobile boolean false Deactivates the plugin in Mobile devices
notablet boolean false Deactivates the plugin in Tablet devices
optimizely boolean false Sends optimizely events to optimizely (note: it'll use the account registered in your domain). Check the Optimizely integration section
optimizelyoff boolean false Disable Vilynx summaries but keep tracking clicks for Optimizely. Check the Optimizely integration section
publickey string none Unique id to identify your Vilynx account
redirect boolean false It shows a countdown while user is hovering the video, once the countdown is finished user get redirected to the parent link
redirecttext string Redirecting in Message shown along with the redirect countdown
sharewidget boolean false Show the social share links
smallgif boolean false Show small resolution gifs in mobile devices, default option shows big resolution gifs
socialtext string none Message attached to the social network post when sharing the video preview

Here's an example:

<script src="//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js" data-publickey="userhash" data-audio="true" data-redirect="true" data-divignore=".playIcon"></script>
Configuration classes

Some of the previous options can also be set only for selected elements using configuration classes. This is specially useful to customize your Gallery experience for each element or section across your site. Note that script options override this classes.

<a href="external_video_id" class="vilynx_autoplay">
    { < span > | < p > | < div > }
    <img/>
</a>
<a href="external_video_id" class="vilynx_audio">
    { < span > | < p > | < div > }
    <img/>
</a>
                        
Class description
vilynx_disable Disable this element
vilynx_autoplay Show the Summary playing without user interaction
vilynx_pauseonhover When using autoplay this option stops the Summary play when hovering
vilynx_noimage Hide the element image and show the Summary first frame instead
vilynx_audio Play Summary with audio on
vilynx_redirectwithclick Use onclick callback attached to element instead of href location

Third Party Integration

Optimizely

To add a Vilynx variation to your Optimizely account, open your Optimizely Console, create a new variation and add the optimizely param to your Gallery script. This is an example:

$(function () {
    var fileRef = document.createElement('script');
        fileRef.setAttribute("type", "text/javascript");
        fileRef.setAttribute("src", "//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js");
        fileRef.setAttribute("data-publickey", "YOUR_USER_ID");
        fileRef.setAttribute("data-optimizely", "true");
    document.body.appendChild(fileRef);
});

In order to compare the same events in the original page (A) and the variation (B) it’s necessary to include the Vilynx Gallery library also in the original page but remember to add the optimizelyoff param to the setup. The previous example will look like this in the original page:

$(function () {
    var fileRef = document.createElement('script');
        fileRef.setAttribute("type", "text/javascript");
        fileRef.setAttribute("src", "//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js");
        fileRef.setAttribute("data-publickey", "YOUR_USER_ID");
        fileRef.setAttribute("data-optimizely", "true");
        fileRef.setAttribute("data-optimizelyoff", "true");
    document.body.appendChild(fileRef);
});

Once this is done, you only need to register the events that you want to track:

  • Summary Play: register a new goal as usual and under events, select Custom Event, with this event to track: 'summary_play'.

  • Summary Click: register a new goal as usual and under events, select Custom Event, with this event to track: 'summary_click'.

  • Clicks: register a new click event. Make sure that the click event is assigned to the <a> element, no to the <img>. To verify this, please click on Advanced and make sure you're tracking the 'a', or 'a#yourlinkid'.

v0.1.6

Vilynx Recommendation

Get your recommendations

To start getting personalized recommendations from Vilynx you need to include the javascript below to enable the vilynx recommendation engine within your page framework. See below for more information about the code configuration.

<script src="//static.vilynx.com/vidrec/vidrec.{{vidrecVersion}}.min.js" publickey="youruserhash" onpluginload="handler.onPluginLoad" limit="5" ></script>
  • publickey="youruserhash" This is your user ID.

  • onpluginload="handler.onPluginLoad" Is the javascript function that will be called once the vidrec plugin is loaded. For more info, see integration examples

  • limit="5" The maximum number of recommendations to be returned.

If you need more help integrating the vilynx recommendation engine, send us an email to info@vilynx.com

Integration examples

There are a two ways you can integrate the recommendation plugin into your site:

  • JS Array response:

    Use the code below to enable the recommendation plugin, you'll get a Javascript array response which is a list of URLs and use it to display the content on your page.

    Example

    The Vilynx Recommendation Plugin works as follows: first, it fires the onPluginLoad event when the plugin is ready, which allows you to use the vilynxRecommendations object to obtain a list of recommendations calling the function vilynxRecommendations.get(). Once this function is completed, it fires the callback function passed as second parameter to the .get() call, where the recommendations can be retrieved. For example, if your callback function is onReturn(recs), the recommendations will be on the recs variable.
    The .get() function allow up to three parameters:

    The following example displays how to use these two events to manage the recommendations.

    
             var handler = {
         // handler.onPluginLoad will be passed to Vilynx recommendation script tag, and will be called once the vidrec plugin is ready
         onPluginLoad: function () {
             // This variable must contain a valid URL or a valid GUID
             var url = "example.com/sports/somearticle", options = {"limit": 5, "type":"video"};
             // Let's get some feedback
             console.info('Vilynx Recommendation plugin loaded');
    
             // Vilynx recommendation plugin will find all the recommendations for 'url' and will call handler.onRecomendations wen the recommendations are ready
             vilynxRecommendations.get(url, handler.onRecomendations, options);
         },
         // handler.onRecomendations will be called when the vilynxRecommendations.get call is done
         onRecomendations: function (recomendations) {
             // 'recomendations' will be a ordered array of recommended urls
             console.log(recomendations)
         }
     }
    
     // The vilynx recommendation plugin can be inserted with JS or can be on the DOM when the document load. But the onPluginLoad function must exist when the vidrec is loaded
     var vidrecScript = document.createElement("script");
    
     // onpluginload will be called when the vidrec plugin is successfully loaded.
     vidrecScript.setAttribute("onpluginload", "handler.onPluginLoad");
    
     // publickey is required to identify you as a vilynx user.
     vidrecScript.setAttribute("publickey", "youruserhash");
    
     // limit will be the the max number of recommendations.
     vidrecScript.setAttribute("limit", "5");
    
     vidrecScript.src = "//static.vilynx.com/vidrec/vidrec.{{vidrecVersion}}.min.js";
    
     var target = document.querySelector("body");
     target.appendChild(vidrecScript)
                                    
  • HTML response:

    Alternatively, you can utilize our recommendation plugin to get an HTML response that will display your thumbnails and content title. The code is completely responsive and displays as many thumbnails as it can, depending on the size of the parent container, whether it’s set horizontally or vertically. You can also choose to override the default size settings by defining a minimum width/height value.

    Example

    This version fires the onPluginLoad event when the plugin is ready, which allows you to use the vilynxRecommendations object. To obtain the full HTML of your recommendations call the function vilynxRecommendations.insert(). Once this function is completed, the recommendations will be inserted on the desired DOM object passed as a parameter to the .insert() call.

    The following example displays how to use these two events to manage the recommendations.

    
             var handler = {
         // handler.onPluginLoad will be passed to Vilynx recommendation script tag, and will be called once the vidrec plugin is ready
         onPluginLoad: function () {
             // This variable must contain a valid URL or a valid GUID
             var url = "example.com/sports/somearticle",
                 options = {"limit": 5, "type":"articles"};
    
             // Let's get some feedback
             console.info('Vilynx Recommendation plugin loaded');
    
             // Vilynx recommendation plugin will find all the recommendations for 'url' and will insert the recommenations into the `#recommendations` DOM element
             vilynxRecommendations.insert(url, '#recommendations', options);
         }
     }
    
     // The vilynx recommendation plugin can be inserted with JS or can be on the DOM when the document load. But the onPluginLoad function must exist when the vidrec is loaded
     var vidrecScript = document.createElement("script");
    
     // onpluginload will be called when the vidrec plugin is successfully loaded.
     vidrecScript.setAttribute("onpluginload", "handler.onPluginLoad");
    
     // publickey is required to identify you as a vilynx user.
     vidrecScript.setAttribute("publickey", "youruserhash");
    
     // limit will be the the max number of recommendations.
     vidrecScript.setAttribute("limit", "5");
    
     vidrecScript.src = "//static.vilynx.com/vidrec/vidrec.{{vidrecVersion}}.min.js";
    
     var target = document.querySelector("body");
     target.appendChild(vidrecScript)
                                    
Options

Several options can be passed through the script:

Name type default description
publickey string none Unique id to identify your Vilynx account
debug boolean false Print debug console logs
feedhash string none If a feed hash is given, only the recommendations obtained from that feed will be returned
onpluginload function none Is the script that will be called once the plugin is loaded
limit number 5 The the max number of recommendations returned by the script
retrieveguid boolean false If is set to true, the plugin will return GUID insead of URLS
urlfilterregex regex none Will filter all the urls that match the given regex
type string video The type of recommedations to get ('video,'articles','both')
v1.0.0

Vilynx Previews over TVos

Integration Instructions

Adding vilynx previews on tvOs is very simple and doesn't require any changes to your application's core code.

You’ll need to include the Vilynx TVJS script, enter your user key (which you can obtain from your User details in the Vilynx Dashboard) and add the vilynx_media parameter to your Media Content. Please refer to the following instructions for information on how to integrate Vilynx previews into your tvOS App.

  • Load the VilynxOTTScript

    Load the following script on your App.onLaunch function:

    An example of this can be seen here:
    
      App.onLaunch = function () {
        const vilynxOttScriptUrl = "https://static.vilynx.com/ott/tvOsVpg.1.0.0.min.js";
        var jsFilesArray = [vilynxOttScriptUrl];
    
        evaluateScripts(javascriptFiles, function (success) {
            if (success) {
                //All the script are injected
                vilynxGallery = new vilynxGallery();// Create a new vilynx gallery instance
                vilynxGallery.key = 'e685ff41322653a80f121a2957bc6d57'//Your user key
                var extension = "templates/main_template.xml"; //Get your TVML template
                getDocument(extension);
    
            } else {
                throw ("Playback Example: unable to evaluate scripts.");
            }
        });
    }
                            
  • Modify your TVML Layout

    The second step is to add the vilynx_media parameter to the media contents in which you want to enable the previews.
    Your mediaContent can be as you want, but it should contain at least the playbackMode="onFocus", the vilynx_media and include an image element.
    To do so, please follow this format on your TVML layout:

    
    <!--  Your TVML code -->
    <lockup>
        <mediaContent playbackMode="onFocus" vilynx_media="videoGUID or videoUrl">
            <img src="example.com/newsImage.jpg" width="250" height="141">
            <title>This is a title</title>
        </mediaContent>
    </lockup>
    <!-- More TVML code -->
                            

    Remember that you will have to pass the video url or GUID that identifies that video so that the API can understand which teaser to display.

  • Execute vilynxGallery.animateMedia()

    Finally, before inserting your TVML layout, you need to execute the following function:

    vilynxGallery.animateMedia(document);

    And that should be it. The VilynxGallery OTT plugin will take care of showing the teasers to animate your thumbnails!.

Integration examples

The following integration example should help you understand the three steps described above. If you need more help to integrate the OTT plugin send us an email to info@vilynx.com

On the next snippet, is a example of TVJS code for the integration


var vilynxGallery;

App.onLaunch = function () {
    const vilynxOttScriptUrl = "https://static.vilynx.com/ott/tvOsVpg.1.0.0.min.js";
    var jsFilesArray = [vilynxOttScriptUrl];

    evaluateScripts(javascriptFiles, function (success) {
        if (success) {
            //All the script are injected
            vilynxGallery = new vilynxGallery();// Create a new vilynx gallery instance
            vilynxGallery.key = 'e685ff41322653a80f121a2957bc6d57'//Your user key
            var extension = "templates/main_template.xml"; //Get your TVML template
            getDocument(extension);

        } else {
            throw ("Playback Example: unable to evaluate scripts.");
        }
    });
}

/* fetch a document page from a remote server */
function getDocument(extension) {
    var templateXHR = new XMLHttpRequest();
    var url = baseURL + extension;
    loadingTemplate();
    templateXHR.responseType = "document";
    templateXHR.addEventListener("load", function() {pushPage(templateXHR.responseXML);}, false);
    templateXHR.open("GET", url, true);
    templateXHR.send();
}

/* This function will inject a loaded xml doc into de main view */
function pushPage(document){
    var currentDoc = getActiveDocument();

    //Once the TVML is loaded and before injecting it into the page, we will let vilynx take control of all the media elements
    vilynxGallery.animateMedia(document);

    // Inject or replace
    if (currentDoc.getElementsByTagName("loadingTemplate").item(0) == null) {
        console.log("no loading");
        navigationDocument.pushDocument(document);

    } else {
        navigationDocument.replaceDocument(document, currentDoc);
        console.log("loading");
    }
}
                    
v1.0.0

Social Share

Share your amazing video previews in any social network smoothly.
Whether you are a developer using our products in your site or a community manager sharing your videos summaries this is your help guide.

Once you have videos uploaded to your Vilynx account you can share them by posting their auto-generated video previews. Let's see how:

Go to your Vilynx Dashboard, follow these steps:

In this menu you have two options available:

  • Download the summary

    You can download the video summary so you can upload it later to any social network you want. Use the link to get your summaries faster:

    https://www.vilynx.com/get_file.php?hash={{vilynx_id}}&url={{content_url}}&type=pro69.viwindow&format=mp4&token

    {{vilynx_id}} Vilynx owner ID. Example: 14ce449ceb70a3859bd19eb20c6823d8. You can get your owner ID by going to your Vilynx Dashboard and clicking on: Settings / Public Key

    {{content_url}} Link to your video content. Example: http://www.gridv.com/watch?v=Zoj2mJWlKUk.

  • Share through webapp

    If you want a quick share on the social networks listed just click on its icon.

    Dashboard

Contact Us

For more information about the integration of our products contact us: