JavaScript Control for Embedding Facebook Videos (Start / Stop)

I need assistance on how to correctly utilize this API with the code provided in the following URL:

https://developers.facebook.com/docs/plugins/embedded-video-player/api/#control-reference

https://i.sstatic.net/jQQeN.png

window.fbAsyncInit = function() {
                        FB.init({
                          appId      : '17xxxxxxxxxx',
                          xfbml      : true,
                          version    : 'v3.5'
                        });

                    var ssp_video_player;
                    var time = jQuery(this).attr("time");


                    FB.Event.subscribe('xfbml.ready', function(msg) {
                      if (msg.type === 'video') {
                        ssp_video_player = msg.instance;
                      }
                      ssp_video_player.seek(600);

                    });

                };

Upon loading the page, the video skip/seek functionality works, but once fully loaded, I am unable to control the player using variables like the one below:

ssp_video_player.play(); or 
ssp_video_player.pause(); etc.

Is there another method that would allow me to control the Facebook video player?

Answer №1

If you are encountering difficulties controlling the ssp_video_player outside of the function, it may be due to its local definition. To address this issue, consider declaring ssp_video_player outside of the function. Additionally, ensure that you are not attempting to access the play/pause functionality before the asynchronous function has been executed and the value of ssp_video_player has been assigned.

var ssp_video_player;
window.fbAsyncInit = function() {
    FB.init({
       appId      : '17xxxxxxxxxx',
       xfbml      : true,
       version    : 'v3.5'
    });

    var time = jQuery(this).attr("time");

    FB.Event.subscribe('xfbml.ready', function(msg) {
        if (msg.type === 'video') {
            ssp_video_player = msg.instance;
        }
        ssp_video_player.seek(600);
     });
};

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

Tips for preventing conflicts between variables and functions in JavaScript (no need for a jQuery plugin)

How can I prevent variable and function conflicts in Javascript without relying on jQuery plugins? I am interested in creating my own functions but want to avoid conflicts. I believe using function scope, where functions are used solely for the purpose of ...

You can't retrieve a JSON object using Javascript

Every time I execute the javascript/php code below, I encounter an issue where I keep receiving "undefined" when trying to alert the 'userid' property of the json object. However, if I turn the json object into a string using stringify(), it corr ...

Transferring data between modules in nodejs

Within my custom module, there is a method designed to query the database and check if a given username exists. I need certain values to be returned in order to determine the query result at a higher level. var findUserbyUsername=function(username) { ...

Full-Screen Popup Overlayaptic

Is it possible to create a popup that covers the entire browser window, including the search bar and other windows besides just the webpage area, for a very large interactive element? ...

Different JavaScript entities with identical attributes (labels)

Even though JavaScript doesn't have tangible objects, I'm struggling to differentiate between them. Let's say we have two objects called Apple and Orange defined as follows: function Apple(){ this.name = "Apple"; } and function Orang ...

What is the process for installing Angular version 1.1.5 using npm?

I have attempted: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e0efe6f4ede0f3c1b0afb0afb4">[email protected]</a> However, I encountered an error: npm ERR! Error: version not found: 1.1.5 : angul ...

Prevent alert box from closing automatically without clicking the ok button in ASP.NET

I'm creating a project in ASP.NET where I need to display an alert box and then redirect to another page. Below is my code: var s = Convert.ToInt32(Session["id"].ToString()); var q = (from p in db.students where p.userid == s ...

Utilize JSON data from a URL to create a visually appealing bar graph for

I have a source of JSON data stored in a live URL (for example: http://localhost/icx/test/link.html), which updates over time. [{ "call_time": "0", "total_inc_traffic": "1363.10", "total_out_traffic": "88.70" }, { " ...

What is the process for inserting an SVG object into an HTML document?

Currently, I am experimenting with d3.js examples to create visual graphs. Here is the link for reference. Below is the snippet where I've implemented the LineChart function to construct the graph, with Django as the backend. {% load static %} < ...

When attempting to open a .pdf file in a new tab using React and Express, a void message appears on the screen

I have a situation where I am attempting to open a .pdf file in a new tab from the server's file system using Express, React, and MySQL. The problem arises when, upon clicking the "See" button, the displayCV function is triggered, a new tab opens, but ...

Adding extra information to a property or array in Firebase

The following code snippet demonstrates how to create an array of event objects using observables. eventsRef: AngularFireList<any>; events: Observable<any>; this.eventsRef = db.list('events'); this.events = this.eventsRef.snapshotC ...

Converting a string to a JSON array with Jackson in RESTful APIs

As I delve into the world of JSON and REST, I find myself testing a REST API that returns strings in the following format: [{ "Supervisor_UniqueName": "adavis", "Active": "true", "DefaultCurrency_UniqueName": "USD", "arches_type": "x-zensa ...

Guide to dynamically generating checkboxes or multi-select options in ASP.NET MVC 4

Within this project, we have implemented two separate lists - one for the dealer and another for their products. Currently, when selecting a specific dealer, all associated products are returned using JavaScript (Json). Utilizing Html 5: @using (Html.Be ...

The JSON information is not appearing as expected in a table that was created using JavaScript

Within my JavaScript code, I have a variable that holds data from PHP like this: var myData = <?php echo json_encode($json_array) ?>; I am attempting to populate a dynamically generated table with the keys and values from this object. However, whe ...

Using jQuery AJAX to send data containing symbols

When making an AJAX call, I am including multiple values in the data like this: var postData = "aid="+aid+"&lid="+lid+"&token="+token+"&count="+count+"&license="+license; postData = postData + "&category="+category+"&event_name="+e ...

Navigating over two JSON arrays using Ajax

My goal is to fetch data from a JSON file by utilizing the ID obtained from a previous AJAX call and looping through the second array based on the retrieved ID. I have attempted to achieve this with the following code: $(document).on('click', ...

Why is the count's answer 88?

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </head> <body> <div ng-app="myApp" ng-controller="personCtrl">{{count ...

Is there a way to retrieve the central anchor point position (x, y) of the user's selection in relation to the document or window?

Is there a way to retrieve the center anchor point position (x, y) of the user's selection relative to the document or window? I have tried using window.getSelection() to get selected nodes, but I am unsure how to obtain their position: See an examp ...

"Troubleshooting a CSS problem with off-canvas layouts

I've created a page with divs that create a parallax effect on scrolling, you can view the demo here. However, I encountered an issue when adding a Foundations off-canvas menu - it prevents me from being able to scroll down. How can I resolve this an ...

Payload bytes do not match the expected byte values

I am facing an issue where the image data sent by the user is getting saved on the server in a corrupt state. Here is the structure of my setup: - api . index.js - methods . users.js (I have omitted unrelated files) There is a server.js outside ...