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

embedded/2024/11/30 15:25:42/

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>javascript">// 获取视频列表和视频播放器元素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>

在这里插入图片描述


http://www.ppmy.cn/embedded/141779.html

相关文章

大模型专栏--Spring Ai Alibaba介绍和功能演示

Spring AI Alibaba 介绍和功能演示 背景 Spring AI Alibaba 开源项目基于 Spring AI 构建&#xff0c;是阿里云通义系列模型及服务在 Java AI 应用开发领域的最佳实践&#xff0c;提供高层次的 AI API 抽象与云原生基础设施集成方案&#xff0c;帮助开发者快速构建 AI 应用。…

旋转数组的最小数字 剑指offer

题目描述 把一个数组最开始的若干个元素搬到数组的末尾&#xff0c;我们称之为数组的旋转。输入一个递增排序的数组的一个旋转&#xff0c;输出旋转数组的最小元素。例如&#xff0c;数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转&#xff0c;该数组的最小值为1。 题目分析 初步代码…

AI潮汐日报1128期:Sora泄露引发争议、百度早期研究对AI领域Scaling Law的贡献、Meta发布系列AI开源项目

AI 潮汐日报&#xff0c;旨在提供最新潮、最核心、最有意思的AI速递。四大专栏&#xff1a;今日热点、应用速递、研究进展、思维碰撞。 今日热点 OpenAI文本转视频模型Sora泄露引发争议 OpenAI的文本转视频AI模型Sora在Hugging Face上遭遇泄露&#xff0c;泄露者为参与测试的…

kali linux 装 virtual box 增强工具 Guest Addition

kali linux 装 virtual box 增强工具 Guest Addition install Virtual Box Guest Addition in kali linux 搞了一下午&#xff0c;最终发现是白折腾。 kali linux 自带 virtual box 的增强工具。 kali linux 2021.3 之后的版本都是自带virtual box 增强工具 解决方法 直接…

k8s运行运行pod报错超出文件描述符表限制

1.问题描述 运行pod超过文件描述符表 unable to allocate file descriptor table - out of memory/opt/COMMAND.sh: line 9: 2.查看设备的文件描述符限制 操作前一定要先查询这个值&#xff0c;2097152这个值即为我们可设置的最大值&#xff0c;超过这个值后将无法登录&am…

Maven install java heap space

Maven install java heap space 打包报错 Maven install java heap space 解决&#xff1a; vm option: -Xms1024m -Xmx1024m如果 vm配置了&#xff0c;还是一样报错&#xff0c;就重新选择JRE看看是否正确&#xff0c;idea会默认自己的环境&#xff0c;导致设置vm无效&…

跳表(Skip List)

跳表&#xff08;Skip List&#xff09; 跳表是一种用于快速查找、插入和删除的概率型数据结构&#xff0c;通常用于替代平衡二叉搜索树&#xff08;如 AVL 树或红黑树&#xff09;。跳表通过在有序链表的基础上增加多层索引&#xff0c;使得查找操作的平均时间复杂度降低&…

【大数据技术基础】 课程 第5章 HBase的安装和基础编程 大数据基础编程、实验和案例教程(第2版)

第5章 HBase的安装和基础编程 5.1 安装HBase 5.1.1 下载安装文件 访问HBase官网下载安装文件hbase-2.2.2-bin.tar.gz文件。 下载完安装文件以后&#xff0c;需要对文件进行解压。按照Linux系统使用的默认规范&#xff0c;用户安装的软件一般都是存放在“/usr/local/”目录下…