首页 > 解决方案 > 在“元素”上执行“请求全屏”失败时出现错误:API 只能由用户手势启动

问题描述

我们有一个 cordova android 应用程序。我们想为我们的自定义 html 视频播放器启动全屏(方向上的视频标签更改为“横向主”)。

我们使用了 cordova-plugin-screen-orientation 来检测 screen.orientation.type 并添加了下面的代码

    document.addEventListener("deviceready",function()
{
window.addEventListener("orientationchange", function()
{
console.log(screen.orientation.type); // e.g. portrait
if(screen.orientation.type == 'landscape-primary')
{
console.log(video);
video.webkitRequestFullscreen;
$scope.launchFullscreen();
}
if(screen.orientation.type == 'portrait-primary')
{
$scope.exitFullscreen();
}
//alert(screen.orientation.type);
});
})

并在launchFullscreen下面使用

$scope.launchFullscreen = function () {
      if(video.requestFullscreen) {
        parentdiv.requestFullscreen();
      } else if(video.mozRequestFullScreen) {
        parentdiv.mozRequestFullScreen();
      } else if(video.webkitRequestFullscreen) {
         fullScreenButton.style.display = "none";
         exitfullScreenButton.style.display = "inline-block";
         parentdiv.style.height = "100%";
         parentdiv.webkitRequestFullscreen();
         videoPlayer.addEventListener('touchstart', function(event) {
          if(document.getElementById("custom-video-controls").style.display == "inline-block")
          {
            angular.element(document.getElementById("custom-video-controls").style.display="none");
          }
          else
          {
            angular.element(document.getElementById("custom-video-controls").style.display="inline-block");
          }
        }, false);
      }
    };

但我们收到错误消息“无法在‘元素’上执行‘requestFullscreen’:API 只能由用户手势启动。”

还尝试以编程方式触发 touchstart 事件,但弹出错误。让我们知道如何实现这些?

标签: angularcordovahtml5-videocordova-plugins

解决方案


推荐阅读