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，它可以工作，但失去了所有其他功能。

ive 还尝试删除具有调用此代码的 ID 的 DIV，并将其替换为 Iframe 包装。我认为这就是我获得下拉效果但没有视频的原因。

另外，我看到了一些有关导致问题的自动播放选项的信息，我现在需要将 autoplay=0 添加到网址中，但我不确定他如何构建它以及将其插入何处。

Answer 1

我认为你的问题是“需要找出为什么它不能在 iPad 上运行”，这是我的答案:

所有有关 SWF 和 Flash 的功能在设计上都无法在 ipad 或 iPhone 上运行，因为 Apple/iOS 阻止了 SWF/Flash。