Discontinue playing videos embedded in iframes on Dailymotion

I'm currently working on creating a slider that includes videos from multiple providers, and I need to ensure that the videos stop when changing slides. So far, I've successfully implemented this feature for Vimeo and YouTube without making any additional API calls using the following code:

$('.youtube-iframe')[index].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');

$('.vimeo-iframe')[index].contentWindow.postMessage('{"method":"pause"}', '*');

However, I have been unable to find an example for Dailymotion on how to make iframes stop using their API.

Does anyone have any suggestions or ideas on how to achieve this with Dailymotion?

javascriptiframedailymotion-api

Answer №1

It appears that you are utilizing the pause method on Vimeo. Have you considered using the pause() method from the Dailymotion player API instead?
->

Answer №2

It appears that achieving this is indeed feasible. In order to make it work, the iframe must be loaded with &api=postMessage. Following that step, a DOM reference to the iframe needs to be obtained and the following code executed:

iframe.contentWindow.postMessage('play', '*');

Once these steps are completed, the functionality works as intended.

Answer №3

Here is the functional code snippet:

iframe.contentWindow.postMessage('{"action":"stop","args":[]}', "*");

This particular code segment is used within the vimeo-js-sdk .

Make sure to include the parameter api=postMessage in the iframe's src for it to work correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with undefined or null values when using ReactJS with Formik

Issue Resolved: It seems that Formik requires InitialValues to be passed even if they are not necessary. I'm currently working on a formik form in React, but every time I click the submit button, I encounter an error message stating "TypeError: Canno ...

javascriptnode.jsreactjsformik

transform JSON data into XML format with the help of JavaScript

I need help converting a JSON object to an XML String and I'm struggling to find the right method. I recently came across a jQuery plugin called json2xml on https://gist.github.com/c4milo/3738875 but unfortunately, it does not properly escape the data ...

javascriptxmljson

Steps for initiating a $.ajax POST request from a client to a server

Currently, I am working on a phonegap application where I need to transfer some data from an HTML file to a server and receive a response in return. Everything works fine when all the files are on the same server. However, once I separate the files between ...

phpjavascriptjqueryjquery-mobile

Google Maps displays grayscale overlays on the latest version update

Hello, I am facing a challenging issue with the Google Maps API. I have come across some similar threads discussing this problem, but unfortunately, they did not provide a solution that suits my specific case. Currently, I am working on an angular.js 1. ...

javascriptangulargoogle-mapsgoogle-maps-api-3

Tips for ensuring the drop down button remains selected

My goal is to keep the sorting drop-down button selected after clicking on it, instead of resetting back to "All". Below are my HTML, CSS, and jQuery code. You can view the functionality on my website here: jQuery/Javascript: $(document).ready(function($ ...

javascriptjquery

Can you explain the variance between using 'npm i' and 'npm install'?

Can you explain the distinction between running npm i and npm install? Both commands are used to install all node Modules listed in the package.json file. While the purpose of both commands is clear - to install modules, there may be subtle differences be ...

javascriptnpm

Having trouble loading JSON api data in React?

Recently, I've delved into the world of React and was assigned a task to fetch data from a JSON API and showcase it on the screen. Initially, everything went smoothly while practicing with this URL - https://jsonplaceholder.typicode.com/users. Howeve ...

javascriptjsonreactjsapi

Stop the upload progress in Angular 6 by unsubscribing from the upload observable, without halting the actual

When attempting to cancel an upload by unsubscribing, the unsubscribe action only stops the progress of the upload from being displayed, but the actual upload process continues and files are still uploaded to the server. This issue is present in the upload ...

javascriptangularobservable

Issues with Angular displaying filter incorrectly

Whenever a user chooses a tag, I want to show only the posts that have that specific tag. For instance, if a user selects the '#C#' tag, only posts with this tag should be displayed. This is how my system is set up: I have an array of blogs that ...

javascriptangulartypescript

What is the best way to remove table row data fetched from an API within a table?

Can someone assist me with deleting the table tr from the user table, where data is retrieved from an API? I have attempted the code below: $("principleTable").find("tr").hide(); $("#delAgentModal").modal("hide"); ...

javascriptjqueryhtmlcss

A guide on transferring data to an external JavaScript script that is asynchronously loaded

I came across this solution on Stack Overflow here to load JavaScript asynchronously. However, I am wondering how can I pass some data to the external file? This is my current code: <script id="js-widget-o2ba1y" type='text/javascript'> ...

javascriptasynchronous

Scroll positioning determines the height of an entity

Here's a code snippet I'm working with: HTML: <div id="wrap"> <div id="column"></div> </div> CSS: #wrap { display: block; height: 2000px; width: 400px } #column { display: block; height: 20px; ...

javascriptjqueryhtmlcss

Issue with Bcrypt comparison resulting in constant false output

Attempting to implement password verification using bcryptjs, const bcrypt = require('bcryptjs'); login(post){ this.uid = post.uid; this.pin = post.pin; this.getUser(this.uid); if(this.checkUser != undefined ...

javascriptbcrypt

Display validation messages when the user either clicks out of the textbox or finishes typing

Here are some validation messages: <form name="dnaform" novalidate> <div style="padding-bottom:5px" ng-show="dnaform.uEmail.$pristine || dnaform.uEmail.$valid">Active directory account </div> <div style="padding-bottom:5px;" n ...

javascripthtmlcssangularjs

Packages required for plugins on Npm

I am fairly new to NPM dependencies and I'm currently transitioning from the Ruby world. Working on a Chrome extension utilizing React, in my content.js script, I have the following code at the top: var React = require("react"); var $ = require("jqu ...

javascriptnpmreactjs

Adjust the burger menu color based on the background color of the section

Currently, I am working on creating a hamburger menu component with fixed positioning using the 'fixed' property. The menu icon consists of three white lines by default, but I want them to change to black when placed in a white section. I have tr ...

javascripthtmlcssreactjsnext.js

The issue with the $(window).width() property not functioning correctly in Internet Explorer

Currently, I have a Div element with absolute positioning: <div id="target" style="height: 300px; position: absolute; top: 275px;"></div> My goal is to calculate the horizontal resolution of the screen using JavaScript. With this width, I the ...

javascripthtmlasp.netcssinternet-explorer

Can mouseenter and mouseleave events be implemented in Chart.js?

Currently, I am using the onHover function on each pie to implement some scale/zoom effect. However, I would like to switch to using mouseenter and mouseleave. When there is a mouseenter event on a pie, it should enlarge with scale/zoom effect, and when th ...

javascriptjquerychartschart.jspie-chart

Creating a time-limited personal link with Django Rest Framework and React

I have a frontend application built with React Framework that I want to provide access to via a time-limited personal link, without the need for additional authentication functions. With approximately 1-2 new users per day, my proposed implementation is as ...

javascriptreactjsdjango-rest-frameworknext.js

When the Enter key is pressed while in an input element within a child component, it triggers a method that was originally defined in the parent component as well

In my application, there is a parent component that allows users to select skills from a list of options. Additionally, there is a child component where users have the ability to add their own skill if it is not available in the parent component. The chal ...

javascriptvue.jsvue-componentvue-events