YouTube嵌入iframe黑匣子

本文关键字:黑匣子 iframe 嵌入 YouTube | 更新日期: 2023-09-27 18:31:54

Using JavaScript, YouTube player 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 包装。 我认为这就是我获得下拉效果但没有视频的原因。

此外,我看到了一些关于自动播放选项的信息,我现在需要将 autoplay=0 添加到 url,但我不确定他是如何构建它的以及将其放入何处。

YouTube嵌入iframe黑匣子

我认为您的问题是"需要找出为什么它在 iPad 上不起作用",这是我对此的回答:

所有这些关于SWF和Flash的东西在设计上都不适用于iPad或iPhone,因为SWF/Flash被Apple/iOS阻止。