带有JW PLayer 8的播放列表书架

Question

我正在使用JW Plawer 8的播放列表模式架子，如此处所述。

Playlist Shelf JW Player 8

我在.js文件中添加了代码（//开始播放列表架子示例），但是我收到有关.setup函数的错误消息。

非常感谢您。

这是我的register.js代码的样子：

/ ***************代表一般****************************** /

// URL du serveur http
var BASE_URL_HTTP = 'https://ressources-streaming2.cned.fr/';
/*
if (window.location.protocol == 'https:') {
    BASE_URL_HTTP = 'https://ressources-streaming2.cned.fr/';
} else {
    BASE_URL_HTTP = 'http://ressources-streaming2.cned.fr:8080/';
}
*/

// URL du serveur de pseudo streaming http (ressources disponible avec le protocole en http)
var BASE_STREAM_HTTP = 'http://stream2.cned.fr:8800/';
var NOM_JW_PLAYER = 'jwplayer.js';
var NOM_FLASH_PLAYER = 'jwplayer.flash.swf';

//URL de la bibliothèque de jwplayer8
var CHEMIN_JW_PLAYER = BASE_URL_HTTP + 'jwplayer/v8_4_1/' + NOM_JW_PLAYER;
//URL de du lecteur flash (utilise pour streamer les fichiers flash)
var CHEMIN_FLASH_PLAYER = BASE_URL_HTTP + 'jwplayer/v8_4_1/' + NOM_FLASH_PLAYER;
//URL de stockage des skins
var CHEMIN_SKIN_JW_PLAYER = BASE_URL_HTTP + 'jwplayer/v8_4_1/skins/';

//URL du serveur de streaming
var BASE_STREAM_RTMP = 'rtmp://stream1.cned.fr/';
var RTMP_VOD = BASE_STREAM_RTMP + 'vod/';
var HTTP_VOD = BASE_STREAM_HTTP;
var RTMP_LIVE = BASE_STREAM_RTMP + 'live/';

//Répertoire de stockage des ressources sur le serveur
var REP_RESSOURCES = 'ressources_streaming/'


var playerInstance = jwplayer('DivPlayerJWP');

部分视频

/**********************************************************************************************************************/
/* Fonction InsererVideoJW : Permet d'insérer un lecteur Vidéo basé sur JWPlayer V                                    */
/*-----------------------------------------------------------------------------------------------------------------*/
/* Paramètres:                                                                                                        */
/*  nomDiv : Nom du DIV dans lequel on veut ajouter le lecteur                                                        */
/*  nomObject : id du lecteur                                                                                         */
/*  width : Largeur de la vidéo                                                                                       */
/*  height : Hauteur de la vidéo                                                                                      */
/*  serveurRTMP : serveur RTMP par lequel est streamé le fichier                                                      */
/*  cheminFichier : Localisation complète du fichier visé                                                             */
/*  autostart : permet de démarrer la vidéo au chargement                                                             */
/*  image : permet de spécifier une image au chargement                                                               */
/*  skinName : Skin personnalisé (dossier skin hébergé sur serveur flash contenant un fichier XML)                     */
/*  caption : true /false autorise l'affichage des sous-titre s'ils existent.                                         */
/**********************************************************************************************************************/
function InsererVideoJW(nomDiv, nomObject, width, height, serveurRTMP, cheminFichier, autostart, image, skinName, caption, chapters, logo, adwaysId) {

    //Calcul de l'extension du fichier passé en paramètre (.smil/.rss/.f4v/.mp4)
    var fileURLext = cheminFichier.substring(cheminFichier.lastIndexOf("."));
    //console.log("Extension du fichier" + ' : ' + fileURLext);

    //Calcul de l'URL du fichier passé en paramètre sans l'extension  
    var baseCheminFichier = "";

    // Si l'URL du fichier contient un point (.) alors on prend tout ce qui précède ce point comme URL de base
    if (cheminFichier.indexOf('.') != -1) baseCheminFichier = cheminFichier.substr(0, cheminFichier.lastIndexOf('.'));
        // Sinon on reprend le fichier passé en paramètre tel quel
    else baseCheminFichier = cheminFichier;

    // Si l'url de base possède les 2 points (:) lors on prend tout ce qui suit les 2 ce point comme URL de base
    if (cheminFichier.indexOf(':') != -1) baseCheminFichier = baseCheminFichier.substring(baseCheminFichier.indexOf(":") + 1);

    // nom fichier vidéo et reduction a 8 caracteres exactement pour mediaid
    var mediaid = getJWmediaid(baseCheminFichier);

    /*Gestion du démarrage automatique*/
    if ((autostart === undefined) || (autostart == ""))
        autostart = "false";

    /*Gestion de l'apparence du lecteur*/
    if ((skinName === undefined) || (skinName == ""))
    { skinName = "seven"; }


    /*gestion de l'image */
    // chemin de l'image généré automatique à partir du nom de fichier
    if ((image === undefined) || (image == "")) {
        image = BASE_URL_HTTP + REP_RESSOURCES + baseCheminFichier + ".jpg";
    }

    var captions = [{}];

    if ((caption === undefined) || (caption == ""))
        caption = "false";

    if ((chapters === undefined) || (chapters == ""))
        chapters = "false";

    /*Gestion du sous-titrage */
    if (caption == 'true') {

        var captionXml = BASE_URL_HTTP + REP_RESSOURCES + baseCheminFichier + ".vtt";
        captions.push({
            file: captionXml,
            label: "On",
            kind: "captions"
        });
    }

    /*Gestion du chapitrage */
    if (chapters == 'true') {

        var chaptersVTT = BASE_URL_HTTP + REP_RESSOURCES + baseCheminFichier + "_chap.vtt";
        captions.push({
            file: chaptersVTT,
            kind: "chapters"
        });
    }

    var logoDesc = {};
    var logoFile = BASE_URL_HTTP + 'logoCNED.png';
    var logoFileBig = BASE_URL_HTTP + 'logoCNEDbig.png';

    if (logo === undefined) logo = "";

    if (logo == "br") 
    {
        logoDesc = {
            file: logoFileBig,
            link: "http://www.cned.fr",
            position: "bottom-right",
            margin: "0"
        };
    }
    else if (logo == "tl") 
    {
        logoDesc = {
            file: logoFile,
            link: "http://www.cned.fr",
            position: "top-left"
        };
    }
    else
    {
        logoDesc = {
            file: logoFile,
            link: "http://www.cned.fr"
        };
    }

    /*Configuration de base du lecteur*/
    var jwparam = {
        autostart: autostart,
        image: image,
        skin: { name: skinName },
        width: width,
        height: height,
        flashplayer: CHEMIN_FLASH_PLAYER,
        primary: "flash",
        logo: logoDesc,
        displaytitle: false
    };

    // Playlist au format smil
    if (fileURLext == ".smil") {
        //construction du fichier utilisé pour le téléchargement progressif (sur mobile): http://en.wikipedia.org/wiki/Progressive_download
        var fallback = BASE_STREAM_HTTP + baseCheminFichier + ".mp4";
        //console.log("fallback" + ' : ' + fallback);
        //définition de l'URL pour la playlist smil 
        var smil = BASE_URL_HTTP + REP_RESSOURCES + cheminFichier;

        //console.log("smil" + ' : ' + smil);
        //Ajout de la playlist aux paramètres jwplayer
        jwparam.playlist = [{
            captions:captions,
            image: jwparam.image,
            sources: [{
                file: smil
            }, {
                file: fallback
            }],
            mediaid: mediaid,
            title: mediaid
        }];
    }
        //Playlist au format rss
    else if (fileURLext == ".rss") {
    //console.log("RSS");
        var rss = BASE_URL_HTTP + REP_RESSOURCES +cheminFichier;
        //console.log("rss" + ' : ' + rss);
        jwparam.playlist = rss;
        //console.log("jwparam.playlist" + ' : ' + jwparam.playlist);
        jwparam.displaytitle = true;
        //dans le cadre d'une demande accessibilité, on utilise les playlist RSS pour faire du streaming en priorité html5
        jwparam.primary = "html5";
    }
    else if (serveurRTMP == RTMP_VOD) {

        //jwparam.file = serveurRTMP + cheminFichier;
        jwparam.playlist = [{
            captions:captions,
            image: jwparam.image,
            sources: [{
                file: serveurRTMP + fileURLext.substring(1) + ":" + baseCheminFichier + fileURLext
            }, {
                file: BASE_STREAM_HTTP + baseCheminFichier+fileURLext
            }],
            mediaid: mediaid,
            title: mediaid
        }];
        //console.log("jwparam.playlist[0].sources[0].file" + ' : ' + jwparam.playlist[0].sources[0].file);
        //console.log("jwparam.playlist[0].sources[1].file" + ' : ' + jwparam.playlist[0].sources[1].file);
    }
    else if (serveurRTMP == RTMP_LIVE) {
        jwparam.playlist = [{
            file: serveurRTMP + baseCheminFichier,
            mediaid: mediaid,
            title: mediaid
        }];
    }
    else if (serveurRTMP.indexOf('rtmp') != -1) {
        jwparam.playlist = [{
            captions:captions,
            image: jwparam.image,
            file: serveurRTMP + fileURLext.substring(1) + ":" + baseCheminFichier + fileURLext,
            mediaid: mediaid,
            title: mediaid
        }];
        //console.log("jwparam.playlist[0].file" + ' : ' + jwparam.playlist[0].file);
    }
    else
    {
        jwparam.playlist = [{
            captions:captions,
            image: jwparam.image,
            file: serveurRTMP + baseCheminFichier+fileURLext,
            mediaid: mediaid,
            title: mediaid
        }];
    }

    //initialisation du lecteur
    if ((adwaysId != null) && (adwaysId != ""))
    {
        playerInstance.setup(jwparam).on('ready', function() {
            if (typeof adways != 'undefined') 
            {
                //console.log("create experience adways");
                var experience = new adways.interactive.Experience();
                experience.setPlayerClass("jwplayer7"); // anciennement adways.playerHelpers.JWPLAYER7
                experience.setPlayerAPI(this);
                experience.setPublicationID(adwaysId);
                experience.load();
            }
        });
    }
    else
    {
        playerInstance.setup(jwparam);
    }
}

部分播放列表

/************************************************************************************************************/
/* Fonction InsererPlaylistJW : Permet d'insérer une playlist de médias basé sur JWPlayer                   */
/*-------------------------------------------------------------------------------------------------------*/
/* Paramètres:                                                                                              */
/*  nomDiv : Nom du DIV dans lequel on veut ajouter le lecteur                                              */
/*  nomObject : id du lecteur                                                                               */
/*  width : Largeur du lecteur                                                                              */
/*  height : Hauteur du lecteur                                                                             */
/*  playlistXML : Localisation complète de la playlist (fichier XML)                                        */
/*  playlistPosition : Position de la playlist (right, left)                                                */
/*  playlistSize : Taille de la playlist                                                                    */
/*  skinName : Skin personnalisé (dossier skin hébergé sur serveur flash contenant un fichier XML)           */
/*  autostart : permet de démarrer la vidéo au chargement                                                   */
/************************************************************************************************************/
function InsererPlaylistJW(nomDiv, nomObject, width, height, playlistXML, playlistPosition, playlistSize, skinName, autostart) {

    /*Gestion du démarrage automatique*/
    if (autostart == "") {
        autostart = "true";
    }
    /*Gestion de l'apparence du lecteur*/
    if ((skinName === undefined) || (skinName == ""))
    { skinName = "seven"; }

    var logoFile = BASE_URL_HTTP + 'logoCNED.png';

    /*Configuration du lecteur*/
    var jwparam = {
        allowfullscreen: "true",
        allowscriptaccess: "always",
        wmode: "opaque",
        playlist: playlistXML,
        flashplayer: CHEMIN_FLASH_PLAYER,
        height: height,
        primary: "flash",
        width: width,
        skin: { name: skinName},
        logo: {
            file: logoFile,
            link: "http://www.cned.fr"
        },
        listbar: {
            position: playlistPosition,
            size: playlistSize
        },
        analytics: {
            enabled: false
        }
    };

    //initialisation du lecteur
    playerInstance.setup(jwparam);
}

/************************************************************************************************************/
/* Fonction InsererMediaURL : Permet d'insérer un lecteur Vidéo basé sur JWPlayer dans une iframe           */
/*----------------------------------------------------------------------------------------------------------*/
/* Paramètres: ATTENTION aucun paramètre de fonction mais récupération dans l'URL en GET                    */
/* media : le chemin vers le media sur VOD (obligatoire)                                            */
/* image : vignette avant la lecture                                        */
/* nomdiv : id de DIV pour la video                                         */
/* nomobj : nom de balise OBJECT                                        */
/* autostart : demarrage automatique                                        */
/************************************************************************************************************/

/* Fonction permettant la récupération d'un paramètre dans l'URL de la page */
function recupParametreUrl(NomParam, defaut) {

    if (defaut == null) defaut = "";

    NomParam = NomParam.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

    var regex = new RegExp("[\\?&]" + NomParam + "=([^&#]*)");
    var monparametre = regex.exec(window.location.href);

    if (monparametre == null)
        return defaut;
    else
        return monparametre[1];
}

function InsererMediaURL() {

    /* Récupération des paramètres dans l'URL */
    var media = recupParametreUrl('media');
    media = unescape(media);


    var image = recupParametreUrl('image');
    if (image != "") {
        image = unescape(image);
    }

    // p.brouard : on ne permet plus de choisir le nomdiv car on utilise qu'une seul balise DIV (08/2015)
    //var nomdiv = recupParametreUrl('nomdiv');
    //if (nomdiv == "") { nomdiv = "DivPlayerJWP"; }
    var nomdiv = "DivPlayerJWP";

    var nomobj = recupParametreUrl('nomobj');
    if (nomobj == "") { nomobj = nomdiv + "0"; }

    var autostart = recupParametreUrl('autostart');
    if (autostart != "true") { autostart = "false"; }

    var mini = recupParametreUrl('mini');
    if (mini == "mini") { mini = "true"; }

    var logo = recupParametreUrl('logo');
    if (!logo) logo = "";

    var chapters = recupParametreUrl('chapters');
    if (chapters != "true") { chapters = "false"; }

    var caption = recupParametreUrl('caption');
    if (caption != "true") { caption = "false"; }

    var skin = recupParametreUrl('skin');
    if (!skin) skin = "";
    else if (skin.indexOf(".xml") != -1) skin = skin.substring(0, skin.indexOf(".xml"));

    var adwaysId = recupParametreUrl('adwaysId');
    if (!adwaysId) adwaysId = "";

    /* Séparation dans deux variables du chemin complet du média : 'ext' pour l'extension et 'name' pour le chemin sans l'extension */
    var separateur = ".";
    var positionPoint = media.lastIndexOf(separateur);
    var name = media.substring(0, positionPoint);
    var ext = media.substring(positionPoint + 1);

    //console.log('insererMediaUrl() ' + name + ' ' + ext + ' ' + image);
    //console2('insererMediaUrl() ' + name + '.' + ext + '<br /> ');

    /* Sélection et insertion de la fonction du player en fonction de l'extension */
    switch (ext) {
        case 'mp4':
        case 'flv':
            InsererVideoJW(nomdiv, nomobj, '100%', '100%', RTMP_VOD, ext + ':' + name + '.' + ext, autostart, image, skin, caption, chapters, logo, adwaysId);
            break;
        case 'smil':
        case 'rss' :
            InsererVideoJW(nomdiv, nomobj, '100%', '100%', RTMP_VOD, name + '.' + ext, autostart, image, skin, caption, chapters, logo, adwaysId);
            break;
        case 'xml' :
            InsererPlaylistJW(nomdiv, nomobj, '100%', '100%', name + '.' + ext, 'right', '250', '', autostart);
            break;
        case 'mp3':
            if (mini == "true") InsererAudioMiniPlay(name + '.' + ext);
            else InsererAudioJW(nomdiv, nomobj, RTMP_VOD, ext + ':' + name + '.' + ext, autostart, skin);
            break;
        case 'live':
            InsererVideoJW(nomdiv, nomobj, '100%', '100%', RTMP_LIVE, name, true, image, skin);
            break;
        case '':
            document.write("<div class='avertissement'><p>Pas de média détecté.</p></div>");
            break;

        default:
            document.write("<div class='avertissement'><p>Ce type de fichier (" + ext + ") n'est pas pris en charge.</p></div>");
            break;
    }
}

Paramètres播放列表书架

// Start Playlist Shelf Example

function initOutPlayer(playlistId) {
  var playerInstance = jwplayer('out-player-demo')
    .setup({
      displaytitle: false,
      logo: false,
      autostart: false,
      playlist: 'rss' + playlistId,
      width: '100%',
      aspectratio: '16:9',
      visualplaylist: true
    });

  initPlaylist(playerInstance);
}

function initPlaylist(player) {
  $.ajax(player.getPlaylist()).then(function(data) {
    var playlistWrapper = $('.playlist-wrapper');
    var playlistTemplate = Handlebars.compile($('#out-player-playlist-template').html());
    playlistWrapper.html(playlistTemplate(data));

    playlistWrapper.on('click', '.playlist-item-link', setVideo.bind(this, data.playlist, player));
    player.on('playlistItem', setActive);
  });
}

function setVideo(playlist, player, e) {
  var currentVideo = $(e.target).closest('a').data('mediaid');
  var videoIndex = playlist.findIndex(function(video) {
    return currentVideo === video.mediaid;
  });

  e.preventDefault();

  player.playlistItem(videoIndex);
}

function setActive(e) {
  var id = e.item.mediaid;

  $('.playlist-item-link').removeClass('active')
    .filter(function(item) {
      return $(this).data('mediaid') === id;
    })
    .addClass('active');
}

initOutPlayer('6tYY3mSy');
// End Playlist Shelf Example