如何在iOS/iPad上进入全屏模式时停止HTML5视频播放器

How to stop a HTML5 video player when it enters the full screen mode on iOS / iPads?

本文关键字：模式播放器视频 HTML5 iOS iPad 更新时间：2023-09-26

我正试图弄清楚如何在html5视频播放器在Iphone和ipad中使用javascript进入全屏模式时暂停它。

当它进入全屏时，它似乎转到了本地播放器，javascript无法再控制播放？

<!doctype html>
<html>
<head>
    <title>Simple JavaScript Controller</title>
    <script type="text/javascript">
        /*--------------------------------------------------*/
        /* A Simple JavaScript Media Controller and Resizer */
        function playPause() {
            var myVideo = document.getElementsByTagName('video')[0];
            if (myVideo.paused){
                myVideo.play();
            }else{
                myVideo.pause();
            }
        }
       function makeBig() {
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.height = myVideo.videoHeight * 2;
       }
       function makeNormal() {
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.height = myVideo.videoHeight;
       }
        /*-------------------------------------------*/
        /* Using DOM Events to Monitor Load Progress */
        function getPercentProg() {
            var myVideo = document.getElementsByTagName('video')[0];
            var endBuf = myVideo.buffered.end(0);
            var soFar = parseInt(((endBuf / myVideo.duration) * 100));
            document.getElementById("loadStatus").innerHTML =  soFar + '%';
        }
       function myAutoPlay() {
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.play();
       }
       function addMyListeners(){
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.addEventListener('progress', getPercentProg, false);
           myVideo.addEventListener('canplaythrough', myAutoPlay, false);
       }
        /*----------------------------------------*/
        /* Replacing a Media Source Sequentially */
        function myNewSrc() {
            var myVideo = document.getElementsByTagName('video')[0];
            myVideo.src = "sample_iTunes.mov";
            myVideo.load();
            myVideo.play();
        }
        // add a listener function to the ended event
        function myAddListener(){            
            var myVideo = document.getElementsByTagName('video')[0];
            myVideo.addEventListener('ended', myNewSrc, false);
            myVideo.addEventListener('progress', getPercentProg, false);
        }

        function timerStop() {
            setTimeout(function(){ playPause(); alert("PAUSED");}, 3000);
        }
    </script>
</head>
<!--<body onload="addMyListeners()">-->
<body onload="myAddListener()">
    <div class="video-player" align="center">
        <video controls>
            <!--<source src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" type="video/ogg">-->
            <source src="sample_iPod.m4v">
            Your browser does not support the <code>video</code> element.
        </video>
        <p id="loadStatus">...</p>
        <p>
            <a href="javascript:playPause(); timerStop();">Play/Pause</a> |
            <a href="javascript:makeBig();">2x Size</a> |
            <a href="javascript:makeNormal();">1x Size</a>
        </p>
    </div>
</body>
</html>

注意：以上代码似乎在Chrome和Ipad safari（非本地玩家）上运行良好。>>但它在iPhone上不起作用（因为它会自动加载本地播放器）。

您的timerStop函数有拼写错误；您没有调用基于palyPuesed的函数。它应该是playPause（）；

  function timerStop() {
      setTimeout(function(){ playPause(); alert("PAUSED");}, 3000);
  }