October 4, 2018

|

Player API

UWP how to call JavaScript methods on a WebView using the Dailymotion player

You don’t like SDKs? You prefer to write your own code? You wish to use the Dailymotion player on a UWP application? If the answer is yes you are in the right place, if the answer is no then this post will give you some insight on how to use a WebView on UWP application.

Setup : init()

First we are going to create a simple WebView property:

public WebView DmVideoPlayer { get ; set; }

In our Init() method we will instantiate the WebView:

//init our webview
DmVideoPlayer = new WebView();

//Receiving the events the player is sending
 DmVideoPlayer.ScriptNotify += DmWebView_ScriptNotify;

//creating http request message to send to the webview
 HttpRequestMessage request = NewRequest(withParameters);

//doing http call on webview
 DmVideoPlayer.NavigateWithHttpRequestMessage(request); 

To simplify our life, we will init the WebView with this url: https://www.dailymotion.com/embed/?controls=1&autoplay=1 If you put this URL in your favorite browser (Edge, Chrome, or Firefox) and launch the developement tools, go to the console, type the following code and your favorite (or is it just mine?) artiste will start playing.

 player.load(“x5s90td”)

Playing the Dailymotion HTML5 Player

Take out your favorite browser and open the console, launch the following url: https://www.dailymotion.com/embed/?controls=1&autoplay=1 The video “should” NOT start =). In the console type:

 player.api(‘play’)

This will play the video, next lets type in:

player.api(‘pause’)

This will pause the video. Here is a screenshot taken from Chrome:

Playing with the WebView

We are going to reproduce the same thing with our WebView, as you saw above, we need to connect to the event ScriptNotify to listen to what the player is telling us. Imagine that you are trying to start a video, but the player has not loaded. First, we are going to wait for an event called apiready. Once we have received this event, we can now start calling methods on the player. Above we handled the ScriptNotify events fired by the player:

DmVideoPlayer.ScriptNotify += DmWebView_ScriptNotify;

Here is the rest of the method:

///
/// Handles the events fired from the Webview and passes the information on
/// 

private void DmWebView_ScriptNotify(object sender, NotifyEventArgs e) 
{ 
       //events fired by the player 
       Debug.WriteLine(e?.Value); 
}

I will not go into details on how to split the string that we received, if you wish to have more info on this, please have a look at the github repository for the UWP Dailymotion SDK. Next, we will use the WebView and its InvokeScriptAsync method (more info here).

InvokeScriptAsync:

Executes the specified script function from the currently loaded HTML, with specific arguments, as an asynchronous action.

public IAsyncOperation<string> InvokeScriptAsync(String scriptName, IEnumerable<String> arguments)

player.load(“x5s90td”) 

If we wanted to seek forward, we could send the following command:

player.seek(30) 

If we wished to play the video:

player.api('play')
//or
player.play() 

If we wished to pause the video:

player.api('pause')
//or
player.pause() 

You can find all the commands our player supports in our developer portal.

We would like to remind you that using the SDKs that we are providing is a much better solution then trying to build your own SDKs.