| New file |
| | |
| | | <!DOCTYPE html> |
| | | <html lang="zh-CN"> |
| | | <head> |
| | | <meta charset="UTF-8"> |
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | | <title>视频播放器</title> |
| | | <style> |
| | | * { |
| | | margin: 0; |
| | | padding: 0; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | body { |
| | | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
| | | background-color: #f0f2f5; |
| | | color: #333; |
| | | line-height: 1.6; |
| | | } |
| | | |
| | | .container { |
| | | max-width: 900px; |
| | | margin: 30px auto; |
| | | padding: 30px; |
| | | background: #f8f8f8; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| | | } |
| | | |
| | | .header { |
| | | text-align: center; |
| | | margin-bottom: 40px; |
| | | } |
| | | |
| | | .header h2 { |
| | | color: #333; |
| | | margin-bottom: 10px; |
| | | font-size: 24px; |
| | | } |
| | | |
| | | .header p { |
| | | color: #666; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .play-container { |
| | | margin-top: 20px; |
| | | padding: 30px; |
| | | background: #fff; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| | | } |
| | | |
| | | .play-container h3 { |
| | | margin-bottom: 20px; |
| | | color: #333; |
| | | font-size: 20px; |
| | | } |
| | | |
| | | video { |
| | | width: 100%; |
| | | max-width: 800px; |
| | | height: auto; |
| | | border-radius: 4px; |
| | | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| | | } |
| | | |
| | | .control-panel { |
| | | margin-top: 20px; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | gap: 10px; |
| | | } |
| | | |
| | | input[type="text"] { |
| | | width: 400px; |
| | | padding: 10px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | button { |
| | | padding: 10px 20px; |
| | | background-color: #1E9FFF; |
| | | color: white; |
| | | border: none; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | font-size: 14px; |
| | | transition: background-color 0.3s; |
| | | } |
| | | |
| | | button:hover { |
| | | background-color: #009688; |
| | | } |
| | | |
| | | .message { |
| | | margin-top: 15px; |
| | | padding: 10px; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .message.success { |
| | | background-color: #f0f9ff; |
| | | color: #1E9FFF; |
| | | border-left: 4px solid #1E9FFF; |
| | | } |
| | | |
| | | .message.error { |
| | | background-color: #fff2f0; |
| | | color: #ff4d4f; |
| | | border-left: 4px solid #ff4d4f; |
| | | } |
| | | |
| | | @media (max-width: 768px) { |
| | | .container { |
| | | margin: 20px; |
| | | padding: 20px; |
| | | } |
| | | |
| | | input[type="text"] { |
| | | width: 100%; |
| | | max-width: 300px; |
| | | } |
| | | |
| | | .control-panel { |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | } |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <div class="container"> |
| | | <div class="header"> |
| | | <h2>视频播放器</h2> |
| | | <p>支持视频文件播放和跳跃播放</p> |
| | | </div> |
| | | |
| | | <!-- 播放区域 --> |
| | | <div class="play-container"> |
| | | <h3>视频播放</h3> |
| | | <video id="videoPlayer" controls width="100%" height="auto"> |
| | | <source id="videoSource" src="" type="video/mp4"> |
| | | 您的浏览器不支持视频播放 |
| | | </video> |
| | | <div class="control-panel"> |
| | | <input type="text" id="videoUrl" placeholder="请输入视频播放地址,例如:/fileUpload/play/example.mp4_1234567890"> |
| | | <button id="loadVideo">加载视频</button> |
| | | </div> |
| | | <div id="message" class="message" style="display: none;"></div> |
| | | </div> |
| | | </div> |
| | | |
| | | <script> |
| | | // 初始化 |
| | | function init() { |
| | | // 绑定加载视频按钮事件 |
| | | document.getElementById('loadVideo').addEventListener('click', function() { |
| | | var videoUrl = document.getElementById('videoUrl').value.trim(); |
| | | if (!videoUrl) { |
| | | showMessage('请输入视频播放地址', 'error'); |
| | | return; |
| | | } |
| | | loadVideo(videoUrl); |
| | | }); |
| | | } |
| | | |
| | | // 加载视频 |
| | | function loadVideo(videoUrl) { |
| | | var videoPlayer = document.getElementById('videoPlayer'); |
| | | var videoSource = document.getElementById('videoSource'); |
| | | |
| | | // 根据文件扩展名设置正确的MIME类型 |
| | | var extension = videoUrl.split('.').pop().toLowerCase(); |
| | | var mimeType = 'video/mp4'; |
| | | switch(extension) { |
| | | case 'avi': |
| | | mimeType = 'video/x-msvideo'; |
| | | break; |
| | | case 'mov': |
| | | mimeType = 'video/quicktime'; |
| | | break; |
| | | case 'wmv': |
| | | mimeType = 'video/x-ms-wmv'; |
| | | break; |
| | | case 'flv': |
| | | mimeType = 'video/x-flv'; |
| | | break; |
| | | case 'webm': |
| | | mimeType = 'video/webm'; |
| | | break; |
| | | case 'mkv': |
| | | mimeType = 'video/x-matroska'; |
| | | break; |
| | | } |
| | | |
| | | videoSource.src = videoUrl; |
| | | videoSource.type = mimeType; |
| | | videoPlayer.load(); |
| | | |
| | | showMessage('视频加载中...', 'success'); |
| | | |
| | | // 视频加载完成事件 |
| | | videoPlayer.addEventListener('loadedmetadata', function() { |
| | | showMessage('视频加载完成', 'success'); |
| | | }); |
| | | |
| | | // 视频加载错误事件 |
| | | videoPlayer.addEventListener('error', function() { |
| | | showMessage('视频加载失败,请检查地址是否正确', 'error'); |
| | | }); |
| | | } |
| | | |
| | | // 显示消息 |
| | | function showMessage(text, type) { |
| | | var messageDiv = document.getElementById('message'); |
| | | messageDiv.textContent = text; |
| | | messageDiv.className = 'message ' + type; |
| | | messageDiv.style.display = 'block'; |
| | | |
| | | // 3秒后自动隐藏 |
| | | setTimeout(function() { |
| | | messageDiv.style.display = 'none'; |
| | | }, 3000); |
| | | } |
| | | |
| | | // 页面加载完成后初始化 |
| | | window.onload = init; |
| | | </script> |
| | | </body> |
| | | </html> |