Javascript 如何制作在IOS和桌面浏览器上都可以使用的自定义全屏视频按钮？

我是一个新手，正在努力建立一个视频网站。该网站可在桌面和iOS上运行，但在iOS中，“我的全屏视频”按钮不起作用

如果我打开标签中的“controls”属性，iOS将显示apple的本机控件以全屏显示视频，这样我就知道全屏视频适用于iOS。本机控件与我的网站布局冲突，因此我不希望使用它们。当我删除“控制”属性时，它们不会显示好的内容，但无法将视频全屏显示

我想要的是我的自定义全屏按钮，工作在桌面上的工作在iOS上。我似乎无法将这个按钮与我从苹果开发指南中提取的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>

var vid；
函数init（）{
vid=document.getElementById（“tv”）；
参见addEventListener（“loadedmetadata”，addFullscreenButton，false）；
}
函数addFullscreenButton（）{
if（参见WebKit SupportsFullScreen）{
var fs=document.getElementById（“fullscreenbutton”）；
fs.style.visibility=“可见”；
}
}
函数goFullscreen（）{
vid.webkitEnterFullscreen（）；
}

---

我是一个新手，但我希望当点击全屏按钮时，它会变成ios中的全屏视频

<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>

var video=document.getElementById（'video'），
play=document.getElementById（'play'），
时间
video.addEventListener（'webkitbeginfullscreen'，function（）{
play.innerText='播放全屏视频'；
窗口。清除间隔（时间）；
});
video.addEventListener（'webkitendfullscreen'，function（）{
video.pause（）；
});
play.addEventListener（'touchstart'，function（））{
time=window.setInterval（函数（）{
试一试{
video.webkitEnterFullscreen（）；
}
捕获（e）{}
}, 250);
play.innerText='loading…'；
video.play（）；
});

我在这里找到的：