为什么这个视频没有在 iPad Pro 横屏上显示？

Question

我的网站上有一个标准的 HTML5 <video>。

视频在大多数设备上都能正常播放，iPad Pro 的横向播放除外。它可以纵向工作。

这是视频代码：

<video autoplay poster="<?=$this->getThemePath() ?>/images/video-poster.jpg" id="bgvid" class="hidden-xs hidden-sm hidden-md" onended="run()">
            <source  type="video/mp4">
        </video>

        <script>

        video_count = getRandomizer( 1, 7 );            
        videoPlayer = document.getElementById("bgvid");

        window.onload = function () { 
        run();
        }


        function getRandomizer(min, max) {
          return Math.floor(Math.random() * (max - min)) + min;
        }

        function run(){
                // alert (video_count);
                video_count++;
                if (video_count == 9) video_count = 1;
                var nextVideo = "/doodles/"+video_count+".mp4";
                videoPlayer.src = nextVideo;
                videoPlayer.play();
       };

         $('#bgvid').click(function(){
            this.paused?this.play():this.pause();
         });
        </script>

        <script type="text/javascript">
            function vidplay() {
               var video = document.getElementById("bgvid");
               var button = document.getElementById("pause");
               if (video.paused) {
                  video.play();
                  button.html("<i class='fa fa-play'></i>");
               } else {
                  video.pause();
                  button.html("<i class='fa fa-pause'></i>");
               }
            }  
        </script>

你有什么建议？我需要使用某种设备检测 JS 或 jQuery 吗？

非常感谢所有帮助:)

Answer 1

你必须从你的视频元素中删除一些类名：

class="hidden-xs"

现在如果设备的屏幕宽度可能小于 iPad 在横向模式下的宽度，它将被隐藏。