本地视频播放网页

公司需要很多人落实监控违章情况，由监控室落实好视频并编号存储成MP4文件，和表格文件，表格文件中视频文件的名字，然后打包发到工作群里，然后由各组长对本组问题进行落实，大家每次都登录微信到电脑上然后下载在找到自己负责的视频编号，有的电脑上播放器还有广告，给大家工作带来了很多麻烦，根据这个情况，我写了个小网页，方便大家使用，目前大家感觉很好用，分享出来，看有没有人也能用到。





   
   
    河口监控落实辅助工具
   
        /* 基础样式 */
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
            color: #333333;
        }

        /* 标题和输入框区域 */
        h1 {
            color: #0056b3;
            text-align: center;
            margin-bottom: 30px;
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
        }

        .input-container {
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"] {
            width: calc(100% - 100px); /* 为按钮留出空间 */
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        button {
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        /* 视频列表 */
        #video-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #video-list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #ffffff;
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        /* 视频播放器 */
        #video-player {
            width: 100%; /* 占满容器宽度 */
            height: auto; /* 自动调整高度 */
            margin: 20px 0;
            background: #000000;
            border-radius: 4px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .input-container {
                padding: 15px;
            }

            input[type="text"] {
                width: calc(100% - 100px); /* 适应按钮大小 */
            }

            button {
                width: 100%;
                margin-top: 10px;
            }

            #video-player {
                width: 100%; /* 在小屏幕上占满宽度 */
                height: auto; /* 自动调整高度 */
            }
        }
   
        

// 禁止右键菜单
document.oncontextmenu = function() { return false; }

// 禁止Ctrl+U查看源码
document.onkeydown = function(e) {
  if (e.ctrlKey && (e.keyCode === 85 || e.keyCode === 117)) { // 阻止Ctrl+U
    return false;
  }
  if (e.keyCode === 123) { // 阻止F12
    return false;
  }
}



/* 禁止文本选择 */
body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 隐藏视频真实路径 */
#video-player source {
  display: none !important;
}



   
        河口监控落实工具
        
        
            请按照监控代码输入文件名(省略.mp4):
            
            查找
        

        

        
   

   
        let videoListItems = []; // 存储视频列表项

        const videoList = document.getElementById('video-list');
        const videoPlayer = document.getElementById('video-player');

        function addVideoToList(fileName) {
            const listItem = document.createElement('li');
            listItem.textContent = fileName + '.mp4';

            // 添加播放按钮
            const playButton = document.createElement('button');
            playButton.textContent = '播放';
            playButton.addEventListener('click', () => {
                videoPlayer.src = `videos/${fileName}.mp4`;
                videoPlayer.load();
                videoPlayer.play();
            });

            listItem.appendChild(playButton);
            videoList.appendChild(listItem);
            videoListItems.push(listItem); // 存储以备清除
        }

        function addVideos() {
            // 清空当前列表
            videoListItems.forEach(item => videoList.removeChild(item));
            videoListItems = [];

            const input = document.getElementById('video-input').value.trim();
            const fileNames = input ? input.split(',') : [];

            fileNames.forEach(fileName => {
                const trimmedFileName = fileName.trim();
                if (trimmedFileName) {
                    addVideoToList(trimmedFileName);
                }
            });
        }
   


使用方法：建立一个文本文档把以上内容复制进去，改后缀名为html，然后在新建一个空文件夹“videos”里面放你需要播放的视频文件，用小皮简单设置一下网页目录就可以使用了。

发帖的时候选择代码块包一下。

[HTML]  

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>河口监控落实辅助工具</title>
7.     <style>
8.         /* 基础样式 */
9.         body {
10.             font-family: 'Arial', sans-serif;
11.             line-height: 1.6;
12.             margin: 0;
13.             padding: 20px;
14.             background-color: #f4f4f4;
15.             color: #333333;
16.         }
18.         /* 标题和输入框区域 */
19.         h1 {
20.             color: #0056b3;
21.             text-align: center;
22.             margin-bottom: 30px;
23.         }
25.         .container {
26.             max-width: 100%;
27.             margin: 0 auto;
28.         }
30.         .input-container {
31.             background: #ffffff;
32.             padding: 20px;
33.             border-radius: 8px;
34.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
35.             margin-bottom: 20px;
36.         }
38.         label {
39.             display: block;
40.             margin-bottom: 5px;
41.             font-weight: bold;
42.         }
44.         input[type="text"] {
45.             width: calc(100% - 100px); /* 为按钮留出空间 */
46.             padding: 8px;
47.             border: 1px solid #ddd;
48.             border-radius: 4px;
49.             margin-bottom: 10px;
50.         }
52.         button {
53.             padding: 8px 16px;
54.             background-color: #007bff;
55.             color: white;
56.             border: none;
57.             border-radius: 4px;
58.             cursor: pointer;
59.         }
61.         button:hover {
62.             background-color: #0056b3;
63.         }
65.         /* 视频列表 */
66.         #video-list {
67.             list-style-type: none;
68.             padding: 0;
69.             margin: 0;
70.         }
72.         #video-list li {
73.             display: flex;
74.             align-items: center;
75.             justify-content: space-between;
76.             background: #ffffff;
77.             margin-top: 10px;
78.             padding: 10px;
79.             border: 1px solid #ddd;
80.             border-radius: 4px;
81.         }
83.         /* 视频播放器 */
84.         #video-player {
85.             width: 100%; /* 占满容器宽度 */
86.             height: auto; /* 自动调整高度 */
87.             margin: 20px 0;
88.             background: #000000;
89.             border-radius: 4px;
90.         }
92.         /* 响应式设计 */
93.         [url=home.php?mod=space&uid=945662]@media[/url] (max-width: 768px) {
94.             .input-container {
95.                 padding: 15px;
96.             }
98.             input[type="text"] {
99.                 width: calc(100% - 100px); /* 适应按钮大小 */
100.             }
102.             button {
103.                 width: 100%;
104.                 margin-top: 10px;
105.             }
107.             #video-player {
108.                 width: 100%; /* 在小屏幕上占满宽度 */
109.                 height: auto; /* 自动调整高度 */
110.             }
111.         }
112.     </style>
113.         <!-- 在原HTML的<head>标签内添加 -->
114. <script>
115. // 禁止右键菜单
116. document.oncontextmenu = function() { return false; }
118. // 禁止Ctrl+U查看源码
119. document.onkeydown = function(e) {
120.   if (e.ctrlKey && (e.keyCode === 85 || e.keyCode === 117)) { // 阻止Ctrl+U
121.     return false;
122.   }
123.   if (e.keyCode === 123) { // 阻止F12
124.     return false;
125.   }
126. }
127. </script>
129. <style>
130. /* 禁止文本选择 */
131. body {
132.   user-select: none;
133.   -webkit-user-select: none;
134.   -moz-user-select: none;
135.   -ms-user-select: none;
136. }
138. /* 隐藏视频真实路径 */
139. #video-player source {
140.   display: none !important;
141. }
142. </style>
143. </head>
144. <body>
145.     <div class="container">
146.         <h1>河口监控落实工具</h1>
147.         
148.         <div class="input-container">
149.             <label for="video-input">请按照监控代码输入文件名(省略.mp4):</label>
150.             <input type="text" id="video-input" placeholder="例如: 021101,021102,021103">
151.             <button>查找</button>
152.         </div>
154.         <ul id="video-list"></ul>
156.         <video id="video-player" controls></video>
157.     </div>
159.     <script>
160.         let videoListItems = []; // 存储视频列表项
162.         const videoList = document.getElementById('video-list');
163.         const videoPlayer = document.getElementById('video-player');
165.         function addVideoToList(fileName) {
166.             const listItem = document.createElement('li');
167.             listItem.textContent = fileName + '.mp4';
169.             // 添加播放按钮
170.             const playButton = document.createElement('button');
171.             playButton.textContent = '播放';
172.             playButton.addEventListener('click', () => {
173.                 videoPlayer.src = `videos/${fileName}.mp4`;
174.                 videoPlayer.load();
175.                 videoPlayer.play();
176.             });
178.             listItem.appendChild(playButton);
179.             videoList.appendChild(listItem);
180.             videoListItems.push(listItem); // 存储以备清除
181.         }
183.         function addVideos() {
184.             // 清空当前列表
185.             videoListItems.forEach(item => videoList.removeChild(item));
186.             videoListItems = [];
188.             const input = document.getElementById('video-input').value.trim();
189.             const fileNames = input ? input.split(',') : [];
191.             fileNames.forEach(fileName => {
192.                 const trimmedFileName = fileName.trim();
193.                 if (trimmedFileName) {
194.                     addVideoToList(trimmedFileName);
195.                 }
196.             });
197.         }
198.     </script>
199. </body>
200. </html>

复制代码

[HTML]  

1. <!DOCTYPE html>
2. <html lang="zh-CN"> <!-- 修正语言为中文，更符合“河口监控”场景 -->
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>河口监控落实辅助工具</title>
7.     <style>
8.         /* 基础样式优化：统一间距、增强可读性 */
9.         body {
10.             font-family: 'Microsoft YaHei', Arial, sans-serif; /* 适配中文字体 */
11.             line-height: 1.8;
12.             margin: 0;
13.             padding: 20px;
14.             background-color: #f8f9fa;
15.             color: #333;
16.             user-select: none; /* 保留禁止文本选择，但仅作为基础体验优化 */
17.             -webkit-user-select: none;
18.             -moz-user-select: none;
19.             -ms-user-select: none;
20.         }
22.         /* 标题样式优化：增加底部边框分隔 */
23.         h1 {
24.             color: #0056b3;
25.             text-align: center;
26.             margin: 0 0 30px;
27.             padding-bottom: 15px;
28.             border-bottom: 2px solid #e9ecef;
29.         }
31.         .container {
32.             max-width: 1200px; /* 限制最大宽度，避免大屏下内容过宽 */
33.             margin: 0 auto;
34.         }
36.         /* 输入区域优化：增加内边距、优化按钮布局 */
37.         .input-container {
38.             background: #fff;
39.             padding: 25px;
40.             border-radius: 8px;
41.             box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* 弱化阴影，更显清爽 */
42.             margin-bottom: 25px;
43.             display: flex;
44.             flex-wrap: wrap; /* 支持换行，适配小屏幕 */
45.             gap: 10px; /* 统一元素间距 */
46.             align-items: center;
47.         }
49.         label {
50.             display: block;
51.             margin-bottom: 5px;
52.             font-weight: 600;
53.             color: #495057;
54.         }
56.         .input-group {
57.             flex: 1; /* 让输入框占满剩余空间 */
58.             min-width: 200px; /* 小屏幕下输入框最小宽度 */
59.         }
61.         input[type="text"] {
62.             width: 100%; /* 改为100%，通过父容器控制宽度 */
63.             padding: 10px 12px;
64.             border: 1px solid #ced4da;
65.             border-radius: 4px;
66.             font-size: 14px;
67.             transition: border-color 0.3s; /* 增加边框过渡效果 */
68.         }
70.         input[type="text"]:focus {
71.             outline: none;
72.             border-color: #80bdff; /* 聚焦时边框变色，提升交互感 */
73.             box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
74.         }
76.         /* 按钮样式统一：增加不同状态颜色 */
77.         button {
78.             padding: 10px 20px;
79.             border: none;
80.             border-radius: 4px;
81.             cursor: pointer;
82.             font-size: 14px;
83.             transition: background-color 0.3s;
84.         }
86.         .btn-find {
87.             background-color: #007bff;
88.             color: white;
89.         }
91.         .btn-find:hover {
92.             background-color: #0056b3;
93.         }
95.         .btn-clear {
96.             background-color: #6c757d;
97.             color: white;
98.         }
100.         .btn-clear:hover {
101.             background-color: #5a6268;
102.         }
104.         .btn-play {
105.             background-color: #28a745;
106.             color: white;
107.         }
109.         .btn-play:hover {
110.             background-color: #218838;
111.         }
113.         /* 视频列表优化：增加hover效果，统一间距 */
114.         #video-list {
115.             list-style-type: none;
116.             padding: 0;
117.             margin: 0 0 30px;
118.         }
120.         #video-list li {
121.             display: flex;
122.             align-items: center;
123.             justify-content: space-between;
124.             background: #fff;
125.             margin-top: 10px;
126.             padding: 12px 15px;
127.             border: 1px solid #e9ecef;
128.             border-radius: 4px;
129.             transition: background-color 0.3s;
130.         }
132.         #video-list li:hover {
133.             background-color: #f8f9fa; /* hover时背景变色，提升交互感 */
134.         }
136.         /* 视频播放器优化：固定比例，避免拉伸 */
137.         .video-wrapper {
138.             position: relative;
139.             width: 100%;
140.             padding-top: 56.25%; /* 16:9比例（高度/宽度=9/16=0.5625） */
141.             background: #000;
142.             border-radius: 4px;
143.             overflow: hidden;
144.         }
146.         #video-player {
147.             position: absolute;
148.             top: 0;
149.             left: 0;
150.             width: 100%;
151.             height: 100%;
152.         }
154.         /* 响应式优化：小屏幕下输入区域垂直排列 */
155.         [url=home.php?mod=space&uid=945662]@media[/url] (max-width: 768px) {
156.             .input-container {
157.                 flex-direction: column;
158.                 align-items: stretch; /* 子元素占满宽度 */
159.                 padding: 15px;
160.             }
162.             .input-group {
163.                 width: 100%;
164.                 margin-bottom: 10px;
165.             }
167.             /* 小屏幕下按钮独占一行，宽度100% */
168.             .btn-group {
169.                 width: 100%;
170.                 display: flex;
171.                 gap: 10px;
172.             }
174.             button {
175.                 flex: 1; /* 按钮平分宽度 */
176.             }
177.         }
179.         /* 提示文本样式 */
180.         .tip-text {
181.             font-size: 12px;
182.             color: #6c757d;
183.             margin-top: 5px;
184.         }
186.         /* 错误提示样式 */
187.         .error-text {
188.             color: #dc3545;
189.             font-size: 14px;
190.             margin-top: 10px;
191.             text-align: center;
192.             display: none; /* 默认隐藏 */
193.         }
194.     </style>
195. </head>
196. <body>
197.     <div class="container">
198.         <h1>河口监控落实工具</h1>
199.         
200.         <div class="input-container">
201.             <div class="input-group">
202.                 <label for="video-input">请输入监控代码(省略.mp4)：</label>
203.                 <input type="text" id="video-input" placeholder="例如：021101,021102,021103">
204.                 <div class="tip-text">支持多个代码，用英文逗号分隔；仅支持.mp4格式视频</div>
205.             </div>
206.             <div class="btn-group">
207.                 <button class="btn-find" id="find-btn">查找</button>
208.                 <button class="btn-clear" id="clear-btn">清空列表</button>
209.             </div>
210.         </div>
212.         <!-- 错误提示区域 -->
213.         <div class="error-text" id="error-text"></div>
215.         <!-- 视频列表 -->
216.         <ul id="video-list"></ul>
218.         <!-- 视频播放器（用容器固定比例） -->
219.         <div class="video-wrapper">
220.             <video id="video-player" controls preload="none">
221.                 <!-- preload="none"：默认不加载视频，优化性能 -->
222.                 您的浏览器不支持HTML5视频播放，请升级浏览器后重试。
223.             </video>
224.         </div>
225.     </div>
227.     <script>
228.         // 核心变量：存储视频列表项、错误提示元素
229.         const videoList = document.getElementById('video-list');
230.         const videoPlayer = document.getElementById('video-player');
231.         const videoInput = document.getElementById('video-input');
232.         const findBtn = document.getElementById('find-btn');
233.         const clearBtn = document.getElementById('clear-btn');
234.         const errorText = document.getElementById('error-text');
235.         let videoListItems = []; // 存储已添加的列表项，用于清空
237.         // 1. 添加视频到列表（增加合法性校验）
238.         function addVideoToList(fileName) {
239.             // 校验文件名：仅允许数字（监控代码通常为数字）
240.             const reg = /^[0-9]+$/;
241.             if (!reg.test(fileName)) {
242.                 showError(`监控代码“${fileName}”无效，仅支持数字！`);
243.                 return;
244.             }
246.             // 创建列表项
247.             const listItem = document.createElement('li');
248.             listItem.textContent = `${fileName}.mp4`;
250.             // 创建播放按钮
251.             const playButton = document.createElement('button');
252.             playButton.className = 'btn-play';
253.             playButton.textContent = '播放';
254.             playButton.addEventListener('click', () => {
255.                 // 隐藏错误提示
256.                 hideError();
257.                 // 设置视频路径并播放（增加加载失败处理）
258.                 const videoUrl = `videos/${fileName}.mp4`;
259.                 videoPlayer.src = videoUrl;
260.                 videoPlayer.load();
261.                
262.                 // 监听视频加载失败事件
263.                 videoPlayer.onerror = function() {
264.                     showError(`视频“${fileName}.mp4”加载失败，请检查代码是否正确！`);
265.                     videoPlayer.src = ''; // 清空无效路径
266.                 };
268.                 videoPlayer.play().catch(err => {
269.                     // 处理自动播放失败（部分浏览器禁止自动播放）
270.                     showError('视频自动播放失败，请点击播放器的“播放”按钮重试！');
271.                 });
272.             });
274.             listItem.appendChild(playButton);
275.             videoList.appendChild(listItem);
276.             videoListItems.push(listItem);
277.         }
279.         // 2. 批量添加视频（处理输入框内容）
280.         function addVideos() {
281.             // 清空现有列表和错误提示
282.             clearVideoList();
283.             hideError();
285.             // 获取并处理输入内容（去重、去空）
286.             const input = videoInput.value.trim();
287.             if (!input) {
288.                 showError('请输入监控代码后再点击查找！');
289.                 return;
290.             }
292.             // 分割输入（支持英文逗号，处理可能的空格）
293.             let fileNames = input.split(',').map(name => name.trim());
294.             // 去重（避免重复添加同一视频）
295.             fileNames = [...new Set(fileNames)].filter(name => name);
297.             if (fileNames.length === 0) {
298.                 showError('请输入有效的监控代码（多个代码用英文逗号分隔）！');
299.                 return;
300.             }
302.             // 批量添加视频
303.             fileNames.forEach(fileName => addVideoToList(fileName));
304.         }
306.         // 3. 清空视频列表
307.         function clearVideoList() {
308.             videoListItems.forEach(item => videoList.removeChild(item));
309.             videoListItems = [];
310.             // 停止视频播放并清空路径
311.             videoPlayer.pause();
312.             videoPlayer.src = '';
313.             hideError();
314.         }
316.         // 4. 显示错误提示
317.         function showError(msg) {
318.             errorText.textContent = msg;
319.             errorText.style.display = 'block';
320.         }
322.         // 5. 隐藏错误提示
323.         function hideError() {
324.             errorText.style.display = 'none';
325.         }
327.         // 6. 绑定按钮事件（核心修复：原程序缺少这一步）
328.         findBtn.addEventListener('click', addVideos);
329.         clearBtn.addEventListener('click', clearVideoList);
331.         // 7. 支持回车键触发查找（提升操作体验）
332.         videoInput.addEventListener('keydown', (e) => {
333.             if (e.key === 'Enter') {
334.                 addVideos();
335.             }
336.         });
338.         // 说明：原程序的“禁止右键/F12”逻辑已移除，原因如下：
339.         // 1. 无法真正阻止专业用户查看源码（浏览器调试模式可绕过）
340.         // 2. 影响正常用户操作（如右键复制文本、刷新页面）
341.         // 3. 若需保护视频，应通过后端权限控制（如签名URL、时效验证），而非前端隐藏
342.     </script>
343. </body>
344. </html>

复制代码

帮你修改正了下，就可以了

有创意的

这个可以试一下。

这个是干嘛的

用于本地播放自己的视频使用的。

高端大气上档次，就是目前不太需要，支持了~

试试好用不，谢谢

方便实用，感谢分享。