视频目录进度条的制作（html(js)+pr）

锦鲤未离

已于 2024-06-23 20:29:44 修改

阅读量771

点赞数 18

文章标签： javascript 开发语言 ecmascript

于 2024-05-11 23:47:53 首次发布

本文链接：https://blog.csdn.net/koinlcsdn/article/details/138733423

版权

一、碎碎念

大家好，我是锦鲤未离！

很高兴和大家在csdn见面，祝你我喜乐安康。

最近在做毕设的过程中，想要往底部添加进度条，用处不必赘述。第一时间想到的就是HTML，并用几个小时进行了实现。

但授人以鱼不如授人以渔，使用的代码的的确确如下所示，但要将视频目录的进度条成功添加上去，还需要一点点努力，下面我做以步骤说明，请耐心浏览。

---------------------------------------------------------------------------------------------------------------------

二、具体步骤

第一步：你要有一个需要添加进度条的视频，将它导入到pr中；

第二步：运行我的程序之前，请记得修改代码中的修改点2，特别是视频帧宽度、高度、时间段所有内容，需要与你的视频信息等对应。运行程序，不出意外会出现类似下图所示的图片。

第三步：因为需要用到两个进度条，所以请修改`const picture_background = '#b24222'; // 进度条背景颜色`的#b24222。经过第二、三步，你会得到两张图片。仅仅进度条的背景颜色不同。

第四步：在pr中，①将下载好的两个图片如图示1那样放置，顺序无所谓，但一定要拉满整个视频长度。②在效果里面，把裁剪拖到最上面的图片中。③当当前视频位于00:00:00:0时，将“裁剪”的“右侧”左边的时钟点蓝，再将右边的0.0%变成100%。

第五步：先将视频位于00:00:00:0的蓝色长光标拉到视频末尾，再将100%改成0%。

结语：拉动蓝色长光标，你可以看到进度条已经制作成功了。

三、使用到的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image By KoiNL</title>
</head>
<body>
    <img id="original-image" src="https://koinl.github.io/imgs/TransparentPictures.png" style="display: none;">
    <!-- 修改点1：上述的图片即任意一个透明图，若链接失效，替代即可 -->
    <canvas id="image-canvas"></canvas>

    <script>
//修改点2·开始·修改点2·开始（着重修改的：视频帧宽度、高度、时间段内容）-------------------------------------------------------------------------------------------
        const wwidth = 2560;    // 视频帧宽度
        const hheight = 1600;    // 视频帧高度
        const progressbar_height = 100;    // 进度条高度
        const near_bottom = 10;    // 进度条距离底部
        const interregional_interval = 5;    // 进度条区域间间隔
        const picture_background = '#b24222';    // 进度条背景颜色
        const picture_font_size = '64px Arial';    // 进度条内字体大小
        const picture_font_color = 'white';    // 进度条内字体颜色
        // 时间段见下
        const legends = ['区域1', '区域2a', '区域3a', '区域4a'];     // 标题
        const constants = [t2s(0, 26), t2s(2, 0), t2s(6, 32), t2s(8, 4)]; // 时间常量数组，其中t2s(分, 秒)
//修改点2·结束·修改点2·结束----------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------------------------------------------------
        // 绘制区域函数
        function drawSection(x, y, width, height, color, text) {
            ctx.fillStyle = color;
            ctx.fillRect(x, y, width, height);
            ctx.fillStyle = picture_font_color;
            ctx.font = picture_font_size; // 使用预先设置的字体样式
            ctx.textAlign = 'center';
            ctx.fillText(text, x + width / 2, y + height / 1.2);
        }

        // 定义函数将时间转换为秒
        function t2s(minutes, seconds) {
            return minutes * 60 + seconds;
        }

        // 定义函数计算进度条区域宽度
        function calculateSectionWidths(numSections, rectWidth, All_time, constants) {
            // 初始化区域宽度数组
            const sectionWidths = [];
            // 计算第一个到倒数第二个区域的宽度
            for (let i = 0; i < numSections - 1; i++) {
                sectionWidths.push(rectWidth * ((constants[i + 1] - constants[i]) / All_time));
            }
            // 计算最后一个区域的宽度
            sectionWidths.push(rectWidth * ((constants[numSections - 1] - constants[numSections - 2]) / All_time));
            
            return sectionWidths;
        }
        // 获取图片元素和 canvas 元素
        const originalImage = document.getElementById('original-image');
        const canvas = document.getElementById('image-canvas');
       
        // 总时长
        const All_time= constants[constants.length - 1];    
        
        const ctx = canvas.getContext('2d');

        // 当图片加载完成后执行绘制
        originalImage.onload = function() {
            // 设置Canvas的宽度和高度
            canvas.width = wwidth;
            canvas.height = hheight;

            // 绘制图片，并拉伸以适应Canvas尺寸
            ctx.drawImage(originalImage, 0, 0, canvas.width, canvas.height);

            // 计算矩形划分的区域
            const rectHeight = progressbar_height; // 矩形高度
            const rectWidth = canvas.width; // 矩形宽度与图片宽度相同
            const rectY = canvas.height - rectHeight - near_bottom; // 矩形 Y 坐标在图片底部附近


            // 矩形进度条编辑
            constants.unshift(0);
            const numSections = constants.length; // 区域数量
            const sectionWidths = calculateSectionWidths(numSections, rectWidth, All_time, constants); //各区域百分比

            // 分别绘制区域
            let startX = 0;
            for (let i = 0; i < numSections; i++) {
                drawSection(startX, rectY, sectionWidths[i], rectHeight, picture_background, legends[i]);
                startX += sectionWidths[i] + interregional_interval; // Interregional interval 为区域之间的间隔
            }

            // 将 canvas 转换为图片并展示在页面上
            const imgData = canvas.toDataURL(); // 将 canvas 转换为 base64 编码的图片数据
            const resultImage = new Image();
            resultImage.src = imgData;
            document.body.appendChild(resultImage); // 展示在页面上

            // 下载链接
            const downloadLink = document.createElement('a');
            downloadLink.href = imgData;
            downloadLink.download = 'image_with_rectangle.png'; // 下载图片的文件名
            downloadLink.innerHTML = 'Download Image';
            document.body.appendChild(downloadLink);
        };

        // 如果图片加载失败，输出错误信息
        originalImage.onerror = function() {
            console.error('图片加载失败');
        };
    </script>
    
</body>
</html>

锦鲤未离

关注

18
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
视频目录进度条的制作（html(js)+pr）

最近在做毕设的过程中，想要往底部添加进度条，用处不必赘述。第一时间想到的就是HTML，并用几个小时进行了实现。但授人以鱼不如授人以渔，使用的代码的的确确如下所示，但要将视频目录的进度条成功添加上去，还需要一点点努力，下面我做以步骤说明，请耐心浏览。大家好，我是锦鲤未离！很高兴和大家在csdn见面，祝你我喜乐安康。
复制链接

扫一扫