Video and content recommendations

Delight VR can display related content in 2D as well as VR. This allows for a very convenient user experience as users can jump from one content to another without leaving the experience. You can either add contents statically via HTML markup or dynamically through a Javascript hook. As of now related content can either be a <dl8-video>, <dl8-cinema>, <dl8-live-video> or an <dl8-external-content> element that opens a new URL and can optionally autostart Delight VR on this URL. This enables further use cases like placing ad banners inside the related content widget or redirection of users to other sites with Delight VR content.

The feature can be included by adding the <dl8-recommendation> element inside the <dl8-video>, <dl8-cinema> or <dl8-live-video> element. The <dl8-recommendation> has the following parameters:

Specifies the text that is shown above the recommendations in VR to give the related items that are displayed a bit more context. For example if you host a video portal and want to display videos that are related to the current video you could write title=“Related videos” to make it clear for the users that the next clips are videos and related. The default value is “Recommendations”

This indicates the mode on how recommendations are going to be fetched. There is a “static” and a “dynamic” mode. The default is “dynamic”.
In “static” mode simply add <dl8-video> or <dl8-external-content> elements as children to the <dl8-recommendation> element like so:

 <dl8-video ...> 
    <source .../>
    <dl8-recommendation mode="static">
        <dl8-video 
          format="STEREO_360_TB" 
          title="Related Video 1" 
          poster="p1.jpg"
        >
            <source …/>
        </dl8-video>
        <dl8-external-content
          title="Related Content 2"
          poster="p2.jpg"
          url="http://somedomain.com/related"
          autostart
        ></dl8-external-content>
    </dl8-recommendation>
 </dl8-video>

In “dynamic” mode new recommendations are dynamically queried via a Javascript hook that is user defined. This enables you to implement your own recommendation logic based on the current content. To implement dynamic recommendations just add the following parameter:

This function will be called whenever the player needs to be fetched from the server. Through the given arguments you can formulate queries to your own server that then can respond with a set of recommendations. On server response you can create an array of contents (either dl8-video or dl8-external-content) that adhere to the Delight VR json spec and pass them as an argument to the recommendationCallback function. A complete example could look like this:

 <script> 
    // The requestRecommendations function could be named anything and could reside anywhere. 
    // The DVR.requestRecommendations is just an example.
    window.DVR = {
        requestRecommendations: function(id, count, recommendationCallback) {
            // pseudo code
            requestDataFromServer(id, count).then(res => {
                var recommendations = createDelightVRJsonSpecFromResponse(res)
                recommendationCallback(recommendations)
            })
        }
    }
 </script>

 <dl8-video ...> 
    <source .../>
    <dl8-recommendation 
      mode="dynamic"
      request-id="example-id-1"
      on-request-content="DVR.requestRecommendations(id, count, recommendationCallback)"
    >
    </dl8-recommendation>
 </dl8-video>

You can set the autoplay and hidden attribute to create a recommendation playlist. When the autoplay attribute is provided, the player automatically starts the first recommendation after the video has ended. If you enable hidden, the recommendation interface is hidden from the user. It is best used in conjunction with autoplay to create a hidden playlist.

 <dl8-video ...> 
    <source .../>
    <dl8-recommendation mode="static" autoplay hidden>
        <dl8-video 
          format="STEREO_360_TB" 
          title="Related Video 1" 
          poster="p1.jpg"
        >
            <source …/>
        </dl8-video>
        <dl8-external-content
          title="Related Content 2"
          poster="p2.jpg"
          url="http://somedomain.com/related"
          autostart
        ></dl8-external-content>
    </dl8-recommendation>
 </dl8-video>