<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://vjs.zencdn.net/7.10.2/video-js.css"
rel="stylesheet">
<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
overflow: hidden;
}
.container {
display: flex;
height: 100vh;
width: 100%;
}
.left-panel {
/* flex:flex-grow flex-shrink flex-basis: 项目放大比例/缩小比例/分配多余空间之前，项目占据的主轴空间; */
flex: 0 0 auto;
width: 30%;
min-width: 100px;
max-width: 80%;
background-color: #f0f0f0;
overflow: auto;
resize: none;
height: 100%;
}
.right-panel {
flex: 1 1 auto;
min-width: 100px;
background-color: #e0e0e0;
overflow: auto;
height: 100%;
}
.drag-handle {
flex: 0 0 8px;
background-color: #ccc;
cursor: col-resize;
height: 100%;
position: relative;
}
.drag-handle::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 2px;
width: 4px;
background-color: #999;
}
.drag-handle:hover {
background-color: #bbb;
}
.drag-handle:hover::after {
background-color: #777;
}
.video{
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<!-- 左侧内容 -->
<video id="my_video_1" class="video-js video" controls
preload="auto">
<source src="./video.mp4" type="video/mp4">
</video>
</div>
<div class="drag-handle" id="dragHandle"></div>
<div class="right-panel">
<!-- 右侧内容 -->
</div>
</div>
<!-- <svg width="200" height="200">
<rect width="100" height="100" fill="blue" stroke-width="3" />
</svg>
<br />
<svg width="200" height="200">
<rect x="10" y="50" width="100" height="100" fill="yellow"
stroke="red" stroke-width="10" stroke-width="0.8"
fill-opacity="1" />
</svg>
<br />
<svg width="500" height="200">
<polyline points="10,20 30,40 50,60" stroke="red"
stroke-width="10" />
</svg>
<br />
<svg width="500" height="200">
<polyline points="10,30 30,40 50,60 70,100" fill="none" stroke="red"
stroke-width="2" />
</svg>
<br />
<svg width="500" height="200">
<text x='0' y='20'> 11111111</text>
<text x='0' y='40' transform='rotate(20 30 40)'> 11111111</text>
<text x='0' y='60' transform='rotate(20)'> 11111111</text>
</svg>
<br /> -->
<!--
<svg width="200" height="200"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<a xlink:href="demo1.html" target='_black'>
<text x='0' y='20' fill="red" font-size='20' text-anchor='end'>
22222</text>
</a>
</svg>
<br /> -->
<!-- <svg width="500" height="400">
<path d="M0 0 L100 0 L50 50" fill="red"></path>
</svg>
<br /> -->
<!-- <svg width="500" height="400" fill="yellow">
<path d="M100 350 q150 -300 300 0 " fill="none" stroke="pink"
stroke-width="3"></path>
</svg>
<br />
<svg width="500" height="400" fill="yellow">
<defs>
<filter id='f1'>
<fegaussianblur stdDeviation='20' />
</filter>
</defs>
<rect width="100" height="100" fill="pink" stroke="yellow" stroke-width="4" filter="url(#f1)"
</svg>
<br /> -->
</body>
<script>
const dragHandle = document.getElementById('dragHandle');
const container = document.querySelector('.container');
const leftPanel = document.querySelector('.left-panel');
const rightPanel = document.querySelector('.right-panel');
let isDragging = false;
dragHandle.addEventListener('mousedown', (e) => {
isDragging = true;
document.body.style.cursor = 'col-resize';
leftPanel.style.userSelect = 'none';
leftPanel.style.pointerEvents = 'none';
rightPanel.style.userSelect = 'none';
rightPanel.style.pointerEvents = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const containerRect = container.getBoundingClientRect();
const percent = (e.clientX - containerRect.left) / containerRect.width * 100;
// 限制最小和最大宽度
const newPercent = Math.max(10, Math.min(80, percent));
leftPanel.style.width = `${newPercent}%`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
document.body.style.cursor = '';
leftPanel.style.userSelect = '';
leftPanel.style.pointerEvents = '';
rightPanel.style.userSelect = '';
rightPanel.style.pointerEvents = '';
});
</script>
</html>
