xc-mall.git - Gitblit

New file
			@@ -0,0 +1,243 @@
			<!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>