I'm trying to embed a Dailymotion video (not my own) in a way that has access to Dailymotion's new 2021 Platform API and that will NOT autoplay when loaded.
<script src="https://geo.dailymotion.com/libs/player.js"></script>
<div id="video"></div>
<script>
dailymotion
.createPlayer('video', {
video: 'x7tgad0',
params: {
startTime: 0
},
})
.then((player) => {
//log player object to console
console.log({player});
//add listener to timechange event from the Dailymotion Platform API
player.on(dailymotion.events.VIDEO_TIMECHANGE, (state) => console.log(state.videoTime));
});
</script>
JSFiddle here: https://jsfiddle.net/Esn024/egrLb1tc/12/
The above code transforms <div id="video"></div> into:
<div id="video" class="dailymotion-player-root dailymotion-player-default" style="background: rgb(13, 13, 13); padding-bottom: 75%; position: relative;">
<div class="dailymotion-player-wrapper" style="height: 100%; overflow: hidden; position: absolute; width: 100%; margin: 1e-05px;">
<iframe allow="autoplay; fullscreen; picture-in-picture; web-share" class="dailymotion-player" frameborder="0" src="https://geo.dailymotion.com/player.html?video=x7tgad0&startTime=0" title="Dailymotion video player" height="100%" width="100%" style="opacity: 1;"></iframe>
</div>
</div>
It adds an embedded Dailymotion video that autoplays by default (note: as I discovered, it won't autoplay if the above code is saved into a .html file and opened by double-clicking it, probably because browsers behave differently with files opened from the file system, but it WILL autoplay if the same .html file is opened in a server).
I thought that maybe I could stop it from autoplaying if I removed the "autoplay" from the iframe's "allow" attribute, based on this StackOverflow question from 6 years ago about their old API, so I added the following code into the .then() block:
const iframeNode = player.getRootNode().childNodes[0].childNodes[0];
iframeNode.setAttribute("allow", "fullscreen; picture-in-picture; web-share");
iframeNode.replaceWith(iframeNode);
console.log({iframeNode});
The "allow" attribute was modified to remove "autoplay" and the video reloaded, but it still autoplayed.
I also tried modifying the autostart attribute in the player's settings from firstTimeViewable to off, but that didn't work either (at least not in the way I tried to do it below, and I couldn't figure out any other way to change the setting):
player._do_not_use_e5dbad3203d413f04bf4.settings.autostart = 'off';
I suppose this agrees with the official docs, which say that some of the player settings cannot be changed at runtime: "A Player configuration is composed of several settings that can't be modified or overridden at run time. These settings can only be updated via the Player configurator in the Dailymotion Studio or the Platform API."
Certain other settings have methods within the player object to change them after the fact, such as setAspectRatio, setVolume and some others - but there's no setAutoplay/setAutostart.
Dailymotion introduced their new player embed system in 2021, but the old API kept working until maybe a month ago. The migration guide seems to say that autoplay has 3 settings - "on", "off", "firstTimeViewable", which can be set from "Dailymotion Studio" (which I think is only available to those with paid accounts). Their online guides, as far as I can tell, seem to assume that anyone embedding videos has a paid Dailymotion account and will only embed videos from their own channel - e.g. see their Getting Started with Web SDK page which directs users to "create a custom Player configuration associated with your Dailymotion account and identified by a unique Player ID". But it seems that it's not actually mandatory since the docs also say "If the Player ID is incorrectly specified or does no longer exist the configuration will fall back to a default library configuration."
The temporary solution I have settled on right now is to pause the video the first time it starts playing (see below), but I'd like to find a way to not have the video start loading at all until clicked:
<script src="https://geo.dailymotion.com/libs/player.js"></script>
<div id="video"></div>
<script>
let pausePlayer = true;
dailymotion
.createPlayer('video', {
video: 'x7tgad0',
params: {
startTime: 0
},
})
.then((player) => {
//log player object to console
console.log({player});
//add listener to timechange event from the Dailymotion Platform API
player.on(dailymotion.events.VIDEO_TIMECHANGE, (state) => {
if (pausePlayer) {
player.pause();
pausePlayer = false;
}
console.log(state.videoTime);
});
});
