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

Question

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

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

我想要在桌面上运行的自定义全屏按钮在 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

中进入全屏视频

Answer 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

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

How to make a custom fullscreen video button that works on both IOS and desktop browser?

html

javascript

video

fullscreen

ios