Mastering HTML5 Video: Essential Methods, Properties, Events, and a Custom Player Demo
This guide explains the key HTML5 video/audio methods, properties, and events, demonstrates how to check format support, control playback, volume, fullscreen, and looping, and provides a complete custom video player example with HTML, CSS, and JavaScript code.
Introduction
The article introduces the basic concepts of HTML5 video and audio elements, focusing on the methods, properties, and events that developers need to control media playback and build custom players.
Common HTML5 Video/Audio Methods
canPlayType() – Checks whether the browser can play a given media type; returns "probably", "maybe", or an empty string.
load() – Reloads the media element, useful when changing the source.
play() – Starts playback; typically paired with pause() for toggle behavior.
pause() – Pauses playback; works together with play().
Common HTML5 Video/Audio Properties
autoplay – When set to true, playback begins automatically after the media is ready.
buffered – Returns a TimeRanges object describing which portions of the media have been buffered.
controls – Shows or hides the browser’s default control UI ( true or false).
currentSrc – Read‑only property that returns the current media URL.
currentTime – Gets or sets the current playback position in seconds.
duration – Read‑only length of the media in seconds; returns NaN if unavailable.
ended – Boolean indicating whether playback has finished.
loop – Boolean that determines whether the media repeats after ending.
muted – Boolean that mutes or unmutes the media.
paused – Read‑only Boolean indicating if playback is paused.
played – Returns a TimeRanges object representing the portions that have already played.
playbackRate – Controls playback speed (e.g., 1.0 normal, 0.5 half speed, 2.0 double speed).
src – Sets or gets the media file URL.
volume – Sets or gets the volume level between 0.0 (silent) and 1.0 (full).
Key Media Events
onloadstart– Fired when the browser starts loading media data. ondurationchange – Fired when the media’s duration changes. onloadedmetadata – Fired when metadata (duration, dimensions, etc.) is available. onloadeddata – Fired when the first frame of media is loaded. onprogress – Periodic updates while downloading. oncanplay – Media can start playing, but buffering may still occur. oncanplaythrough – Media can play to the end without further buffering. onended – Playback has reached the end. onpause – Playback is paused. onplay – Playback starts. onseeked – User has finished seeking to a new position. onseeking – User is actively seeking. ontimeupdate – Current playback position changes (often used with currentTime). onvolumechange – Volume or mute state changes. onwaiting – Playback is stalled waiting for more data.
Example: Custom HTML5 Video Player
The following example puts together HTML, CSS, and JavaScript to create a custom video player with a play/pause toggle, progress bar, volume control, mute button, and fullscreen support.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/remauto.js"></script>
<title>Custom Video Player</title>
<style>
.video-box{position:relative;width:7.5rem;height:4.2rem;margin:0 auto;}
.video-box video{width:7.5rem;height:4.2rem;}
.controls-bar{position:absolute;left:0;bottom:0;width:100%;height:0.5rem;background:rgba(0,0,0,0.2);z-index:999;display:none;}
.progress{position:relative;float:left;width:3rem;height:0.06rem;background:#8ed1bb;border-radius:0.05rem;margin:0.22rem 0.16rem;cursor:pointer;}
.bar{position:absolute;top:0;left:0;width:0;height:100%;background:#fff;border-radius:0.05rem;}
.control{position:absolute;left:-0.04rem;top:-0.04rem;width:0.14rem;height:0.14rem;background:#fff;border-radius:50%;z-index:99;}
.voice{float:left;font-size:0.16rem;margin:0.14rem 0.3rem;color:#fff;}
.voice input[type=range]{width:1.4rem;height:0.08rem;border-radius:0.08rem;vertical-align:middle;}
.voice-icon{display:inline-block;width:0.24rem;height:0.24rem;vertical-align:middle;}
.voice-opened-icon{background:url("img/voice-opened.png") no-repeat;}
.voice-closed-icon{background:url("img/voice-closed.png") no-repeat;}
.fullscreen-icon{display:block;width:0.3rem;height:0.3rem;background:url("img/full.png") no-repeat;background-size:0.3rem 0.3rem;}
</style>
</head>
<body>
<div class="video-box">
<div class="video-btn">
<div class="video-mask">
<i class="play-video-icon iconfont icon-bofang"></i>
</div>
</div>
<video autoplay>
<source src="perch.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<div class="controls-bar">
<div class="video-switch">
<div class="switch-btn switch-play"></div>
</div>
<div class="progress">
<span class="bar"></span>
<div class="control"></div>
</div>
<div class="voice">
<i class="voice-icon voice-opened-icon"></i>
<input type="range" min="0" max="100" value="50" id="voiceControl">
</div>
<div id="fullScreen">
<i class="fullscreen-icon"></i>
</div>
</div>
</div>
<script>
var myVideo = $("video")[0];
var progress = $(".progress")[0];
var bar = $(".bar")[0];
var control = $(".control")[0];
var fullScreen = document.getElementById("fullScreen");
$(".video-btn, .video-switch").on("click", function(){ videoSwitch(); return false; });
function videoSwitch(){
if(myVideo.paused){
myVideo.play();
$(".video-mask").hide();
$(".switch-btn").removeClass('switch-pause').addClass('switch-play');
$(".controls-bar").hide();
} else {
myVideo.pause();
$(".video-mask").show();
$(".switch-btn").removeClass('switch-play').addClass('switch-pause');
$(".controls-bar").show();
}
}
myVideo.addEventListener("timeupdate", function(){
var scale = myVideo.currentTime / myVideo.duration;
bar.style.width = progress.offsetWidth * scale + "rem";
control.style.left = progress.offsetWidth * scale - 0.04 + "rem";
}, false);
var voiceControl = document.getElementById("voiceControl");
voiceControl.addEventListener("change", function(){
myVideo.volume = voiceControl.value/100;
});
fullScreen.addEventListener('click', function(){
myVideo.webkitRequestFullScreen();
});
$(".video-box").on("mouseover", function(){ $(".controls-bar").show(); });
$(".video-box").on("mouseout", function(){ if(!myVideo.paused){ $(".controls-bar").hide(); } });
$(".voice-icon").on("click", function(){
if(myVideo.muted){
myVideo.muted = false;
$(this).removeClass('voice-closed-icon').addClass('voice-opened-icon');
} else {
myVideo.muted = true;
$(this).removeClass('voice-opened-icon').addClass('voice-closed-icon');
}
return false;
});
</script>
</body>
</html>Note: In QQ Browser the custom styles may not appear, and the default control bar is shown instead.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Open Source Tech Hub
Sharing cutting-edge internet technologies and practical AI resources.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.