Video视频画中画效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Video视频画中画效果实例页面</title> <link rel="stylesheet" href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.css"> <style> .demo{width: 960px;margin: 0 auto;} video{width:100%;display: block; margin: 1em auto;} .layout{width:100%;max-width:100%;margin: 1em auto;} .output { border: 1px solid #ddd; background-color: #f5f5f5; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); padding: 10px; max-height: 480px; overflow: auto;} .output:empty::before { content: '这里记录操作状态，API支持情况等信息'; opacity: .75; } .clear { float: right; margin: -2.75em 0 0 8em; } </style> </head> <body> <div class="demo"> <video id="video" src="http://dl1.gj3.wangyuan.com/downloader/20180817/zhkokrbt/gjqt3_03.mp4" poster="http://i1.gbimg.cn/zt/2018/04/20/gjqt3x2018y20m/myc36x/images/yl/img1.jpg" controls playsinline loop></video> <div class="layout"> <input type="button" id="pipBtn" class="ui-button ui-button-primary button button-primary" value="点击进入画中画状态"> <h4>输出log：</h4><a href="javascript:" class="clear" onClick="output.innerHTML='';">清除log</a> <div id="output" class="output"></div> <p><small class="description">Tips: 画中画视频尺寸可以拉伸</small></p> <a href="https://www.zhangxinxu.com/wordpress/2018/12/html5-video-play-picture-in-picture/" target="_blank">原文地址</a> </div> </div> </body> <script> var log = function (content) { if (!output.innerHTML) { output.innerHTML = content; } else { output.innerHTML += '<br>' + content; } output.scrollTop = 99999; }; var pipWindow; pipBtn.addEventListener('click', function (event) { log('切换Picture-in-Picture模式...'); // 禁用按钮，防止二次点击 this.disabled = true; try { if (video !== document.pictureInPictureElement) { // 尝试进入画中画模式 video.requestPictureInPicture(); } else { // 退出画中画 document.exitPictureInPicture(); } } catch (error) { log('> 出错了！' + error); } finally { this.disabled = false; } }); // 点击切换按钮可以触发画中画模式，同样，在有些浏览器中，右键也可以切换，甚至可以自动进入画中画模式 video.addEventListener('enterpictureinpicture', function (event) { log('> 视频已进入Picture-in-Picture模式'); pipBtn.value = pipBtn.value.replace('进入', '退出'); pipWindow = event.pictureInPictureWindow; log('> 视频窗体尺寸为：' + pipWindow.width + ' x ' + pipWindow.height); // 添加resize事件，一切都是为了测试API pipWindow.addEventListener('resize', onPipWindowResize); }); // 退出画中画模式时候 video.addEventListener('leavepictureinpicture', function (event) { log('> 视频已退出Picture-in-Picture模式'); pipBtn.value = pipBtn.value.replace('退出', '进入'); // 移除resize事件 pipWindow.removeEventListener('resize', onPipWindowResize); }); // 视频窗口尺寸改变时候执行的事件 var onPipWindowResize = function (event) { log('> 窗口尺寸改变为：' + pipWindow.width + ' x ' + pipWindow.height); } /* 特征检测 */ if ('pictureInPictureEnabled' in document == false) { log('当前浏览器不支持视频画中画。'); togglePipButton.disabled = true; } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » Video视频画中画效果