如何制作适用于 IOS 和桌面浏览器的自定义全屏视频按钮？

Posted 2023-02-23

【中文标题】如何制作适用于 IOS 和桌面浏览器的自定义全屏视频按钮？

【英文标题】：How to make a custom fullscreen video button that works on both IOS and desktop browser?

【发布时间】：2019-08-30 02:12:10

【问题描述】：

我是一名新手，正在努力建立一个视频网站。该网站适用于桌面和 ios，但在 iOS 中，我的全屏视频按钮不起作用。

如果我打开标签中的“控件”属性，那么 iOS 将显示苹果的原生控件以将视频置于全屏状态，因此我知道全屏视频适用于 iOS。本机控件与我的网站布局发生冲突，所以我不想拥有它们。当我删除“控件”属性时，它们不显示这是好的，但是没有办法将视频全屏显示。

我想要的是在桌面上运行的自定义全屏按钮在 iOS 上运行。我似乎无法将按钮与我从 Apple 开发指南中提取的 iOS 代码联系起来。

 <video id="tv" autoplay muted controls playsinline autoplay onended="fine()"webkitallowfullscreen mozallowfullscreen allowfullscreen>


<div id="fullscreenbutton" onclick="openFullscreen(); webkitbeginfullscreen(); webkitEnterFullscreen(); addFullscreenButton(); goFullscreen();"></div>

</script>

        <script type="text/javascript">

        var vid;

        function init() 

            vid = document.getElementById("tv");

            vid.addEventListener("loadedmetadata", addFullscreenButton, false);

        

        function addFullscreenButton() 

            if (vid.webkitSupportsFullscreen) 

                var fs = document.getElementById("fullscreenbutton");

                fs.style.visibility = "visible";

            

        

        function goFullscreen() 

            vid.webkitEnterFullscreen();

        

    </script>

我是新手，但我希望当点击全屏按钮时，它会在 ios 中播放全屏视频

【参考方案1】：

我实际上是通过使用它来工作的：

<script>
var video = document.getElementById('video'),
    play = document.getElementById('play'),
    time;
video.addEventListener('webkitbeginfullscreen', function() 
    play.innerText = 'play fullscreen video';
    window.clearInterval(time);
);
video.addEventListener('webkitendfullscreen', function() 
    video.pause();
);
play.addEventListener('touchstart', function() 
    time = window.setInterval(function() 
        try 
            video.webkitEnterFullscreen();
        
        catch(e) 
    , 250);
    play.innerText = 'loading ...';
    video.play();   
);
</script>

我在这里找到了它： https://gist.github.com/4rn0/3146246