html5播放器怎么小窗播放器,悬浮画中画播放器插件,边工作边用小窗口看视频的摸鱼神器...
时间: 2024-05-03 12:18:44 浏览: 8
可以使用HTML5的Video API来实现小窗播放器和悬浮画中画播放器,下面是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>小窗播放器示例</title>
<style>
.video-container {
position: relative;
width: 640px;
height: 360px;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mini-video {
position: fixed;
bottom: 20px;
right: 20px;
width: 240px;
height: 135px;
background-color: #000;
z-index: 9999;
border-radius: 5px;
overflow: hidden;
display: none;
}
.mini-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="video-container">
<video class="video" src="video.mp4" controls></video>
</div>
<div class="mini-video">
<video src="video.mp4" controls></video>
</div>
<script>
const video = document.querySelector('.video');
const miniVideo = document.querySelector('.mini-video video');
const miniBtn = document.createElement('button');
miniBtn.innerText = '小窗';
video.parentNode.appendChild(miniBtn);
miniBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
}
miniVideo.src = video.src;
miniVideo.currentTime = video.currentTime;
miniVideo.play();
video.style.display = 'none';
miniVideo.parentNode.style.display = 'block';
});
miniVideo.addEventListener('click', () => {
video.currentTime = miniVideo.currentTime;
video.play();
video.style.display = 'block';
miniVideo.parentNode.style.display = 'none';
});
</script>
</body>
</html>
```
这个示例中使用了一个div来包裹原始的video元素,实现了小窗播放器的效果。当点击小窗按钮时,将原始的video元素暂停,然后将视频源和当前时间赋值给mini-video元素,然后播放mini-video元素。当用户点击mini-video元素时,将视频源和当前时间赋值给原始的video元素,然后播放原始的video元素。
悬浮画中画播放器的实现与小窗播放器类似,只需要将mini-video元素的样式改为fixed,并添加一些鼠标事件即可。