Locking a video and offering a subscription or login option can be achieved by integrating Piano with your video player. This documentation provides instructions on how to implement video locking functionality using your video player and Piano API/JavaScript.
Step 1: Set Up Piano Integration
Before implementing video locking, make sure you have successfully integrated Piano with your website.
Step 2: Configure Video Player Integration
To enable video locking, you need to configure the respective video player. Review these steps:
-
Consult with the video player's support to ensure they can provide the necessary functionality for video locking, such as providing an event when a video timestamp is reached that can trigger the access check and show offer logic described below.
-
If available, implement video API calls in your website's codebase to track video playback progress and trigger events.
Step 3: Implement Video Locking Logic
Once the above is set up, you can implement the video-locking logic using Piano. Follow these steps:
-
Determine the point in the video where you want to lock it and display the offer. For example, after playing a certain duration or reaching a specific event.
-
In your website's codebase, listen for the video event that corresponds to the desired locking point (e.g., "timeupdate" event).
-
When the locking point is reached, make a call to the Piano API to check if the user has access to the video content. You can use the Piano methods here for user access checks.
-
If the user does not have access, trigger the display of an inline offer using the Piano JavaScript. Use the
tp.offer.show()method here and pass the necessary parameters, such as offer ID, template ID, and any additional data required. -
Configure the offer template to include options for purchasing a subscription or logging in. This can be customized based on your website's design and the available Piano templates.
-
If the user subscribes or logs in successfully, update the user's access rights to allow them to continue watching the video. You can do this by reloading the page.
-
If the user does not take any action or closes the offer, you can choose to either stop the video playback or continue playing it with limited functionality.