How to access a Dailymotion video using the JS API when the video ID is unknown?

Question

I have some embed code like:

<iframe id="video1" class="video" src=""//www.dailymotion.com/embed/video/VIDEO_ID?autoPlay=1&wmode=transparent&loop=1&controls=0&showinfo=0&api=1&endscreen-enable=0&mute=1" allowfullscreen="true" frameborder="0" width="560" height="349"></iframe>

I am trying to access this video using Javascript but the Video ID is not known in advance (it must be able to be set within our CMS and be changed by any editor). Also it is possible to have more than one video on the page. Hard-coding the video ID(s) in my .js file is not possible.

Using the Javascript API, I need to write a custom play/pause function (passing in the button object they clicked) and also to detect when the video has ended and re-start it (to imitate looping, which Dailymotion apparently does not support for some reason). But it seems a call to:

DM.Player(document.getElementById(iframeID), { video: VIDEO_ID})

requires the video's ID to be known (I do know the iFrame ID where the video is but apparently that isn't enough to access the player like it is for other video platforms).

I then need to be able to create a function to call play or pause based on whether the user has clicked the play/pause toggle on a specific video. My Javascript knowledge isn't great, but I have been able to do this with other platforms by knowing the iframe ID. The play/pause does work if I hard-code a video ID but only if there is one video on the page and only if I do not try to "loop" the video.

This is a private video, if that matters - we want it to only be viewed on our website and not on Dailymotion.

Pseudo-code greatly appreciated as I find their API documentation a bit incomplete for a newcomer (such as not specifying if parameters are required or optional, and not listing available options like for params and events during DM.Player initialization)

EDIT: Here is how I access the video API with other video hosting services (YouTube, Vimeo, Brightcove, etc)

I build an array of all HTML elements with a certain class name (recall there can be more than one video). Say the class name is ".video" so I build an array of all ".video" on the page and their corresponding HTML id. I then use document.getElementById to populate the array with the players.

Then in the play/pause click function, I can access the video like so:

var player = players[index];
var state = player.getPlayerState();
if (state == 1) {
     player.pauseVideo();
}
else {
     player.playVideo();
}

This does not work for Dailymotion because the actual DM Video ID (and not the HTML element's ID) must be known in advance. I was wondering if there is a way to access the video via the Javascript API without knowing the video ID?

I guess I'm not following. How else would you access the video without the video ID? What other data do you have? It's like asking "How do I telephone someone without using their phone number?" — johnh10
@johnh10 I have updated my question to explain how I am accessing videos without knowing the Video ID. As stated in my question, normally I only need the iFrame ID or HTML element ID (which I assign). I hope this helps. — user0474975

VC.One VC.One · Accepted Answer · 2017-09-07T23:59:22

I don't use DailyMotion API but I knocked up this experiment which might be useful to you.

See if the comments in my example code below help you to understand how to use your own buttons with JS functions and how to handle video "end" event etc.

<!DOCTYPE html>
<html>
<body>

<!-- 1. Load DailyMotion API (Javascript) -->
<script src='https://api.dmcdn.net/all.js'> </script>

<!-- 2. Create container for DM Player instance  -->
<div id='player'></div>

<!-- 3. Javascript stuff goes here -->
<script>

    //Set VIDEO_ID (retrieve or update from your CMS)
    //**example** var VIDEO_ID = get_video_id.php **where PHP returns/echo the text of ID**

    var VIDEO_ID = "xwr14q"; //update this via your CMS technique

    //Create DM Player instance//
    var player = DM.player(document.getElementById('player'), {
    video: VIDEO_ID,
    width: "100%", height: "100%",
    params: { autoplay: false, mute: true }


    });

    //Handle video ending (seek back to zero time)//
    player.addEventListener('end', function (evt) { evt.target.currentTime = 0; evt.target.play() } );

    //Control functions for DM Player instance//
    function func_Play()
    { player.play(); }

    function func_Pause()
    { player.pause(); }

</script>



<p>

<!-- Buttons for play pause -->
<button onclick="func_Play()"> PLAY </button>

<button onclick="func_Pause()"> PAUSE </button>

</p>

</body>
</html>

Also regarding

"...It is possible to have more than one video on the page"

Do some "experience quality" tests. Just be sure your users don't mind multiple looping videos running at once (eg: may slow your page / their browser, or drain their data allowance if on mobile, etc).

To handle multiple videos, I would just put each video player in it's own HTML page (like above shown code) and then in main page just load multiple iframes pointing to each player's HTML.

How to access a Dailymotion video using the JS API when the video ID is unknown?

1 Answers