HTML5视频播放器的小窗播放功能

最新推荐文章于 2025-11-24 17:18:55 发布

原创最新推荐文章于 2025-11-24 17:18:55 发布 · 381 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #小窗播放 #视频小窗 #视频html5播放器

第1部分：云平台视频小窗播放功能

视频平台上的画中画（Picture-in-Picture, PIP）效果，通常也称为小窗播放，它的作用主要体现在以下几个方面，极大地提升了用户体验和多任务处理的效率。

DEMO演示：视频画中画播放

1.正常窗口播放

2.小窗播放效果

3.代码实例

<div id="player"></div>
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script>
<script>
  var player = polyvPlayer({
  wrap: '#player',
  width: 800,
  height: 533,
  pictureInPicture:true, pictureInPictureLevel:2,// 是否在控制栏显示画中画按钮
  vid: '88083abbf5bcf1356e05d39666be527a_8', 
  playsafe:'81814fed-bdd0-4506-bec1-ebc8093148c5-hfevwsfxcsbcocx', 
  //playsafeUrl:'https://myDomain.com/token', 
  ts:'1568131545000',
  sign:'88313661ba7ded642c7b557b0a364b4b'
  });
</script>

第2部分：原生视频小窗播放功能

小窗播放示例（1）

<video id="myVideo" src="your_video.mp4" controls width="640" height="360"></video>
<button id="pipButton">小窗播放</button>

<script>
    const video = document.getElementById('myVideo');
    const pipButton = document.getElementById('pipButton');

    // 检查浏览器是否支持画中画
    if ('pictureInPictureEnabled' in document) {
        pipButton.addEventListener('click', () => {
            if (document.pictureInPictureElement) {
                // 如果已经在画中画模式，则退出
                document.exitPictureInPicture()
                    .catch(error => console.error('退出画中画失败:', error));
            } else {
                // 请求进入画中画模式
                video.requestPictureInPicture()
                    .catch(error => console.error('进入画中画失败:', error));
            }
        });

        // 监听画中画模式的进入和退出
        video.addEventListener('enterpictureinpicture', () => {
            console.log('视频已进入画中画模式');
            pipButton.textContent = '退出小窗';
        });

        video.addEventListener('leavepictureinpicture', () => {
            console.log('视频已退出画中画模式');
            pipButton.textContent = '小窗播放';
        });
    } else {
        pipButton.disabled = true;
        pipButton.textContent = '您的浏览器不支持小窗';
    }
</script>

小窗播放示例（2）

<style>
    body {
        margin: 0;
        height: 200vh; /* 模拟页面滚动 */
    }
    #videoWrapper {
        position: relative; /* 初始位置 */
        width: 640px;
        height: 360px;
        background-color: black;
        overflow: hidden; /* 确保视频内容不溢出 */
    }
    #myVideo {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 保持视频比例 */
    }

    /* 小窗模式样式 */
    .mini-player #videoWrapper {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 320px; /* 小窗宽度 */
        height: 180px; /* 小窗高度 */
        z-index: 9999; /* 确保在其他内容之上 */
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        transition: all 0.3s ease-in-out; /* 平滑过渡 */
    }
    .mini-player #myVideo {
        /* 在小窗模式下可能需要调整控件显示或隐藏 */
    }
</style>

<div id="videoWrapper">
    <video id="myVideo" src="your_video.mp4" controls></video>
    <button id="toggleMiniPlayer" style="position: absolute; top: 10px; right: 10px;">小窗</button>
</div>

<p style="margin-top: 400px;">这里是页面的其他内容，可以滚动。</p>

<script>
    const videoWrapper = document.getElementById('videoWrapper');
    const toggleMiniPlayerBtn = document.getElementById('toggleMiniPlayer');
    const myVideo = document.getElementById('myVideo');

    let isMiniPlayer = false;

    toggleMiniPlayerBtn.addEventListener('click', () => {
        isMiniPlayer = !isMiniPlayer;
        if (isMiniPlayer) {
            document.body.classList.add('mini-player');
            toggleMiniPlayerBtn.textContent = '退出小窗';
            // 可以根据需要在此处控制视频的播放/暂停
            // myVideo.play();
        } else {
            document.body.classList.remove('mini-player');
            toggleMiniPlayerBtn.textContent = '小窗';
            // myVideo.play(); // 退出小窗后可能希望继续播放
        }
    });

    // 拖拽功能（简化版，仅供参考）
    let isDragging = false;
    let offsetX, offsetY;

    videoWrapper.addEventListener('mousedown', (e) => {
        if (isMiniPlayer && e.target !== myVideo && e.target !== toggleMiniPlayerBtn) {
            isDragging = true;
            offsetX = e.clientX - videoWrapper.getBoundingClientRect().left;
            offsetY = e.clientY - videoWrapper.getBoundingClientRect().top;
            videoWrapper.style.cursor = 'grabbing';
        }
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            videoWrapper.style.left = (e.clientX - offsetX) + 'px';
            videoWrapper.style.top = (e.clientY - offsetY) + 'px';
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        videoWrapper.style.cursor = 'grab';
    });
</script>

热门原创推荐

视频加密与在线教育文章

AI工具类文章

FFmpeg视频编码