|
发表于 2022-3-29 02:24:37
|
显示全部楼层
本帖最后由 夕幽幽 于 2022-3-29 15:10 编辑
ckplayer 的小窗口 功能的确很赞!
video 有H5 画中画接口:
1 JS文件(放在页面末尾)var video = document.getElementById("picture_id");
var btn_in = document.getElementById("pic_in");
var btn_out = document.getElementById("pic_out");
btn_in.onclick = function(){javascript:document.getElementById('pic_out').style.display='block';this.style.display='none';video.requestPictureInPicture();}
btn_out.onclick = function(){javascript:document.getElementById('pic_in').style.display='block';this.style.display='none';document.exitPictureInPicture();}
video.addEventListener('enterpictureinpicture', function() {console.log("已经进入画中画")});
video.addEventListener('leavepictureinpicture', function() {console.log("已退出画中画模式")});
2 在前端合适位置添加切换按钮<input type="button" id="pic_in" value="开" style="padding:4px 8px;border: 1px solid #264099;border-radius:100%;background:#264099;color:#ffffff;cursor:pointer;" title="开启画中画" />
<input type="button" id="pic_out" value="关" style="padding:4px 8px;border: 1px solid #2986C6;border-radius:50%;background:#2986C6;color:#ffffff;cursor:pointer;display:none;" title="退出画中画" />
3 在ckplayer.js中的video标签中添加 id="picture_id"
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
|