Unlock
Search…
Locking media content
In this tutorial, we will see how to create a simple HTML and JavaScript page to lock media content (audio or video) so that only the creators' members can play it.
Unlock makes it easy for creators to monetize their work by only allowing their members to access some of their work. In this tutorial, we will see how to create a simple HTML and JavaScript page to lock media content (audio or video) so that only the creators' members can play it. Non-members will be able to see a small preview before being prompted to unlock the rest of the video.
Note: in this tutorial we take a front-end locking approach, which is not secure. Someone could tinker with the JavaScript console of their web browser and inspect the code to find a workaround. It is absolutely possible to build something secure, but that requires a back-end integration, considered more advanced. Additionaly, we believe only advanceds web users on a desktop computer would be able to circumvent the lock. Convenience trumps security.

Create a lock

The first step is to create a lock. For this, refer to that other article. Once the lock is deployed, keep track of its address and network as we'll use them next.

Create the web document

In this example, we want to lock up access to this video.
HTML5 actually makes it very easy to embed any video in a document. Here's what it takes:
1
<video controls>
2
<source src="https://ia801602.us.archive.org/11/items/Rick_Astley_Neve r_Gonna_Give_You_Up/Rick_Astley_Never_Gonna_Give_You_Up.mp4 type="video/mp4">
3
</video>
Copied!

Loading and configuring Unlock for the page

For any web page which includes a lock, we use the same approach. First, we load the Paywall script, and then, we set the configuration for it.
1
<script>
2
(function(d, s) {
3
var js = d.createElement(s),
4
sc = d.getElementsByTagName(s)[0];
5
js.src="https://paywall.unlock-protocol.com/static/unlock.latest.min.js";
6
sc.parentNode.insertBefore(js, sc); }(document, "script"));
7
8
// Check this page for details https://docs.unlock-protocol.com/developers/paywall/configuring-checkout
9
var unlockProtocolConfig = {
10
network: 4,
11
locks: {
12
'0x61e9210b61C254b28cc7Aea472E496339D2D3265': {
13
network: 4,
14
name: 'Rick\'s membership'
15
}
16
},
17
callToAction: {
18
"default": "Become a member to access the rest of the video!"
19
},
20
pessimistic: true
21
}
22
</script>
23
Copied!

Locking the video

JavaScript provides us with an API to control the video. We can use that to lock its access. The following sample provides details of how this can work. Note there are multiple ways of doing this: feel free to tinker around!
1
<script>
2
(function() {
3
// Set a few default variables.
4
let isUnlocked = true;
5
const previewTime = 30;
6
7
window.addEventListener('unlockProtocol.status', function(e) {
8
var unlock = e.detail
9
isUnlocked = (unlock.state === 'unlocked')
10
// Optional: call video.play() to resume the video!
11
})
12
13
14
// This assumes there is a single video on the page. Otherwise use class selectors.
15
const video = document.querySelector('video');
16
video.addEventListener('timeupdate', (event) => {
17
// This event gets triggered every time there is an update in the current time.
18
// If the video is locked and the time is above previewTime seconds
19
if (!isUnlocked && video.currentTime > previewTime) {
20
// We stop the video go back to previewTime and pause the video
21
video.currentTime = previewTime
22
video.pause()
23
// We ask the user to get a membership by loading the checkout UI
24
unlockProtocol.loadCheckoutModal()
25
}
26
})
27
})();
28
</script>
29
30
Copied!
After this, you are all done!
Last modified 1mo ago