Question

我想知道如何在使用javascript进入Iphone和ipad的全屏模式时暂停html5视频播放器。

似乎当它进入全屏时会转到原生播放器并且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（非本机播放器）上运行良好。＆GT;＆GT;＆GT;但它不适用于iphone（因为它自动加载本机播放器）。

Answer 1

你的timerStop函数有一个错别字;你没有调用palyPuased函数。它应该是playPause（）;

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

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

1 个答案: