菜鸟教程小白 发表于 2022-12-13 09:35:09

ios - ipad/iphone上的webkitIsFullScreen？


                                            <p><p>我有一个应用程序，只要方向改变(ipad/iphone)，就需要刷新页面。在此应用程序中，HTML5 视频也会在 UX 中的特定时间呈现。每当用户在全屏模式下观看视频时，如果设备尚未处于该模式，他们的第一个倾向是将设备旋转到横向。然而，当他们这样做时，它会触发令人讨厌的页面重新加载，从而有效地结束他们的观看 session 。通过利用 webkit 全屏 API，我能够编写逻辑来控制这种行为，它可以在 Safari 桌面以及开发人员工具中选择的 iPad/iPhone 用户代理上完美运行，但它不适用于 nativeiphone/ipad .</p>

<p>document.webkitIsFullScreen 在 Safari 的控制台中正确返回 false/true，但在 iphone/ipad 上显示为未定义。谁能告诉我如何在 ipad/iphone 上完成此操作，因为这些是唯一需要此功能的设备？还是我忽略了一个更简单的解决方案？非常感谢任何帮助!</p>

<pre><code>$(document).ready( function () {

    var video = document.getElementById(&#39;video&#39;);

    var canrefresh = true;      

    video.addEventListener(&#34;webkitfullscreenchange&#34;,function(){
      // Detects if video is in full screen mode and toggles canrefresh variable
      // canrefresh = false when webkitfullscreenchange event is heard
      // canrefresh = true after exiting full screen
      if (canrefresh == true) {
            canrefresh = false;
      } else {
            canrefresh = true;
      }

      console.log(document.webkitIsFullScreen+&#39; | &#39;+canrefresh);
    }, false);

    $(window).resize(function() {
      // Look to make sure not in full screen, and canrefresh variable is true before refreshing page
      if((document.webkitIsFullScreen == false) &amp;&amp; (canrefresh == true)){
            window.location = window.location.href+&#39;?v=&#39;+Math.floor(Math.random()*1000);
      }
    });

    console.log(document.webkitIsFullScreen+&#39; | &#39;+canrefresh);
    $(&#39;body .test&#39;).text(document.webkitIsFullScreen+&#39; | &#39;+canrefresh); // document.webkitIsFullScreen is returning &#39;false&#39; in Safari (correct), but &#39;undefined&#39; on native iphone/ipad device

});
</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>与 Mobile Safari 兼容的等效属性是 <a href="http://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/javascript/instp/HTMLVideoElement/webkitDisplayingFullscreen" rel="noreferrer noopener nofollow"><code>webkitDisplayingFullscreen</code></a> <code>HTMLVideoElement</code> DOM 对象的属性。</p></p>
                                   
                                                <p style="font-size: 20px;">关于ios - ipad/iphone上的webkitIsFullScreen？，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/7897018/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/7897018/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: ios - ipad/iphone上的webkitIsFullScreen？