收藏
回答

全屏播放视频时,点击切换横竖屏,会触发x5videofexitullscreen?


交互需求:用户在播放列表点击视频,全屏播放,点击返回直接推出全屏。

个人实现思路:放一个隐藏的video标签,用户点击视频时,加载视频路径,全屏播放(即调用showVideo方法);退出时,暂停视频,隐藏video标签。

存在问题:当点击切换横竖屏的时候,会出发x5videofexitullscreen事件,跟用户点击返回按钮触发事件一样,导致视频退出。现在小弟找不到如何隐藏切换横竖屏的方法,也找不到其他有用的触发事件,请问大神有没有解决方案。

代码段:


html   
<video
 controls
 class="video__player"
 x-webkit-airplay="allow"
 x5-video-player-type="h5"
 x5-video-orientation="landscape|portrait"
></video>

js
  /**
 * 点击加载并播放视频
 * @param {event} e
 */
let showVideo = e => {
  let path = e.currentTarget.getAttribute("video-url");
  let title = e.currentTarget.getAttribute('video-title')
  let src = path;
  let video = document.querySelector(".video__player");
  document.getElementById('title').innerText = title
  video.setAttribute("src", src);
  // video.setAttribute("x5-video-orientation", "landscape");
  video.style.display = "block";
  video.style.visibility = "hidden";
  video.load();
  showLoading();
  video.play();
  // 请求全屏
  // video.requestFullscreen();
  if (video.requestFullscreen) {
    // 最新标准
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  }
};

let bindEvent = () => {
  let video = document.querySelector(".video__player");
  video.addEventListener('loadedmetadata', e => {})
  video.addEventListener("canplay", e => {
    hideLoading();
  });
  if (isIOS()) {
    video.addEventListener("webkitendfullscreen", e => {
      if (!video.paused) {
        video.pause();
      }
      video.style.display = "none";
      document.getElementById('title').innerText = 'Document'
    });
    video.addEventListener("webkitbeginfullscreen", e => {
      video.style.visibility = "visible";
      // video.play();
    });
  } else {
    video.addEventListener("x5videoexitfullscreen", e => {
      console.log(
        "x5videoexitfullscreen",
        document.x5videoexitfullscreen,
        document.webkitIsFullScreen, e, video
      );
      if (!video.paused) {
        video.pause();
      }
      video.style.display = "none";
      document.getElementById('title').innerText = 'Document'
    });
    video.addEventListener("x5videoenterfullscreen", e => {
      video.style.visibility = "visible";
    });
  }
  console.log(video)
};
最后一次编辑于  2019-12-29
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签