DM-Video-Collection :

DM-Video-Collection is a javascript plugin to show video recommendations playlist outside of the player with PES - Player Embed Script and PLS - Player Library Script. It can be set as right( To set right position ) or bottom based on the position of the playlist. By default, it is set to bottom.

With PES :

This plugin works with player embed script.

Embed Example with videoId

<!-- PES script -->
<script src="https://geo.dailymotion.com/player.js" data-video="x8kgkea" id="player-id"></script>

<!-- DM-Video-Collection script -->
<script  
    src="https://staging.dmvs-apac.com/DM-Video-collection/video-collection.js" 
    data-pes-script-id="player-id"
    data-video-id="x8kgkea"
    data-owners="australiancommunitymedia"
    data-num-videos="10">
</script>

Embed Example with playlistId

<!-- PES script -->
<script src="https://geo.dailymotion.com/player.js" data-playlist="x887fk" id="player-id"></script>

<!-- DM-Video-Collection script -->
<script  
    src="https://staging.dmvs-apac.com/DM-Video-collection/video-collection.js" 
    data-pes-script-id="player-id"
    data-playlist-id="x887fk"
    data-owners="australiancommunitymedia"
    data-num-videos="10">
</script>

Attributes:

To pass the information for PES, use data-** attributes of the DM-Video-Collection script.

Attribute Type Description
data-pes-script-id
Mandatory		 string To pass DOM id of PES script
data-video-id string To add video id. This helps to fetch relevant videos from API.
data-playlist-id string To add playlist id.
data-tags string To add tags to fetch relevant videos from API. To put more than 1 you can separate by “,”
data-owners string The username of the channels from which relevant video will be fetched. To put more than 1, you can separate by “,”
data-num-videos number To set number of videos to fetch. By default, it is 7`
data-position bottom or right To set position of the video collection.

With PLS :

The plugin can work also for the Player Library Script.

Embed Example with videoId

<!-- PLS script -->
<script src="https://geo.dailymotion.com/libs/player.js"></script>
<!-- DM-Video-Collection script -->
<script src="https://staging.dmvs-apac.com/DM-Video-collection/video-collection.js" ></script>

<!-- Player holder -->
<div id="my-dailymotion-player">My Player placeholder</div>

<!-- createPlayer for PLS and event to render DM-Video-Collection -->
<script>
    dailymotion
    .createPlayer('my-dailymotion-player', {
        video: 'x8kgkea',
    })
    .then((player) => {
        document.dispatchEvent(new CustomEvent('dm-render-collection',{
            detail: {
                player : player,
                videoId: "x8kgkea",
                owners: "australiancommunitymedia",
                numOfVideos: 10
            }
        }));
    })
    .catch((e) => console.error(e));
</script>

Embed Example with playlistId

<!-- PLS script -->
<script src="https://geo.dailymotion.com/libs/player.js"></script>
<!-- DM-Video-Collection script -->
<script src="https://staging.dmvs-apac.com/DM-Video-collection/video-collection.js" ></script>

<!-- Player holder -->
<div id="my-dailymotion-player">My Player placeholder</div>

<!-- createPlayer for PLS and event to render DM-Video-Collection -->
<script>
    dailymotion
    .createPlayer('my-dailymotion-player', {
        playlist: 'x887fk',
    })
    .then((player) => {
        document.dispatchEvent(new CustomEvent('dm-render-collection',{
            detail: {
                player : player,
                playlistId: "x887fk",
                owners: "australiancommunitymedia",
                numOfVideos: 10
            }
        }));
    })
    .catch((e) => console.error(e));
</script>

Parameters:

To Pass the information for PLS, use the dm-render-collection event along with the below parameters.

Parameter Type Description
player Player Object To pass Player Object for PLS script
videoId string To add video id. This helps to fetch relevant videos from API.
playlistId string To add playlistId
tags string To add tags to fetch relevant videos from API. To put more than 1, you can separate by “,”
owners string The username of the channels from which relevant video will be fetched. To put more than 1, you can separate by “,”
numOfVideos number To set number videos to fetch. By default, it’s 7`
position buttom or right To set position of the video collection.

To set the right position:

As you can see in the above example of Video Collection for PLS, the video collection is set to the rigt position. Here are the required steps to implement it:

Embed Example :

<div class="`dm-collection-right-side">
    <!-- PES script -->
    <script src="https://geo.dailymotion.com/player.js" data-video="x8kgkea" id="player-id"></script>
</div>

<!-- DM-Video-Collection script -->
<script  
    src="https://staging.dmvs-apac.com/DM-Video-collection/video-collection.js" 
    data-pes-script-id="player-id"
    data-tags="viral"
    data-owners="australiancommunitymedia"
    data-num-videos="10"
    data-position="right"
    >
</script>

Relevant Video:

To fetch the relevant video from API DM-Video-Collection first checks the tags attribute( for PES ) or params( for PLS ). If tags are not given, the plugin gets tags with the given video id from API. Taking the first tag from the tags array the plugin fetches relevant videos.

Style Adjustment :

There are predefined CSS variables which can be adjusted to change the color of the playlist. Learn More

–dm-collection-bg : To change the video collection background color.

–dm-collection-color : To change the video collection’s font color.

–dm-collection-item-bg: To change the list item background color inside the video collection.

–dm-collection-active-item-bg: To change the active list item color inside the video collection.

This site is open source. Improve this page.