可以使用HTML5的video标签来处理视频播放。要在HTML中启用picture-in-picture和全屏模式，需要使用JavaScript和CSS。
使用JavaScript中的requestPictureInPicture()方法来请求picture-in-picture模式。必须在用户交互（例如单击按钮）之后才能调用此方法。在进入picture-in-picture模式后，可以使用exitPictureInPicture()方法退出。
const video = document.querySelector('video');
const pipButton = document.querySelector('#pip-button');
pipButton.addEventListener('click', () => {
video.requestPictureInPicture();
});
// 退出picture-in-picture模式
video.addEventListener('leavepictureinpicture', () => {
// do something
});可以使用JavaScript中的requestFullscreen()方法来请求全屏模式。必须在用户交互（例如单击按钮）之后才能调用此方法。在进入全屏模式后，可以使用exitFullscreen()方法退出。
const video = document.querySelector('video');
const fullscreenButton = document.querySelector('#fullscreen-button');
fullscreenButton.addEventListener('click', () => {
video.requestFullscreen();
});
// 退出全屏模式
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
// do something
}
});为了使视频填充整个屏幕，需要使用CSS设置video元素的宽度和高度为100%。另外，为了使picture-in-picture和全屏模式按钮可见，需要将它们放在视频元素的上层。
video {
width: 100%;
height: 100%;
}
.button {
position: absolute;
z-index: 1;
}需要注意的是，这些功能可能在不同的浏览器中有所不同，因此最好在不同的浏览器中进行测试和调试。