This tutorial shows how to create a custom video player.
As Wes challenged us, I have added fullscreen video functionality. The only issue to pay attention to was choosing the player
element instead of video
to keep the controls on screen.
Some concepts taught:
HTMLMediaElement API
forclick
,play
,pause
andtimeupdate
eventsvolume
,playbackRate
andcurrentTime
properties
Fullscreen API
for therequestFullscreen()
method
// fullscreen handler function
const handleFullscreen = () => {
if (!document.fullscreenElement) {
player.requestFullscreen()
.catch(err =>
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`)
)
} else {
document.exitFullscreen()
}
}