当前位置：网站首页>浏览器中的画中画（Picture-in-Picture）API

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

2022-07-31 05:17:00 【Forevermoremo】

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

<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>

https://segmentfault.com/a/1190000021217628

原网站

版权声明
本文为[Forevermoremo]所创，转载请带上原文链接，感谢
https://blog.csdn.net/sunny123x/article/details/110916000

边栏推荐

猜你喜欢

随机推荐