课程学习网站视频禁止拖拽快进是如何做的？

视频课程禁用进度条拖动功能的主要目的是确保学员按顺序观看教学内容，防止跳过关键知识点。该功能适用于应试防作弊、基础课程学习、操作演示类教程和学习时长统计等场景。文章提供了两种实现方法：通过播放器代码直接设置禁用参数，或使用原生HTML5视频标签配合自定义JavaScript控制进度条行为，包括阻止拖动和限制跳跃范围等技术实现。

1.播放图片效果

2.禁用进度条

禁用视频课程进度条的拖动功能，主要是为了强制学员按照课程设计的顺序观看内容，防止跳过关键知识点，从而保证学习效果和课程的完整性。

在线教育、在线培训、视频教学课程如何禁用拖动视频进度条实例：
（常用于场景：企业培训、在线教学内容禁止学员拖动视频进行观看）

3.平台代码参考

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
volume:0.75,
vid: '138dcc9667850eba0705401288131bf1_1',
ban_seek:'on',
});
</script>

4.原生代码参考

<video id="myVideo" width="640" height="360" controls>
    <source src="your_video.mp4" type="video/mp4">
    您的浏览器不支持 HTML5 video 标签。
</video>

<script>
    const video = document.getElementById('myVideo');
    const controls = video.controls; // 获取控制条，如果想隐藏controls，需要自定义播放器

    // 如果使用默认的 controls 属性，很难直接禁用拖动进度条
    // 因为浏览器内置的 controls 行为是封装好的，我们无法直接修改其内部事件。

    // 因此，更推荐的方式是：
    // 1. 隐藏默认的 controls 属性
    video.removeAttribute('controls');

    // 2. 自定义播放器控制条，并禁用进度条的拖动事件
    // 以下是一个简单的示例，只展示禁用进度条拖动，不包含完整的自定义播放器

    // 假设你有一个自定义的进度条元素
    // 例如：<div id="customProgressBar" style="width:100%; height:10px; background-color:#ccc; cursor:default;"></div>
    const customProgressBar = document.createElement('div');
    customProgressBar.id = 'customProgressBar';
    customProgressBar.style.cssText = 'width:640px; height:10px; background-color:#ccc; margin-top:10px;';
    video.parentNode.insertBefore(customProgressBar, video.nextSibling);

    // 禁用自定义进度条的鼠标事件
    customProgressBar.addEventListener('mousedown', function(event) {
        event.preventDefault(); // 阻止默认的鼠标按下行为
    });
    customProgressBar.addEventListener('mousemove', function(event) {
        // 可以根据需要阻止或允许其他行为
    });
    customProgressBar.addEventListener('mouseup', function(event) {
        // 可以根据需要阻止或允许其他行为
    });

    // 另一种常见策略：只允许向前拖动或只允许已播放的部分拖动
    let lastPlayedTime = 0;

    video.addEventListener('timeupdate', () => {
        // 更新已播放时间
        if (video.currentTime > lastPlayedTime) {
            lastPlayedTime = video.currentTime;
        }

        // 更新自定义进度条的显示
        if (customProgressBar) {
            const progress = (video.currentTime / video.duration) * 100;
            customProgressBar.style.width = `${progress}%`; // 这是一个简化的显示，实际应该有进度条的背景和填充
            // 更真实的进度条会有一个内部填充 div
        }
    });

    // 当用户尝试跳转时，检查是否超出已播放时间
    video.addEventListener('seeking', () => {
        if (video.currentTime > lastPlayedTime + 5) { // 允许小范围的向前跳跃，防止误触
            video.currentTime = lastPlayedTime; // 强制跳回到已播放时间
            console.log('检测到非法跳转，已强制返回。');
        }
    });

    // 如果要完全禁用拖动，并且使用第三方播放器（如 Video.js, Plyr 等），可以查找它们的 API 是否提供类似的功能。
</script>

 [ 视频安全 ] 相关原创文章

• 教育教学类视频如何处理加密与安全（组图）
• 防止360浏览器小窗下载视频
• 视频安全之视频播放密码功能(设置观看密码功能教程)
• 视频安全之授权播放和防录屏跑马灯
• 企业级微信视频直播如何设定观看白名单（设定手机观看白名单、授权观看直播）
• 在线教育网站如何更好的实现视频安全视频保护？
• 免费视频二维码的完整使用教程（适合小企业做微信视频宣传） 
• Html5视频video标签中使用blob实现视频播放加密