Playing youtube using <iframe> fails on iPho

I use the following HTML template with an to hand to a UIWebView. I understand that this is the supported way to play youtube videos.

<html>
<body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                                   playerVars: {'autoplay' : 1},
                                   height: 'VIDEO_HEIGHT',
                                   width: 'VIDEO_WIDTH',
                                   videoId: 'VIDEO_ID',
                                   events: {
                                   'onReady': onPlayerReady,
                                   'onStateChange': onPlayerStateChange
                                   }
                                   });
        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        var done = false;
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
                setTimeout(stopVideo, 6000);
                done = true;
            }
            if (event.data == YT.PlayerState.ENDED) {
                event.target.clearVideo();
                done = true;
            }
        }
        function stopVideo() {
            player.stopVideo();
        }
        </script>
</body>
</html>

Obviously, I substitute in the dynamic values for the HEIGHT, WIDTH and VIDEOID params. This has always worked fine under iOS 5 on iPhone and iPad. Now under iOS 6, when the user taps the triangle the video appears to download and try to start, then gives up. Here is what appears in the logfile:

> 2012-09-30 23:27:48.759 xxxxx[6219:c07] [MPAVController] Autoplay: Enabling autoplay
> 2012-09-30 23:27:48.759 xxxxx[6219:c07] [MPAVController] Autoplay: Skipping autoplay, disabled (for current item: 0, on player: 1)
> 2012-09-30 23:27:48.761 xxxxx[6219:c07] setting movie path: http://o-o---preferred---sn-ab5e6nll---v24---lscache1.c.youtube.com/videoplayback?upn=ag6FiVPe_XY&sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=907064%2C908457%2C908310%2C914072%2C922401%2C920704%2C912806%2C913419%2C913546%2C913556%2C919349%2C919351%2C925109%2C919003%2C912706&key=yt1&expire=1349086864&itag=18&ipbits=8&sver=3&ratebypass=yes&mt=1349062032&ip=96.232.106.90&mv=m&source=youtube&ms=au&cp=U0hTTlBTVF9LTkNOM19ITVhJOnRob1gwVHFmQWUw&id=04d71fcbfe79a176&signature=33A43FD457B9FC5DD70284826E7D9BF113F9C0BB.9BC87BDCF97DFCB64F967D2CAD1051D2FC80DAC0

Same results in Simulator (all supported models) and hardware device (iPhone 4s). Oddly, it still works just fine on iPad 2 (simulator and hardware), here is the logging:

> 2012-09-30 23:32:01.586 xxxxx[6390:c07] [MPAVController] Autoplay: Enabling autoplay
> 2012-09-30 23:32:01.586 xxxxx[6390:c07] [MPAVController] Autoplay: Skipping autoplay, disabled (for current item: 0, on player: 1)
> 2012-09-30 23:32:01.588 xxxxx[6390:c07] setting movie path: http://o-o---preferred---sn-ab5e6nll---v24---lscache1.c.youtube.com/videoplayback?upn=x7-Ydawtba4&sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=920921%2C926600%2C915704%2C914071%2C922401%2C920704%2C912806%2C913419%2C913546%2C913556%2C919349%2C919351%2C925109%2C919003%2C912706&key=yt1&expire=1349086864&itag=18&ipbits=8&sver=3&ratebypass=yes&mt=1349062271&ip=96.232.106.90&mv=m&source=youtube&ms=au&cp=U0hTTlBTVF9LTkNOM19ITVhJOmVQbjRzVUhBbFpF&id=04d71fcbfe79a176&signature=CD05405B78D1CD7987FE5B9F41DD2C15943BBC2E.863966BDB04003866C6740046C0C2499A0CC4DDD

I've seen some similar questions here recently, but so far no one has suggested what might be be happening. Can anybody suggest what might be going on?

Regards, -MpK-

回答1:

Your html worked fine for me (with HEIGHT, WIDTH and VIDEOID substitutions) as-is, loaded in a UIWebView on iOS 6, in both Simulator and device (iPhone 5).

Could the problem have been an intermittent YouTube or network problem? Have you tried again since or tried a different video ID?

Cheers, Chris

回答2:

I got the same issue. For me that was happening because i loaded video in viewWillAppear. viewWillAppear is called again after the you-tube video loaded. I fixed it by changing my code (viewWillAppear is called only in ios 6 after video loading)