c# - YouTube埋め込みiframeブラックボックス

Question

JavaScript、YouTube プレーヤー API、C# asp.net 4.0、MS Visual Studio 2012 を使用。

次の JavaScript の壁があります。

<script type="text/javascript" src="/Scripts/swfobject.js"></script>    
<script type="text/javascript">

// Load the IFrame Player API code asynchronously.

if (!PreIe8()) {

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
var vidIndex;
var videoIdList;
var VideoName;
var pre8;


$(document).ready(function() {

    PlayVideoFromDropDown();
    videoIdList = GetVideoData();
    vidIndex = <%= VideoId %>;
    VideoName = '<% = VideoName %>';
    $("#taketest").hide();
    pre8 =  PreIe8();

    // The video to load.
    var videoID = videoIdList[vidIndex].youtubeId;





    console.log(videoID);
    $("#video_title").text(videoIdList[vidIndex].Name);



    if (true) {
        VideoSwitch(videoID);
        flagMovieWatched2(videoIdList[vidIndex].NewVideoId, vidIndex, videoIdList.length);
    }
});


function VideoSwitch(video) {



    // Lets Flash from another domain call JavaScript
    var params = { allowScriptAccess: "always" };
    // The element id of the Flash embed
    var atts = { id: "ytPlayer" };
    // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
    swfobject.embedSWF("http://www.youtube.com/embed/" + video + "?rel=0&autoplay=1&version=3&enablejsapi=1&playerapiid=ytPlayer",
        "ytPlayer", "520", "390", "9", null, null, params, atts);



}


function PlayVideoFromDropDown() {
    $("#videoSelection").on("change", function() {
        vidIndex = $(this).find(':selected').index();

        if (vidIndex > 0) {
            vidIndex = vidIndex - 1;
            $("#video_title").text(videoIdList[vidIndex].Name);

            if (true) {

                VideoSwitch(videoIdList[vidIndex].youtubeId);
                flagMovieWatched2(videoIdList[vidIndex].NewVideoId, vidIndex, videoIdList.length);

            } else {

                player.loadVideoById($(this).val());
            }

        }

    });

}

function onYouTubePlayerAPIReady() {

    if (!pre8) {
        console.log("Initialising API");
        player = new YT.Player('ytplayer', {
            height: '390',
            width: '520',
            enablejsapi: 1,
            playerVars: {
                'rel': 0,
                'modestbranding': 1
            },
            events:
                {
                    'onReady': onPlayerReady,
                    'onStateChange': ytStateChange
                }
        });

    }
}


function onPlayerReady() {
    console.log("vidIndex: " + vidIndex);
    playNextVideo();
}

function playVideoById(videoId) {
    console.log("video id = " + videoId);
    player.loadVideoById(videoId, 0, "default");
}

function playNextVideo() {
    console.log("Hi vid length = " + videoIdList.length);
    if (vidIndex < videoIdList.length) {
        var videoToPlay = videoIdList[vidIndex].youtubeId;
        console.log("Loading: " + videoToPlay);
        $("#video_title").text(videoIdList[vidIndex].Name);
        player.loadVideoById(videoToPlay, 0, "default");

    }
}

function GetVideoData() {
    var videoData = new Array();
    var video;
        <% foreach(var data in PlayListData) { %>
        video = new Object();
        video.id = '<%= data.VideoId %>';
        video.NewVideoId = '<%= data.NewVideoId %>';
        video.youtubeId = '<%= data.YoutubeVideoId %>';
        video.Name = '<%= data.Name %>';
        video.ModuleId = '<%= data.ModuleId %>';
        videoData.push(video);
        <% } %>
        return videoData;

    }


    function ytStateChange(state) {
        switch (state.data) {
            case YT.PlayerState.ENDED:
                console.log("Video Ended");


                console.log("video stats" + videoIdList[vidIndex].id + " " + vidIndex + " " + videoIdList.length - 1);
                flagMovieWatched2(videoIdList[vidIndex].NewVideoId, videoIdList.length - 1);
                vidIndex++;
                playNextVideo();
                break;
            case YT.PlayerState.PLAYING:
                console.log("Video Playing");
                break;
            case YT.PlayerState.PAUSED:
                console.log("Video Paused");
                break;
            case YT.PlayerState.BUFFERING:
                console.log("Video Buffering");
                break;
            case YT.PlayerState.CUED:
                console.log("Video Queued");
                break;
            default:
                console.log("Unstarted");
                break;
        }

    }


    function flagMovieWatched2(movieId, movieIndex, playlistIndex) {
        $.post("<%= SiteSettings.PublicVirtualPath %>ajax/videos/flagvideo2.aspx",
            {
                param_movie: movieId,
                movieIndex: movieIndex,
                playlistIndex: playlistIndex
            }, function(data) {

                if (data == "true") {
                    showButton();
                }
            });
    }


    function showButton() {
        $("#taketest").fadeIn();
    }

PC と iPad でテストを開始したところですが、PC は問題なく動作します。残念ながら、IPad ではブラック ボックスしか表示されず、プレイヤーのドロップ ダウン効果がまだ機能していて、奇妙に感じます。

Ipad で動作しない理由を調べる必要があります。PC では問題ないようで、必要な HTML5 のように見えますが、iPad では何もありません。

私は非常に限られた経験でこれに投げ込まれたことに注意してください. どんな助けでも大歓迎です！

補足: コードを完全に編集してみて、単純な呼び出しとラップを iframe に追加しました。これは機能しますが、他のすべての機能が失われます。

また、このコードを呼び出す ID を持つ DIV を削除して、Iframe ラップに置き換えようとしました。それが、ドロップダウン効果が得られるのにビデオがない理由だと思います。

さらに、問題を引き起こしている自動再生オプションに関する情報をいくつか見ました。URL に autoplay=0 を追加する必要があります。