<div class="layui-fluid layui-anim febs-anim" id="febs-video-player" lay-title="视频播放器">
|
<div class="layui-row febs-container">
|
<div class="layui-col-md12">
|
<div class="layui-fluid">
|
<div class="upload-container">
|
<div class="upload-header">
|
<h2>视频播放器</h2>
|
<p>支持视频文件播放和跳跃播放</p>
|
</div>
|
|
<!-- 播放区域 -->
|
<div class="play-container" id="playContainer">
|
<h3 style="margin-bottom: 20px; color: #333;">视频播放</h3>
|
<video id="videoPlayer" controls width="100%" height="auto" style="max-width: 800px;">
|
<source id="videoSource" src="" type="video/mp4">
|
您的浏览器不支持视频播放
|
</video>
|
<div class="layui-row layui-col-space10" style="margin-top: 20px;">
|
<div class="layui-col-xs12">
|
<div class="layui-input-inline" style="width: 400px;">
|
<input type="text" id="videoUrl" placeholder="请输入视频播放地址" class="layui-input">
|
</div>
|
<button class="layui-btn layui-btn-normal" id="loadVideo">加载视频</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<style>
|
.upload-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);
|
}
|
|
.upload-header {
|
text-align: center;
|
margin-bottom: 40px;
|
}
|
|
.upload-header h2 {
|
color: #333;
|
margin-bottom: 10px;
|
font-size: 24px;
|
}
|
|
.upload-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);
|
}
|
|
@media (max-width: 768px) {
|
.upload-container {
|
margin: 20px;
|
padding: 20px;
|
}
|
}
|
</style>
|
<script data-th-inline="javascript">
|
layui.use(['layer', 'jquery'], function() {
|
var layer = layui.layer,
|
$ = layui.jquery;
|
|
// 初始化
|
init();
|
|
function init() {
|
// 绑定加载视频按钮事件
|
$('#loadVideo').click(function() {
|
var videoUrl = $('#videoUrl').val().trim();
|
if (!videoUrl) {
|
layer.msg('请输入视频播放地址', {icon: 2});
|
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();
|
|
layer.msg('视频加载中...', {icon: 16, time: 0}, function() {
|
layer.closeAll();
|
layer.msg('视频加载完成', {icon: 1});
|
});
|
}
|
});
|
</script>
|
