-3

我想在 JPlayer 中播放来自 youtube 的视频，但我不知道该怎么做。

感谢您的回答。

4

3 回答 3

3

我也找不到答案，所以我不得不编写自己的集成。

这是一个工作演示和更好的解释，以防将来有人需要它。

像这样使用它：

/* Load your playlist like this: ... */
[
    {
        title:"Finding Nemo Teaser",
        m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
    },

    /* YOUTUBE PART */
    {
        type: "youtube",
        title: "Finding Dory Trailer",
        m4v:"https://www.youtube.com/watch?v=cfLob5IYMp8",
    }
]

和

/* Put this somewhere ... */

$(function() {  
    /* Youtube Integration Setup */
    var setupYoutube = function(whereDivTo, width, height) {
        $("<div>").attr("id", "ytplayer").appendTo(whereDivTo);

        onYouTubeIframeAPIReady = function() {
            youtubeApi = new YT.Player("ytplayer", {
                width: width,
                height: height,
                videoId: "cfLob5IYMp8",
                playerVars: {
                    "autoplay": 1,
                    "color": "white",
                    "modestbranding": 1,
                    "rel": 0,
                    "showinfo": 0,
                    "theme": "light"
                },
                events: {
                    "onReady": function() {
                        $(document).trigger("ready.Youtube");
                    },
                    "onStateChange": "youtubeStateChange"
                }
            });
        }

        $.getScript("//www.youtube.com/player_api");
    },
    loadYoutubeListeners = function(player, jplayer, id) {
        var container = $(player.options.cssSelector.gui, player.options.cssSelectorAncestor);

        youtubeStateChange = function(ytEvent) {
            switch(ytEvent.data) {
                case -1:
                    $(ytEvent.target.getIframe()).show();
                    $(jplayer).find('video').hide();
                    container.css({ 'opacity' : 0, 'z-index': -1, 'position' : 'relative' });
                    container.find('.jp-interface').slideUp("slow");
                break;

                case YT.PlayerState.ENDED:
                    $(jplayer).trigger($.jPlayer.event.ended);
                break;

                case YT.PlayerState.CUED:
                    $(jplayer).find('video').show();
                    $(ytEvent.target.getIframe()).hide();
                    container.css({ 'opacity' : 1, 'z-index': 0 });
                    container.find('.jp-interface').slideDown("slow");

            }
        };

        youtubeApi.loadVideoById(id);
    }

    $(document).on($.jPlayer.event.setmedia, function(jpEvent) {
        var player = jpEvent.jPlayer,
            url = player.status.src;

        if(!player.html.video.available) return;
        if(typeof player.status.media.type === "undefined" || player.status.media.type != 'youtube') {
            if(window['youtubeApi'])
                if(youtubeApi.getPlayerState() != YT.PlayerState.CUED && youtubeApi.getPlayerState() != YT.PlayerState.ENDED)
                    return youtubeApi.stopVideo();

            return;
        }

        var youtubeId = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/)[1]

        if(window['youtubeApi'])
            loadYoutubeListeners(player, jpEvent.target, youtubeId);
        else {
            setupYoutube(jpEvent.target, player.status.width, player.status.height);

            $(document).on("ready.Youtube", function() {
                loadYoutubeListeners(player, jpEvent.target, youtubeId);
            });
        }
    });
});
于 2016-07-30T16:25:49.697 回答
-1

抱歉，您必须从 Youtube 下载视频并将其放在 Jplayer 所在的位置，然后进行配置

于 2012-11-30T17:36:12.230 回答
-1

您必须执行一个脚本，从 youtube 服务器中找到视频文件的链接，然后他们添加此链接以在 Jplayer 上播放此视频

于 2012-11-30T17:41:44.807 回答