头像

html5 视频画中画功能 直播视频站画中画代码

资源/模板错误反馈 收集员 2019-03-15浏览(974)   

html5 视频画中画功能 直播视频站画中画代码
查看演示 下载资源: 52下载资源下载积分:10

JS代码:

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;
  }
});

// 点击切换按钮可以触发画中画模式,
// 在有些浏览器中,右键也可以切换,甚至可以自动进入画中画模式
// 因此,一些与状态相关处理需要在专门的监听事件API中执行
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;
}


HTML代码

<video id="video" src="./fish.mp4" controls playsinline loop></video>
                    
<input type="button" id="pipBtn" value="点击进入画中画状态">


标签:画中画
积分:新注册可得1积分|评论每次可得1积分每天5次[充值1元=10积分]AD:Php/Tp5程序开发二次开发联系QQ839070295
评论0
头像

模板缺失不完整!联系我!