Create Custom Video Player Controls with CanJS
In this guide, you will learn how to create a custom video player using the <video> element and CanJS. The
custom video player will:
- Have custom play and pause buttons.
- Show the current time and duration of the video.
- Have a
<input type="range">slider that can adjust the position of the video.
The final player looks like:
The following sections are broken down into the following parts:
- The problem — A description of what the section is trying to accomplish.
- What you need to know — Browser or CanJS APIs that are useful for solving the problem.
- The solution — The solution to the problem.
Setup
START THIS TUTORIAL BY Forking THE FOLLOWING CodePen:
Click the
Edit in CodePenbutton. The CodePen will open in a new window. Click theForkbutton.
This CodePen:
- Creates a
<video>element that loads a video. Right click and select “Show controls” to see the video’s controls. - Loads CanJS's custom element library: Component.
The problem
In this section, we will:
Create a custom
<video-player>element that takes asrcattribute and creates a<video>element within itself. We should be able to create the video like:<video-player src:raw="http://bit.ly/can-tom-n-jerry"> </video-player>
The embedded
<video>element should have the native controls enabled.
When complete, the result will look exactly the same as the player when you started. The
only difference is that we will be using a custom <video-player> element in the HTML
tab instead of the native <video> element.
What you need to know
To set up a basic CanJS application (or widget), you define a custom element in JavaScript and
use the custom element in your page’s HTML.
To define a custom element, extend Component with a tag that matches the name of your custom element. For example:
Component.extend({
tag: "video-player"
})
Then you can use this tag in your HTML page:
<video-player></video-player>
But this doesn’t do anything ... yet. Components add their own HTML through their view property:
Component.extend({
tag: "video-player",
view: `<h2>I am a player!</h2>`
});
A component’s view is rendered with its ViewModel. For example, we can make a <video> display "http://bit.ly/can-tom-n-jerry" by defining a src property on the ViewModel and using it in the view like:
Component.extend({
tag: "video-player",
view: `
<video>
<source src="{{src}}"/>
</video>
`,
ViewModel: {
src: {type: "string", default: "http://bit.ly/can-tom-n-jerry"}
}
});
But we want the <video-player> to take a src attribute value itself and use that for the
<source>’s src. For example, if
we wanted the video to play "http://dl3.webmfiles.org/big-buck-bunny_trailer.webm" instead of "http://bit.ly/can-tom-n-jerry", we would:
- Update
<video-player>to pass"http://dl3.webmfiles.org/big-buck-bunny_trailer.webm"with toChild:raw:<video-player src:raw="http://dl3.webmfiles.org/big-buck-bunny_trailer.webm"/>
- Update the ViewModel to define a
srcproperty like:Component.extend({ tag: "video-player", view: ` <video> <source src="{{src}}"/> {{!👀}} </video> `, ViewModel: { src: "string" } });
Finally, to have a <video> element show the native controls, add a controls
attribute like:
<video controls>
The solution
Update the JS tab to:
import {Component} from "//unpkg.com/can@5/core.mjs";
Component.extend({ //👀
tag: "video-player", //👀
view: ` {{!👀}}
<video controls> {{!👀}}
<source src="{{src}}"/> {{!👀}}
</video> {{!👀}}
`, //👀
ViewModel: { //👀
src: "string", //👀
} //👀
}); //👀
Update the HTML to:
<video-player src:raw="http://bit.ly/can-tom-n-jerry"></video-player> <!--👀-->
Make play / pause button change as video is played and paused
The problem
When the video is played or paused using the native controls, we want to change the content of a <button>
to say “Play” or “Pause”.
When the video is played, the button should say “Pause”. When the video is paused, the button should say “Play”.
We want the button to be within a <div> after the video element like:
</video>
<div>
<button>Play</button>
</div>
What you need to know
To change the HTML content of the page, use {{#if(expression)}} and {{else}} like:
<button>{{#if(playing)}} Pause {{else}} Play {{/if}}</button>The view responds to values in the ViewModel. To create a
booleanvalue in the ViewModel do:ViewModel: { // ... playing: "boolean", }Methods can be used to change the ViewModel. The following might create methods that change the
playingvalue:ViewModel: { // ... play() { this.playing = true; }, pause() { this.playing = false; }, }You can listen to events on the DOM with on:event. For example, the following might listen to a click on a
<div>and calldoSomething():<div on:click="doSomething()">
<video>elements have a variety of useful events, including play and pause events that are emitted when the video is played or paused.
The solution
Update the JavaScript tab to:
import {Component} from "//unpkg.com/can@5/core.mjs";
Component.extend({
tag: "video-player",
view: `
<video controls
on:play="play()" {{!👀}}
on:pause="pause()"> {{!👀}}
<source src="{{src}}"/>
</video>
<div> {{!👀}}
<button> {{!👀}}
{{#if(playing)}} Pause {{else}} Play {{/if}} {{!👀}}
</button> {{!👀}}
</div> {{!👀}}
`,
ViewModel: {
src: "string",
playing: "boolean", //👀
play() { //👀
this.playing = true; //👀
}, //👀
pause() { //👀
this.playing = false; //👀
}, //👀
}
});
Make clicking the play/pause button play or pause the video
The problem
When the play/pause <button> we created in the previous section is clicked, we want to
either play or pause the video.
What you need to know
CanJS prefers to manage the state of your application in ViewModel. The <video> player has state, such as
if the video is playing. When the play/pause button is clicked, we want to update the state
of the ViewModel and have the ViewModel update the state of the video player as a side effect.
What this means is that instead of something like:
togglePlay() {
if ( videoElement.paused ) {
videoElement.play()
} else {
videoElement.pause()
}
}
We update the state like:
togglePlay() {
this.playing = !this.playing;
}
And listen to when playing changes and update the video element like:
viewModel.listenTo("playing", function(event, isPlaying) {
if ( isPlaying ) {
videoElement.play()
} else {
videoElement.pause()
}
})
This means that you need to:
- Listen to when the
<button>is clicked and call a ViewModel method that updates theplayingstate. - Listen to when the
playingstate changes and update the state of the<video>element.
You already know everything you need to know for step #1. (Have the button call a togglePlay method with on:click="togglePlay()" and make the togglePlay() method toggle the state of the playing property.)
For step #2, you need to use the connectedCallback lifecycle hook. This hook gives you access to the component’s element and is a good place to do side-effects. Its use looks like this:
ViewModel: {
// ...
connectedCallback(element) {
// perform mischief
}
}
connectedCallback gets called once the component’s element is in the page. You can use
listenTo to listen to changes in the ViewModel’s properties and
perform side-effects. The following listens to when playing changes:
ViewModel: {
// ...
connectedCallback(element) {
this.listenTo("playing", function(event, isPlaying) {
})
}
}
Use querySelector to get the <video> element from the <video-player> like:
element.querySelector("video")
<video> elements have a .play() and .pause() methods that can start and stop a video.
The solution
Update the JavaScript tab to:
import {Component} from "//unpkg.com/can@5/core.mjs";
Component.extend({
tag: "video-player",
view: `
<video controls
on:play="play()"
on:pause="pause()">
<source src="{{src}}"/>
</video>
<div>
<button on:click="togglePlay()"> {{!👀}}
{{#if(playing)}} Pause {{else}} Play {{/if}}
</button>
</div>
`,
ViewModel: {
src: "string",
playing: "boolean",
play() {
this.playing = true;
},
pause() {
this.playing = false;
},
togglePlay() { //👀
this.playing = !this.playing; //👀
}, //👀
connectedCallback(element) { //👀
this.listenTo("playing", function(event, isPlaying) { //👀
if (isPlaying) { //👀
element.querySelector("video").play(); //👀
} else { //👀
element.querySelector("video").pause(); //👀
} //👀
}); //👀
} //👀
}
});
Show current time and duration
The problem
Show the current time and duration of the video element. The time and duration should be
formatted like: mm:SS. They should be presented within two spans like:
</button> <span>1:22</span> <span>2:45</span>
What you need to know
Methods can be used to format values in can-stache. For example, you can uppercase values like this:
<span>{{upper(value)}}</span>With a method like:
ViewModel: { // ... upper(value) { return value.toString().toUpperCase(); } }The following can be used to format time:
formatTime(time) { if (time === null || time === undefined) { return "--"; } const minutes = Math.floor(time / 60); let seconds = Math.floor(time - minutes * 60); if (seconds < 10) { seconds = "0" + seconds; } return minutes + ":" + seconds; }Time is given as a number. Use the following to create a number property on the ViewModel:
ViewModel: { // ... duration: "number", currentTime: "number" }<video>elements emit a loadmetadata event when they know how long the video is. They also emit a timeupdate event when the video’s current play position changes.videoElement.durationreads the duration of a video.videoElement.currentTimereads the current play position of a video.
You can get the element in an stache
on:eventbinding with scope.element like:<video on:timeupdate="updateTimes(scope.element)"/>
The solution
Update the JavaScript tab to:
import {Component} from "//unpkg.com/can@5/core.mjs";
Component.extend({
tag: "video-player",
view: `
<video controls
on:play="play()"
on:pause="pause()"
on:timeupdate="updateTimes(scope.element)" {{!👀}}
on:loadedmetadata="updateTimes(scope.element)"> {{!👀}}
<source src="{{src}}"/>
</video>
<div>
<button on:click="togglePlay()">
{{#if(playing)}} Pause {{else}} Play {{/if}}
</button>
<span>{{formatTime(currentTime)}}</span> / {{!👀}}
<span>{{formatTime(duration)}} </span> {{!👀}}
</div>
`,
ViewModel: {
src: "string",
playing: "boolean",
duration: "number", //👀
currentTime: "number", //👀
updateTimes(videoElement) { //👀
this.currentTime = videoElement.currentTime || 0; //👀
this.duration = videoElement.duration; //👀
}, //👀
formatTime(time) { //👀
if (time === null || time === undefined) { //👀
return "--"; //👀
} //👀
const minutes = Math.floor(time / 60); //👀
let seconds = Math.floor(time - minutes * 60); //👀
if (seconds < 10) { //👀
seconds = "0" + seconds; //👀
} //👀
return minutes + ":" + seconds; //👀
}, //👀
play() {
this.playing = true;
},
pause() {
this.playing = false;
},
togglePlay() {
this.playing = !this.playing;
},
connectedCallback(element) {
this.listenTo("playing", function(event, isPlaying) {
if (isPlaying) {
element.querySelector("video").play();
} else {
element.querySelector("video").pause();
}
});
}
}
});
Make range show position slider at current time
The problem
Create a <input type="range"/> element that changes its position as
the video playing position changes.
The <input type="range"/> element should be after the <button> and before the
currentTime span like:
</button>
<input type="range"/>
<span>{{formatTime(currentTime)}}</span> /
What you need to know
The range input can have an initial value, max value, and step size specified like:
<input type="range" value="0" max="1" step="any"/>
The range will have values from 0 to 1. We will need to translate the currentTime to a number between 0 and 1. We can do this with a computed getter property like:
ViewModel: { // ... get percentComplete() { return this.currentTime / this.duration; }, }Use key:from to update a value from a ViewModel property like:
<input value:from="percentComplete"/>
The solution
Update the JavaScript tab to:
import {Component} from "//unpkg.com/can@5/core.mjs";
Component.extend({
tag: "video-player",
view: `
<video controls
on:play="play()"
on:pause="pause()"
on:timeupdate="updateTimes(scope.element)"
on:loadedmetadata="updateTimes(scope.element)">
<source src="{{src}}"/>
</video>
<div>
<button on:click="togglePlay()">
{{#if(playing)}} Pause {{else}} Play {{/if}}
</button>
<input type="range" value="0" max="1" step="any" {{!👀}}
value:from="percentComplete"/> {{!👀}}
<span>{{formatTime(currentTime)}}</span> /
<span>{{formatTime(duration)}} </span>
</div>
`,
ViewModel: {
src: "string",
playing: "boolean",
duration: "number",
currentTime: "number",
get percentComplete() { //👀
return this.currentTime / this.duration; //👀
}, //👀
updateTimes(videoElement) {
this.currentTime = videoElement.currentTime || 0;
this.duration = videoElement.duration;
},
formatTime(time) {
if (time === null || time === undefined) {
return "--";
}
const minutes = Math.floor(time / 60);
let seconds = Math.floor(time - minutes * 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
return minutes + ":" + seconds;
},
play() {
this.playing = true;
},
pause() {
this.playing = false;
},
togglePlay() {
this.playing = !this.playing;
},
connectedCallback(element) {
this.listenTo("playing", function(event, isPlaying) {
if (isPlaying) {
element.querySelector("video").play();
} else {
element.querySelector("video").pause();
}
});
}
}
});
Make sliding the range update the current time
The problem
In this section we will:
- Remove the native controls from the video player. We don’t need them anymore!
- Make it so when a user moves the range slider, the video position updates.
What you need to know
Similar to when we made the play/pause button play or pause the video, we will want to update the
currentTime property and then listen to when currentTime changes and update the <video>
element’s currentTime as a side-effect.
This time, we need to translate the sliders values between 0 and 1 to currentTime
values. We can do this by creating a percentComplete setter that updates currentTime like:
ViewModel: {
// ...
get percentComplete() {
return this.currentTime / this.duration;
},
set percentComplete(newVal) {
this.currentTime = newVal * this.duration;
},
// ...
}
Use key:bind to two-way bind a value to a ViewModel property:
<input value:bind="someViewModelProperty"/>
The solution
Update the JavaScript tab to:
import {Component} from "//unpkg.com/can@5/core.mjs";
Component.extend({
tag: "video-player",
view: `
<video {{!👀}}
on:play="play()"
on:pause="pause()"
on:timeupdate="updateTimes(scope.element)"
on:loadedmetadata="updateTimes(scope.element)">
<source src="{{src}}"/>
</video>
<div>
<button on:click="togglePlay()">
{{#if(playing)}} Pause {{else}} Play {{/if}}
</button>
<input type="range" value="0" max="1" step="any"
value:bind="percentComplete"/> {{!👀}}
<span>{{formatTime(currentTime)}}</span> /
<span>{{formatTime(duration)}} </span>
</div>
`,
ViewModel: {
src: "string",
playing: "boolean",
duration: "number",
currentTime: "number",
get percentComplete() {
return this.currentTime / this.duration;
},
set percentComplete(newVal) { //👀
this.currentTime = newVal * this.duration; //👀
}, //👀
updateTimes(videoElement) {
this.currentTime = videoElement.currentTime || 0;
this.duration = videoElement.duration;
},
formatTime(time) {
if (time === null || time === undefined) {
return "--";
}
const minutes = Math.floor(time / 60);
let seconds = Math.floor(time - minutes * 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
return minutes + ":" + seconds;
},
play() {
this.playing = true;
},
pause() {
this.playing = false;
},
togglePlay() {
this.playing = !this.playing;
},
connectedCallback(element) {
this.listenTo("playing", function(event, isPlaying) {
if (isPlaying) {
element.querySelector("video").play();
} else {
element.querySelector("video").pause();
}
});
this.listenTo("currentTime", function(event, currentTime) { //👀
const videoElement = element.querySelector("video"); //👀
if (currentTime !== videoElement.currentTime) { //👀
videoElement.currentTime = currentTime; //👀
} //👀
}); //👀
}
}
});
Result
When finished, you should see something like the following JS Bin:
About Justin Meyer
Justin Meyer is a contributor to CanJS (a web app framework), StealJS (a module loader) and DoneJS (a kitchen sink). He's also a founder of Bitovi (a web consultancy). As a writer of autobiographical blurbs, he knows to use his two children, love of history books, and hobbies like running to make him appear more human. But is he really ...
