制作简易版播放器。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易版的视频播放器</title>
</head>
<body>
<video id="video">
<source src="butterfly.mp4" type="video/mp4" />
<source src="butterfly.webm" type="video/webm" />
</video>
<!--播放按钮和播放时间-->
<button id="playButton" onclick="playOrPauseVideo()">播放</button>
<span id="time"></span>
</body>
<script>
//显示时间进度
function playOrPauseVideo() {
var video = document.getElementById("video");
//使用事件监听方式捕捉事件
video.addEventListener("timeupdate", function () {
var timeDisplay = document.getElementById("time");
//用秒数来显示当前播放进度
timeDisplay.innerHTML = Math.floor(video.currentTime) + "／" + Math.floor(video.duration) + "（秒）";
}, false);
//播放暂停
var play=document.getElementById("playButton");//获取按钮元素
play.onclick = function () {
if (video.ended) { //如果媒体播放结束，播放时间从0开始
video.currentTime = 0;
}
video[video.paused ? 'play' : 'pause'](); //通过三元运算执行播放和暂停
};
video.addEventListener('play', playEvent, false); //使用事件播放
video.addEventListener('pause', pausedEvent, false); //播放暂停
video.addEventListener('ended', function () { //播放结束后停止播放
this.pause(); //显示暂停播放
}, false);
function playEvent() {
video.play();
play.innerHTML = '暂停';
}
function pausedEvent() {
video.pause();
play.innerHTML = '播放';
}
}
</script>
</html>下面是对这段代码的逐行逐词讲解，涵盖 HTML 和 JavaScript 部分，包括函数、属性、方法和事件等关键内容：
HTML 部分：
<video id="video"> <source src="butterfly.mp4" type="video/mp4" /> <source src="butterfly.webm" type="video/webm" /> </video>
<video>：HTML5 中用于嵌入视频内容的标签。id="video"：为该<video>元素设置一个唯一标识符，以便通过 JavaScript 来访问它。<source>：用于指定视频的不同格式源文件，以提高浏览器兼容性。这里提供了两个格式：MP4 和 WebM。src="butterfly.mp4"：指定 MP4 格式的视频文件路径。type="video/mp4"：声明该源文件的 MIME 类型。src="butterfly.webm"：指定 WebM 格式的视频文件路径。type="video/webm"：声明该源文件的 MIME 类型。
<video id="video"> <source src="butterfly.mp4" type="video/mp4" /> <source src="butterfly.webm" type="video/webm" /> </video>
<!--播放按钮和播放时间-->：HTML 注释，用于说明下面的元素用途。<button>：HTML 按钮元素，用户点击后会触发onclick事件。id="playButton"：为按钮设置唯一标识符。onclick="playOrPauseVideo()"：当按钮被点击时，调用名为playOrPauseVideo()的 JavaScript 函数。<span>：用于显示播放时间的标签。id="time"：用于通过 JavaScript 获取该标签并更新其内容。
JavaScript 部分：
//显示时间进度
function playOrPauseVideo() {//显示时间进度：注释，说明接下来的函数用于处理时间显示。function playOrPauseVideo()：定义一个名为playOrPauseVideo的函数，用于控制视频播放和暂停。
var video = document.getElementById("video");var video = document.getElementById("video")：通过document.getElementById()方法获取<video>元素，并将其赋值给变量video，以便后续操作。
video.addEventListener("timeupdate", function () {
var timeDisplay = document.getElementById("time");
timeDisplay.innerHTML = Math.floor(video.currentTime) + "／" + Math.floor(video.duration) + "（秒）";
}, false);video.addEventListener("timeupdate", ...)：为视频元素添加一个监听器，监听timeupdate事件。每当视频播放时，该事件会持续触发，用于更新播放进度。timeupdate：视频播放时触发的事件。function () { ... }：匿名函数，当事件触发时执行。var timeDisplay = document.getElementById("time")：获取<span id="time">元素，用于显示时间。video.currentTime：表示当前播放时间（单位为秒）。video.duration：表示视频总时长（单位为秒）。Math.floor(...)：将浮点数向下取整，使时间显示为整数。timeDisplay.innerHTML = ...：将当前播放时间和总时长以“已播放时间 / 总时长（秒）”的形式显示在<span>中。
var play = document.getElementById("playButton");var play = document.getElementById("playButton")：获取<button id="playButton">元素，用于后续控制播放/暂停。
play.onclick = function () {
if (video.ended) {
video.currentTime = 0;
}
video:ml-search[video.paused ? 'play' : 'pause'];
};play.onclick = function () { ... }：为播放按钮设置点击事件处理函数。if (video.ended)：判断视频是否播放完毕。video.currentTime = 0：如果视频播放完毕，则将播放时间重置为 0。video:ml-search[video.paused ? 'play' : 'pause']：使用三元运算符判断视频是否处于暂停状态。如果
video.paused为true（即视频暂停），则调用video.play()。否则调用
video.pause()。
video.addEventListener('play', playEvent, false);
video.addEventListener('pause', pausedEvent, false);
video.addEventListener('ended', function () {
this.pause();
}, false);video.addEventListener(...)：为视频元素添加多个事件监听器。'play'：当视频开始播放时触发playEvent函数。'pause'：当视频暂停时触发pausedEvent函数。'ended'：当视频播放结束时，调用匿名函数使视频暂停。
function playEvent() {
video.play();
play.innerHTML = '暂停';
}function playEvent()：定义播放事件处理函数。video.play()：确保视频处于播放状态（虽然通常不需要，但作为安全措施）。play.innerHTML = '暂停'：将按钮文本更新为“暂停”。
function pausedEvent() {
video.pause();
play.innerHTML = '播放';
}function pausedEvent()：定义暂停事件处理函数。video.pause()：确保视频处于暂停状态。play.innerHTML = '播放'：将按钮文本更新为“播放”。
总结：
该代码实现了以下功能：
显示视频的播放进度。
提供播放/暂停按钮控制视频。
当视频播放完毕后，点击按钮可重新播放。
按钮文字会根据播放状态自动切换为“播放”或“暂停”。
代码结构清晰，使用了事件监听和条件判断来实现交互逻辑，具有良好的用户体验。