JSFiddle - React, Tailwind, and code Playground

by CYRIL MOREAU

HTML

<h1>Dailymotion CPE Autonext disable</h1>

<h2>Player with no-autonext / no-queue</h2>

<!-- class dailymotion-cpe is mandatory -->
<div class="dailymotion-cpe" video-id="k3FQ2Ds1URnCHNqX2Oq" no-autonext no-queue></div>

<button id="cpe-go-to-end">Go to end</button>

<h2>Normal player</h2>

<div class="dailymotion-cpe" video-id="k3FQ2Ds1URnCHNqX2Oq"></div>
<!-- Embed the CPE Script in the bottom of the page with your CPE ID, instead of "5bbdbfb3452b010010aabb86" -->
<script>
(function(w,d,s,u,n,i,f,g,e,c){w.WDMObject=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments);};w[n].l=1*new Date();w[n].i=i;w[n].f=f;w[n].g=g;e=d.createElement(s);e.async=1;e.src=u;c=d.getElementsByTagName(s)[0];c.parentNode.insertBefore(e,c);})(window,document,"script","//api-stage.dmcdn.net/pxl/cpe/client.min.js","cpe","5bcee562452b01000daabb9f");
</script>

CSS

button {
  width: 200px;
  height: 100px;
  margin-top: 20px;
  background-color: #ffcc33;
}

JavaScript

window.addEventListener('cpeready', ({ detail: { players } }) => {
  var player1 = players[0]
  
  document.querySelector('#cpe-go-to-end').onclick = () => {
    player1.seek(Math.ceil(player1.duration) - 3)
  }
})