当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/weixin_48348920/article/details/144140680 2025/1/16 8:18:19

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 enabledelayedexpansionset folderPath="E:\Videos"
set outputPath="%cd%\视频列表.txt"
set fileExtension=MP4echo 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>

在这里插入图片描述

相关文章：

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

Demo介绍 一个简单的视频播放器应用&#xff0c;其中包含了视频列表和一个视频播放区域。用户可以通过点击视频列表中的项来选择并播放相应的视频&#xff0c;播放器会自动播放每个视频并在播放完毕后切换到下一个视频。本项目旨在通过自动化脚本和动态网页渲染&#xff0c;帮助…...

编程日记 2024/12/1 1:01:01

[MySQL]流程控制语句

流程控制语句需要借助存储过程才有效。关于存储过程&#xff0c;我会在后续的文章详述&#xff0c;本篇文章只是阐述流程控制语句。因此&#xff0c;大家只需要注意存储过程中相应的流程控制语句即可。 如果文中阐述不全或不对的&#xff0c;多多交流。 参考笔记三&#xff0c…...

编程日记 2024/12/1 0:59:56

Flink在Linux系统上的安装与入门

一、Flink的引入 这几年大数据的飞速发展&#xff0c;出现了很多热门的开源社区&#xff0c;其中著名的有Hadoop、Storm&#xff0c;以及后来的Spark&#xff0c;他们都有着各自专注的应用场景。Spark 掀开了内存计算的先河&#xff0c;也以内存为赌注&#xff0c;赢得了内存计…...

编程日记 2024/12/1 0:54:50

微信小程序Webview与H5通信

背景 近期有个微信小程序需要用到web-view嵌套H5的场景&#xff0c;该应用场景需要小程序中频繁传递数据到H5进行渲染&#xff0c;且需要保证页面不刷新。 由于微信小程序与H5之间的通信限制比较大&#xff0c;显然无法满足于我的业务场景 探索 由于微信小程序与webview的环境是…...

编程日记 2024/12/1 0:47:43

Debezium Engine监听binlog实现缓存更新与业务解耦

飞书文档 解决缓存与数据源数据不一致的方案有很多, 各有优缺点; 1.0、旁路缓存策略, 直接同步更新 读取流程&#xff1a; 查询缓存。如果缓存命中&#xff0c;则直接返回结果。如果缓存未命中&#xff0c;则查询数据库。将数据库查询到的数据写入缓存&#xff0c;并设置一个…...

编程日记 2024/12/1 0:45:41

docker搭建socks5代理

准备工作 VPS安全组/策略放行相应端口如启用了防火墙&#xff0c;放行相应端口 实际操作 我们选用“历史悠久”的Dante socks5 代理服务器&#xff0c;轻量、稳定。Github也有对dante进行进一步精简的镜像&#xff0c;更为适宜。github项目地址如下&#xff1a; https://gi…...

编程日记 2024/12/1 0:44:40

scanf函数和printf函数的格式化输入输出

#include<stdio.h> int main() {int a;double b;char c;scanf("a%d,b%lf:c%c",&a,&b,&c); //float型输入时使用%f占位&#xff0c;double型使用%lf占位&#xff1b;输出时二者相同都是%f即可。if(a>0)printf("a%-10d,b%20.3lf,c%c",a…...

编程日记 2024/12/1 0:40:35

Day31 贪心算法 part05

56. 合并区间 本题也是重叠区间问题&#xff0c;如果昨天三道都吸收的话&#xff0c;本题就容易理解了。 代码随想录 class Solution {public int[][] merge(int[][] intervals) {Arrays.sort(intervals, (a,b) -> Integer.compare(a[0], b[0]));List<int[]> result …...

编程日记 2024/12/1 0:37:32

uniapp连接mqtt频繁断开原因和解决方法

mqtt参考文档&#xff1a;MQTT.js 入门教程 | EMQ、MQTT.js 入门教程 - EMQX - 博客园 uniapp引用MQTT频繁断开的问题可能由于以下几个原因导致&#xff1a; 网络不稳定&#xff1a;频繁断开可能是由于网络不稳定导致的&#xff0c;可以尝试优化网络连接。 心跳机制问题&…...

编程日记 2024/12/1 0:34:28

【数据结构-队列】力扣641. 设计循环双端队列

设计实现双端队列。 实现 MyCircularDeque 类: MyCircularDeque(int k) &#xff1a;构造函数,双端队列最大为 k 。 boolean insertFront()&#xff1a;将一个元素添加到双端队列头部。 如果操作成功返回 true &#xff0c;否则返回 false 。 boolean insertLast() &#xff1…...

编程日记 2024/12/1 0:33:26

leetcode3250. 单调数组对的数目 I，仅需1s

题目&#xff1a; https://leetcode.cn/problems/find-the-count-of-monotonic-pairs-i/description/ 不为别的&#xff0c;只是记录下这个超过100%&#xff0c;而且比原先最快的快了一个量级 不知道咋分析&#xff0c;反正得出结论就是&#xff0c;变大不变&#xff0c;变小…...

编程日记 2024/12/1 0:31:25

安全基线检查

一、安全基线检测基础知识 安全基线的定义 安全基线检查的内容 安全基线检查的操作 二、MySQL的安全基线检查 版本加固 弱口令 不存在匿名账户 合理设置权限 合理设置文件权限 日志审核 运行账号 可信ip地址控制 连接数限制 更严格的基线要求 1、禁止远程连接数据库 2、修改…...

编程日记 2024/12/1 0:30:24

C#读取本地图像的方法总结

前言&#xff1a; 大家好&#xff0c;我是上位机马工&#xff0c;硕士毕业4年年入40万&#xff0c;目前在一家自动化公司担任软件经理&#xff0c;从事C#上位机软件开发8年以上&#xff01;我们在C#开发C#程序的时候&#xff0c;有时候需要读取本地图像&#xff0c;下面进行详…...

编程日记 2024/12/1 0:27:18

力扣81：搜索旋转排序数组II

已知存在一个按非降序排列的整数数组 nums &#xff0c;数组中的值不必互不相同。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转 &#xff0c;使数组变为 [nums[k], nums[k1], ..., nums[n-1], n…...

编程日记 2024/12/1 0:26:17

信息系统项目管理-论文写作方法之背景二

为响应国家政务服务“一网、一门、一次”改革&#xff0c;打破“信息孤岛”现象&#xff0c;打造线上线下相融合、多级联动的政务服务一体化平台。XX市行政审批局欲整合市局及下属13镇区、500多个村居委会政务服务中心业务&#xff0c;梳理人社、民政、卫计委、公积金、交通等多…...

编程日记 2024/12/1 0:25:15

使用ffmpeg命令实现视频文件间隔提取帧图片

将视频按每隔五秒从视频中提取一张图片 使用 ffmpeg 工具&#xff0c;通过设置 -vf&#xff08;视频过滤器&#xff09;和 -vsync 选项 命令格式 ffmpeg -i input_video.mp4 -vf "fps1/5" output_%03d.png 解释&#xff1a; -i input_video.mp4&#xff1a;指定输…...

编程日记 2024/12/1 0:23:13

我们项目要升级到flutter架构的几点原因

一、探索 Flutter打造卓越移动应用的新时代框架 在移动应用开发的世界里&#xff0c;Flutter已经成为了一个炙手可热的话题。诞生于Google的怀抱&#xff0c;Flutter以其独特的优势和理念&#xff0c;正在引领一场全球范围内的应用开发 ** 。本文将深入探讨Flutter项目的特点、…...

编程日记 2024/12/1 0:22:12

【简单好抄保姆级教学】javascript调用本地exe程序（谷歌，edge，百度，主流浏览器都可以使用....）

javascript调用本地exe程序 详细操作步骤结果 详细操作步骤 在本地创建一个txt文件依次输入 1.指明所使用注册表编程器版本 Windows Registry Editor Version 5.00这是脚本的第一行&#xff0c;指明了所使用的注册表编辑器版本。这是必需的&#xff0c;以确保脚本能够被正确解…...

编程日记 2024/12/1 0:21:10

ElasticSearch为什么不能在query阶段直接返回_id,从而避免fetch?

整理自Github的一个issue,也正好解答了我的疑惑 https://github.com/elastic/elasticsearch/issues/17159 提问 是否可以避免搜索的fetch阶段并仅返回文档ID&#xff1f;查询阶段结束时是否有_id&#xff0c;这样当我只需要_id时&#xff0c;fetch就多余了&#xff1f;可以通过…...

编程日记 2024/12/1 0:20:09

网安瞭望台第5期 ：7zip出现严重漏洞、识别网络钓鱼诈骗的方法分享

国内外要闻 7 - Zip存在高危漏洞&#xff0c;请立刻更新 2024 年 11 月 24 日&#xff0c;do son 报道了 7 - Zip 中存在的一个高严重性漏洞 CVE - 2024 - 11477。7 - Zip 是一款广受欢迎的文件压缩软件&#xff0c;而这个漏洞可能会让攻击者在存在漏洞的系统中执行恶意代码。…...

编程日记 2024/12/1 0:19:08

获 2023 年度浙江省科学技术进步奖一等奖 | 网易数智日报

11 月 22 日&#xff0c;加快建设创新浙江因地制宜发展新质生产力动员部署会暨全省科学技术奖励大会在杭州隆重召开。浙江大学、网易数智等单位联合研发的“大规模结构化数据智能计算平台及产业化”项目获得 2023 年度浙江省科学技术进步奖一等奖。 加快建设创新浙江因地制宜发…...

编程日记 2024/12/1 0:13:59

SQL基础入门 —— SQL概述

目录 1. 什么是SQL及其应用场景 SQL的应用场景 2. SQL数据库与NoSQL数据库的区别 2.1 数据模型 2.2 查询语言 2.3 扩展性 2.4 一致性与事务 2.5 使用场景 2.6 性能与扩展性 总结 3. 常见的SQL数据库管理系统&#xff08;MySQL, PostgreSQL, SQLite等&#xff09; 3.…...

编程日记 2024/12/1 0:12:59

【附录】Rust国内镜像设置

目录 前言 &#xff08;1&#xff09;设置环境变量 &#xff08;2&#xff09;安装Rust &#xff08;3&#xff09;设置crates镜像 前言 本节课来介绍下如何在国内高速下载安装Rust和Rust依赖&#xff0c;由于网络原因&#xff0c;我们在安装Rust和下载项目依赖时都很慢&am…...

编程日记 2024/12/1 0:09:55

量化交易系统开发-实时行情自动化交易-8.2.发明者FMZ平台

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来会对于发明者FMZ平台介绍。 发明…...

编程日记 2024/12/1 0:07:53

MATLAB —— 机械臂工作空间分析

系列文章目录 前言 本示例展示了如何使用可操作性指数对不同类型的机械手进行工作空间分析。工作空间分析是一种有用的工具&#xff0c;可用于确定机器人工作空间中最容易改变末端效应器位置和方向的区域。本示例的重点是利用不同的可操控性指数类型来分析各种机械手的工作空间…...

编程日记 2024/12/1 0:01:46

向日葵连接xrdp虚拟桌面

x2go的虚拟性没有那么好。而xrdp&#xff0c;可以实现较好的配置&#xff0c;并且能适应本机电脑的分辨率&#xff0c;非常方便。 配置xrdp可以参考这个&#xff1a; https://blog.csdn.net/weixin_54227557/article/details/143303803 然后就是重启相关服务了。 sudo pkill…...

编程日记 2024/11/30 23:59:44

AI智算-正式上架GPU资源监控概览 Grafana Dashboard

下载链接 https://grafana.com/grafana/dashboards/22424-ai-gpu-20241127/...

编程日记 2024/11/30 23:58:42

goframe框架bug-记录

implement not found for interface ICompany, forgot register? 错误解决检查&#xff1a; 1.有没有init 2. 注入问题 3. 注入问题...

编程日记 2024/11/30 23:57:40

对偶分解算法详解及其Python实现

目录 对偶分解算法详解及其实现第一部分：对偶分解算法概述1.1 什么是对偶分解算法1.2 应用场景1.3 算法优点第二部分：对偶分解算法的数学推导2.1 问题形式2.2 对偶问题2.3 算法框架第三部分：对偶分解算法的Python实现第四部分：案例1——支持向量机中的对偶分解（策略模式）…...

编程日记 2024/11/30 23:56:38

C# WinForm怎么使用COM组件

首先在右边自己的项目上右键→添加→引用 然后在 引用管理器 的 COM 分页下选择自己要添加的COM组件&#xff0c;当然前提是你已经用 regsvr32 命令注册过了此COM组件到注册表&#xff0c;如果还没有注册在这个列表里是看不到的。 选择好后点确定&#xff0c;就会在右边你的工程…...

编程日记 2024/11/30 23:53:36

电子商务网站建设的问题/百度推广的渠道有哪些

点击蓝字关注我们今天给大家分享一个临床指南查询下载网站网站预览共有17790份中英文指南的原文4407份中英文指南的解读还会不断更新网站链接http://guidelines.mikecrm.com/NsOywVt也可点击最下方的阅读原文进入网站简易教程01点击“中英文原文指南”或“中英文指南解读”02输…...

编程日记 2025/1/16 7:27:02

长沙模板网站长沙网站建设/南宁百度网站推广

前言:一直对SpringBoot的自动注入感兴趣,特意查了一下并进行了实现. 参考:https://blog.csdn.net/zxc123e/article/details/80222967(绝大部分是照抄了此博文,某些地方进行了改动) https://www.cnblogs.com/duanxz/p/4520571.html https://blog.csdn.net/gottst0113/article…...

编程日记 2025/1/16 6:36:05

定制网站开发报价/app推广赚钱平台

Java Q&A: 使用Factory Method模式 (转)[more]Java Q&A: 使用Factory Method模式Q: 阅读 "Polymorphism in its purest form" 一文时&#xff0c;我看到了一个不熟悉的术语 "Factory method"。你能解释一下什么是Factory method并说明如何使用它吗…...

编程日记 2025/1/16 1:07:06

现在有哪些网站兼职可以做/百度网站app下载

引用做函数參数 struct Teacher {char name[64];int age ; };void printfT(Teacher *pT) {cout<<pT->age<<endl; }//pT是t1的别名 ,相当于改动了t1 void printfT2(Teacher &pT) {//cout<<pT.age<<endl;pT.age 33; }//pT和t1的是两个不同的变量…...

编程日记 2025/1/16 0:14:05

新手做那些网站比较好/怎么样推广自己的网站

不要自卑&#xff0c;去提升实力 互联网行业谁技术牛谁是爹 如果文章可以带给你能量&#xff0c;那是最好的事&#xff01;请相信自己 加油o~ 本人初学Python&#xff0c;只为熟悉语法编写&#xff0c;大神请勿理会 点击下面链接 Python经典编程100例习题汇总 题目描述&#…...

编程日记 2025/1/15 23:42:34

企业自己怎么做网站推广/百度网登录入口

这篇文章主要介绍了PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别,需要的朋友可以参考下PDOStatement::bindParam — 绑定一个参数到指定的变量名。绑定一个PHP变量到用作预处理的SQL语句中的对应命名占位符或问号占位符。 不同于 PDOStatement::bindVal…...

编程日记 2025/1/15 21:57:56