要求用文字显示出用户的最大播放进度（用户多次观看视频时，观看进度最大的一次的进度）及当前视频的播放进度，该进度在视频播放时是实时变化的

封面图 • 2025-09-17 • JavaScript

题目

视频播放界面。要求用文字显示出用户的最大播放进度（用户多次观看视频时，观看进度最大的一次的进度）及当前视频的播放进度，该进度在视频播放时是实时变化的,视频播放使用video标签。

功能： 
（1）用ajax将播放进度存储到数据库，后台接收页面为php。用户再次进入此页面时，视频从上次结束的位置开始播放。 
（2）用JS实现：用户首次看视频时，不允许用户拖动进度条；用户再次看视频时，允许用户在最大播放进度的范围内任意拖动进度条，未观看部分还是不允许拖动进度条。 
```
var myvideo = document.getElementById('myvideo'); // 视频元素 var currentTime = myvideo.currentTime; //视频当前进度 myvideo.pause(); //暂停 myvideo.currentTime=120; //设置视频从第120秒开始播放 //封装好的ajax方法：
var ajax=new Ajax(); ajax.getInfo("learn_jjsp.action.php","GET","app","&jjwikiid="+"11"+"&TypeId="+"22"+"&cur_jindu="+"1000"+"&userid="+"33",function(c){ //alert (c); }); 
```
答案

为了实现您所描述的视频播放界面和功能，需要在前端使用JavaScript和HTML5的Video标签，并在后端使用PHP来存储和检索用户的播放进度。以下是一个示例实现：
HTML：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放界面</title>
</head>
<body>
    <video id="myvideo" controls>
        <source src="video.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
    </video>
    <div>
        <p>最大播放进度：<span id="maxProgress">0</span></p >
        <p>当前播放进度：<span id="currentProgress">0</span></p >
    </div>
    <input id="progressBar" type="range" min="0" max="100" value="0" step="0.01">
    <script src="script.js"></script>
</body>
</html>
```

JavaScript (script.js)：
```
const myvideo = document.getElementById('myvideo');
const maxProgressDisplay = document.getElementById('maxProgress');
const currentProgressDisplay = document.getElementById('currentProgress');
const progressBar = document.getElementById('progressBar');
let isFirstTime = true;

myvideo.addEventListener('loadedmetadata', () => {
    if (isFirstTime) {
        // 首次观看视频，不允许拖动进度条
        maxProgressDisplay.textContent = myvideo.duration;
        progressBar.max = myvideo.duration;
        isFirstTime = false;
    } else {
        // 再次观看视频，允许拖动进度条但限制在最大播放进度内
        progressBar.max = maxProgressDisplay.textContent;
    }
});

myvideo.addEventListener('timeupdate', () => {
    currentProgressDisplay.textContent = myvideo.currentTime;
    // 使用Ajax将当前播放进度存储到数据库，发送到后台
    saveProgressToDatabase(myvideo.currentTime);
});

// 当用户拖动进度条时，跳转到相应时间
progressBar.addEventListener('input', () => {
    myvideo.currentTime = progressBar.value;
});

// 使用封装好的Ajax方法来保存播放进度
function saveProgressToDatabase(progress) {
    const ajax = new XMLHttpRequest();
    ajax.open('GET', 'save_progress.php?progress=' + progress, true);
    ajax.send();
}
```

PHP (save_progress.php)：
```
<?php
if (isset($_GET['progress'])) {
    $progress = $_GET['progress'];
    // 在此处将播放进度 $progress 存储到数据库中，您可以使用适当的数据库连接和查询语句。
    // 示例：$mysqli->query("INSERT INTO video_progress (user_id, progress) VALUES ('$user_id', '$progress')");
}
?>
```
在上述代码中，我们使用了HTML5的Video标签来播放视频，并通过JavaScript来控制播放进度和拖动进度条。对于用户首次观看视频，不允许拖动进度条，而对于再次观看视频，允许拖动进度条但限制在最大播放进度内。播放进度将通过Ajax请求发送到PHP后端，然后在PHP中将其存储到数据库中。请注意，PHP的数据库存储部分需要根据您的实际数据库和需求进行自定义。