【娱乐项目】基于批处理脚本与JavaScript渲染视频列表的Web页面

Demo介绍

  • 一个简单的视频播放器应用,其中包含了视频列表和一个视频播放区域。用户可以通过点击视频列表中的项来选择并播放相应的视频,播放器会自动播放每个视频并在播放完毕后切换到下一个视频。
  • 本项目旨在通过自动化脚本和动态网页渲染,帮助用户快速生成并展示本地视频资源(如教学视频)。使用批处理脚本从指定文件夹中读取所有视频文件的信息,并利用JavaScript在HTML页面上动态渲染视频列表,用户可以方便地浏览、播放这些视频。

批处理脚本生成视频列表

通过批处理脚本自动扫描本地指定文件夹中的所有视频文件,获取视频文件的名称和路径,然后将每个视频的文件路径和标题生成一个 JavaScript 数组,并将该数组输出到一个 .txt 文件中

  • @echo off:关闭命令行窗口的回显,即不显示执行的命令
  • setlocal enabledelayedexpansion:启用延迟变量扩展,使得在同一代码块中可以动态更新和使用变量的值(特别是使用!来访问变量的实时值)
  • set folderPath="E:\Videos":定义了视频文件所在的文件夹路径。这个路径包含了所有的视频文件
  • set outputPath="%cd%\视频列表.txt":定义了输出文件的路径,%cd%表示当前目录,所以视频列表会被保存在当前目录下的视频列表.txt 文件中
  • set fileExtension=MP4:定义了视频文件的扩展名,这里设置为 MP4,即只会处理 .MP4 文件
  • echo var videos = [ > %outputPath%:将 var videos = [ 写入到输出文件 视频列表.txt 中,开始构建 JavaScript 数组的定义
  • for %%f in (%folderPath%\*.%fileExtension%) do (:遍历指定文件夹(%folderPath%)中所有扩展名为 .MP4 的文件
  • %%f :循环变量,表示每个文件
  • set "fileName=%%~nxf":提取文件的完整文件名(包括扩展名),并赋值给 fileName 变量
  • %%~n:获取文件名
  • %%~x:获取文件扩展名
  • %%~nxf:获取完整的文件名(包含扩展名)
  • set "fileTitle=%%~nf":提取文件名(不包含扩展名),并赋值给 fileTitle 变量
  • %%~nf:%%~n:获取文件名,不包含扩展名
@echo off
setlocal enabledelayedexpansion

set folderPath="E:\Videos"
set outputPath="%cd%\视频列表.txt"
set fileExtension=MP4

echo var videos = [ > %outputPath%

for %%f in (%folderPath%\*.%fileExtension%) do (
    set "fileName=%%~nxf"
    set "fileTitle=%%~nf"
    echo     { >> %outputPath%
    echo         src: "!fileName!", >> %outputPath%
    echo         title: "!fileTitle!" >> %outputPath%
    echo     }, >> %outputPath%
)

echo ]; >> %outputPath%

  • echo { >> %outputPath%:向输出文件添加一个新的对象 {,开始写入一个视频对象
  • echo src: "!fileName!", >> %outputPath%:将视频文件的完整名称(包括扩展名)写入 src 字段
  • echo title: "!fileTitle!" >> %outputPath%:将视频文件的文件名(不包括扩展名)写入 title 字段
  • echo }, >> %outputPath%:结束当前对象,并添加一个逗号,准备写入下一个视频文件的信息

最终输出的 .txt 文件
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .one {
            width: 100%;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }

        .one #videoList {
            width: 300px;
            height: 100%;
            max-height: 100vh;
            margin: 0px;
            color: #fff;
            background: rgb(123, 202, 252);
            overflow: scroll;
            overflow-x: hidden;
            padding-left: 0;
            border: 8px groove rgb(123, 202, 252);
        }

        .one #videoList::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .one #videoList li {
            cursor: pointer;
            line-height: 30px;
            border-bottom: 1px solid #fff;
            padding: 10px;
            list-style: none;
            margin: 0px;
        }

        .one #videoList li:hover {
            font-weight: bold;
        }

        .one .selected {
            background: #fff;
            color: rgb(123, 202, 252);
            font-weight: bold;
        }

        .one #myVideo {
            border: 8px groove rgb(123, 202, 252);
        }
    </style>
</head>

<body>
    <div class="one">
        <ul id="videoList"></ul>
        <video id="myVideo" width="600" height="400" controls></video>
    </div>

    <script>
        // 获取视频列表和视频播放器元素
        var videoList = document.getElementById('videoList');
        var myVideo = document.getElementById('myVideo');

        // 批处理脚本获取到的视频列表数据
        var videos = [];

        // 动态生成视频列表
        videos.forEach(function (video, index) {
            var li = document.createElement('li'); // 创建列表项
            li.textContent = video.title; // 设置列表项的文本内容为视频标题
            li.setAttribute('data-src', video.src); // 设置自定义属性存储视频源
            li.addEventListener('click', function () { // 为每个列表项添加点击事件
                loadVideo(video.src, li); // 加载选中的视频
            });
            videoList.appendChild(li); // 将列表项添加到视频列表中
        });

        // 加载视频并更新选中状态
        function loadVideo(src, listItem) {
            myVideo.src = src; // 设置视频播放器的源为选中的视频
            myVideo.play(); // 播放视频

            // 清除之前的选中状态
            var selected = document.querySelector('.selected');
            if (selected) {
                selected.classList.remove('selected');
            }

            // 添加选中样式到当前点击的列表项
            listItem.classList.add('selected');
        }

        // 初始化页面,默认加载第一个视频
        if (videos.length > 0) {
            loadVideo(videos[0].src, videoList.children[0]); // 默认加载第一个视频并设置选中
        }
    </script>
</body>

</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/925693.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Chili靶机渗透

获取ip&#xff1a; 获取端口号&#xff1a; 可以看到不存在ssh服务了&#xff0c;但是存在ftp和http服务&#xff1a; 扫描一下http服务&#xff1a; 访问网址&#xff1a; 查看源代码只发现一个标题&#xff1a; 扫描一下目录信息&#xff1a; 没有扫描到什么东西&#xff0…

去中心化物理基础设施网络(DePIN):重塑未来的基石

一、引言&#xff1a;DePIN的定义与背景 什么是DePIN&#xff1f; 去中心化物理基础设施网络&#xff08;DePIN&#xff0c;Decentralized Physical Infrastructure Networks&#xff09;是利用区块链和去中心化技术管理、优化和激励物理资源分配的一种新兴模式。与传统集中式…

【Linux】线程同步与互斥

文章目录 1. 线程互斥1.1 进程线程间的互斥相关背景概念1.2 互斥量mutex1.3 相关操作1.4 互斥量实现原理1.5 互斥量的封装 2. 线程同步2.1 条件变量2.2 生产者消费者模型2.3 基于BlockingQueue的生产者消费者模型2.4 信号量2.5 基于环形队列的生产消费模型 3. 线程池3.1 日志3.…

20241129解决在Ubuntu20.04下编译中科创达的CM6125的Android10出现找不到库文件

20241129解决在Ubuntu20.04下编译中科创达的CM6125的Android10出现找不到库文件libtinfo.so.5的问题 2024/11/29 20:41 缘起&#xff1a;中科创达的高通CM6125开发板的Android10的编译环境需要。 [ 11% 15993/135734] target Java source list: vr [ 11% 15994/135734] target …

海盗王用golang重写的AccountServer功能

自从用golang重写了海盗王的网关gateserver以来&#xff0c;一直想把accountserver也重写了&#xff0c;但是一直没有进行。 趁上次刚写好那个golang版的更新器&#xff0c;还有些熟悉&#xff0c;于是把原来AccountServer的C代码重写读了个大概。它原版的写得太过于复杂&#…

Vue使用Mockjs插件实现模拟数据

官方文档&#xff1a;Mock.js 一.引言 在前端开发过程中&#xff0c;我们经常会遇到后端接口尚未完成&#xff0c;但前端需要进行页面构建和功能测试的情况。这时候&#xff0c;Mockjs就如同救星一般出现了。Mockjs 是一款能够模拟生成随机数据&#xff0c;拦截 Ajax 请求并返…

我们来学mysql -- 事务之概念(原理篇)

事务的概念 题记一个例子一致性隔离性原子性持久性 题记 在漫长的编程岁月中&#xff0c;存在一如既往地贯穿着工作&#xff0c;面试的概念这类知识点&#xff0c;事不关己当然高高挂起&#xff0c;精准踩坑时那心情也的却是日了&#x1f436;请原谅我的粗俗&#xff0c;遇到B…

书生大模型实战营第四期-入门岛-2. Python关卡任务

书生大模型实战营第四期-入门岛-2. Python关卡任务 书生大模型实战营-第四期 闯关手册&#xff1a;https://github.com/InternLM/Tutorial/blob/camp4/docs/L0/Python/task.md 任务类型任务内容预计耗时闯关任务Leetcode 383(笔记中提交代码与leetcode提交通过截图)20mins闯…

java全栈day10--后端Web基础(基础知识)之续集

一、Servlet执行流程 二、Http协议&#xff08;相对Tomcat和servlet重要一点&#xff09; 2.1Http-概叙 2.2Http-请求协议 2.2.3请求数据格式 2.2.3请求数据获取 先启动服务器 访问/hello Servlet 访问浏览器端Http协议数据 查看数据

【Docker系列】Docker 中使用 Redis 配置文件的详细指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

图像显示的是矩阵的行和列,修改为坐标范围。

x 3; y 3; f1x x^2 y^2; guance1 f1x; F (x, y) sqrt((x.^2 y.^2 - guance1).^2); % 使用点乘 [x, y] meshgrid(0:1:5, 0:1:5); Z F(x, y); figure; imagesc(Z); % 由于 imagesc 使用矩阵索引作为坐标&#xff0c;我们需要手动添加刻度 % 这里我们假设 x 和 y 的范围…

人工智能的微积分基础

目录 ​编辑 引言 微积分的基本概念 1. 导数 2. 积分 3. 微分方程 微积分在人工智能中的应用 1. 机器学习中的优化 2. 反向传播算法 3. 概率与统计 4. 控制理论 5. 自然语言处理中的梯度 6. 计算机视觉中的积分 7. 优化算法中的微积分 8. 微分几何在深度学习中的…

肿瘤微环境中单细胞的泛癌分类

scRNA-seq可以揭示肿瘤微环境 (TME) 内细胞异质性的宝贵见解&#xff0c;scATOMIC是一种用于恶性和非恶性细胞的注释工具。在 300,000 个癌症、免疫和基质细胞上训练了 scATOMIC&#xff0c;为 19 种常见癌症定义了一个泛癌症参考&#xff0c;scATOMIC优于当前的分类方法。在 2…

OpenCV_Code_LOG

孔洞填充 void fillHole(const Mat srcBw, Mat &dstBw) {Size m_Size srcBw.size();Mat TempMat::zeros(m_Size.height2,m_Size.width2,srcBw.type());//延展图像srcBw.copyTo(Temp(Range(1, m_Size.height 1), Range(1, m_Size.width 1)));cv::floodFill(Temp, Point(…

C语言数据结构——详细讲解《队列》

C语言数据结构——详细讲解《队列》 前言一、队列的概念二、队列的操作&#xff08;一&#xff09;定义队列结构&#xff08;二&#xff09;初始化队列&#xff08;三&#xff09;入队列操作&#xff08;四&#xff09;出队列操作&#xff08;五&#xff09;获取队头元素&#…

【模块一】kubernetes容器编排进阶业务容器化案例

Kubernetes 实战案例 Kubernetes实战案例-规划(基于nerdctl buildkitdcontainerd构建容器镜像) 业务容器化优势&#xff1a; ① 提高资源利用率、节约部署IT成本。 ② 提高部署效率&#xff0c;基于kubernetes实现微服务的快速部署与交付、容器的批量调度与秒级启动。 ③…

政安晨【零基础玩转各类开源AI项目】探索Cursor-AI Coder的应用实例

目录 Cusor的主要特点 Cusor实操 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; Cursor 是 Visual Studio Code 的一个分支。这使我们能够…

Android 12.0 DocumentsUI文件管理器首次进入默认显示内部存储文件功能实现

1.前言 在12.0的系统rom定制化开发中,在关于文件管理器的某些功能中,在首次进入文件管理器的时候默认进入下载 文件夹,点击菜单选择内部存储的时候,会显示内部存储的内容,客户开发需要要求默认显示内部存储的文件 接下来分析下功能的实现 如图: 2.DocumentsUI文件管理器首…

9.机器学习--SVM支持向量机

支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;是一种二分类监督学习模型。支持向量机最早在 1964 年被提出&#xff0c;1995年前后理论成熟并开始被大量应用与人像识别、文本分类等问题中。它的基本模型是定义在特征空间上的间隔最大的线性分类器&…

数据结构---链表

1. 简介 链表&#xff08;Linked List&#xff09;是一种常见的线性数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含数据部分和指向下一个节点的指针&#xff08;或引用&#xff09;。链表的一个主要优点是能够高效地插入和删除元素&#xff0c;尤其是在数组…