html5播放器怎么小窗播放器,悬浮画中画播放器插件,边工作边用小窗口看视频的摸鱼神器...
时间: 2024-05-12 19:13:28 浏览: 11
可以使用 HTML5 的 video 标签结合 JavaScript 实现小窗播放器。具体实现步骤如下:
1. 在 HTML 中添加 video 标签,设置 video 的 src 属性为要播放的视频地址。
```html
<video id="video" src="your_video_url"></video>
```
2. 在 CSS 中设置 video 的样式,包括宽高、位置等。
```css
#video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
```
3. 在 JavaScript 中添加事件监听,当 video 播放时创建小窗口播放器。
```javascript
var video = document.getElementById('video');
video.addEventListener('play', function() {
// 创建小窗口播放器
var smallPlayer = window.open('', 'smallPlayer', 'width=320,height=180');
var smallVideo = smallPlayer.document.createElement('video');
smallVideo.src = video.src;
smallPlayer.document.body.appendChild(smallVideo);
// 悬浮画中画播放器
smallPlayer.addEventListener('mousemove', function(e) {
smallPlayer.moveTo(e.screenX - smallPlayer.outerWidth / 2, e.screenY - smallPlayer.outerHeight / 2);
});
});
```
4. 在 JavaScript 中添加事件监听,当 video 暂停时关闭小窗口播放器。
```javascript
video.addEventListener('pause', function() {
// 关闭小窗口播放器
smallPlayer.close();
});
```
以上代码实现了在 video 播放时创建一个小窗口播放器,并且支持悬浮画中画播放器。你可以根据需要自定义样式和功能。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)