浏览器中的画中画（Picture-in-Picture）API

最新推荐文章于 2024-04-03 18:18:12 发布

Forevermoremo

最新推荐文章于 2024-04-03 18:18:12 发布

阅读量1.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sunny123x/article/details/110916000

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

画中画的应用随处可见啊，淘宝的直播界面悬浮窗口，哔哩哔哩视频以及豆瓣视频等都有使用到。

<body>
    <video controls autoplay loop muted id="video" src="./video.mp4" poster="./poster.png"></video>
    <div>
        <button id="enter">进入画中画</button>
        <button id="exit">退出画中画</button>
        <span id="tips"></span>
    </div>
   <script>
        const video = document.getElementById('video');
        const enter = document.getElementById('enter');
        const exit = document.getElementById('exit');
        const tips = document.getElementById('tips');
        // 进入画中画
        enter.addEventListener('click', (event) => {
            video.requestPictureInPicture().catch(error => {
                console.log(error);
            });
        });
        // 退出画中画
        exit.addEventListener('click', (event) => {
            document.exitPictureInPicture().catch(error => {
                console.log(error);
            });
        });

   </script>
</body>