This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

preface

Recently, when I was making requirements, I met the situation that I needed to take screenshots in xgPlayer watermelon player. Specifically, I needed to realize a button that could be clicked to take screenshots of the current page.

The official method only has an extra button at the bottom of the player, which will be described below.

Requirements and implementation

The specific requirement is that I need to implement a button outside the player to call the screenshot function of the player and get the captured picture.

Xgplayer provides screenshot methods

ScreenShot method is to add the screenShot parameter in the new Player, this parameter can be set to a value of saveImg, the default is true, is to click on the screenShot to save the image, do not want to save the image to set the value to false.

Get the data of the picture

Xgplayer gives us only one paragraph about how to take screenshots

Then you have to go back to the source code level to see how it works. First I did a screenShot from the issues section to see if anyone had mentioned this before and I found a screenShot of issues:

As mentioned above, you can disable downloads by setting the saveImg value, and one important point:

player.on('screenShot'.screenShotImg= > {})
Copy the code

In player, you can subscribe to events related to screenshots and return a parameter. Through browser practice, we find that the returned parameter is the image we want:

For now, however, we can only use the official buttons to implement screenshots. The next step is to define a method to call the screenshots event.

Defining screenshot methods

By reading the source code we can find:

ScreenShot is a screenShot method that is mounted on the player and passes in a default parameter save=true which defines the screenShot saved from the screen as true by default.

Then we can see that the player calls the screenShotBtnClick method by listening for the screenShotBtnClick event, so we can issue a click event on the acquired Player to call this listener event.

 function getScreenShot() {
      player.emit("screenShotBtnClick");
 } 
Copy the code

Then all we need to do is call this function and we can take the screenshot. You can bind this function to an element and click on the external element to take a screenshot. Here I define a random button to experiment:

<div class="aaa">screenshots</div>
Copy the code
 let aaa = document.querySelector(".aaa");
 aaa.addEventListener("click",getScreenShot);
Copy the code

This button successfully retrieves images and data.

conclusion

Specific about the button source method is used to release subscription to a knowledge of the specific as long as the learned friend after they see on, should also think of this one train of thought, about to release a subscription model used in most of the scene is very frequent, specific don’t know the friend can read my another article.