| 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: 40px; |
|---|
| | | 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-group { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | 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: 10px; |
|---|
| | | 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"> |
|---|
| | | <div class="input-group"> |
|---|
| | | <input type="text" id="videoUrl" placeholder="请输入视频播放地址"> |
|---|
| | | <button id="loadVideo">加载视频</button> |
|---|
| | | </div> |
|---|
| | | </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> |
|---|
