<!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 requestFullscreen(element) {
|
if (element.requestFullscreen) {
|
return element.requestFullscreen();
|
} else if (element.mozRequestFullScreen) {
|
return element.mozRequestFullScreen();
|
} else if (element.webkitRequestFullscreen) {
|
return element.webkitRequestFullscreen();
|
} else if (element.msRequestFullscreen) {
|
return element.msRequestFullscreen();
|
}
|
return Promise.reject(new Error('当前浏览器不支持全屏API'));
|
}
|
|
// 加载视频
|
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('canplay', function() {
|
showMessage('视频加载完成，正在尝试自动全屏...', 'success');
|
// 尝试自动全屏
|
requestFullscreen(videoPlayer).then(function() {
|
showMessage('视频已自动全屏', 'success');
|
}).catch(function(error) {
|
showMessage('自动全屏失败，可能需要手动点击播放', 'error');
|
console.log('全屏请求失败:', error);
|
});
|
// 开始播放
|
videoPlayer.play().catch(function(error) {
|
showMessage('自动播放失败，可能需要手动点击播放', 'error');
|
console.log('自动播放失败:', error);
|
});
|
});
|
|
// 视频加载错误事件
|
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>
|
