Utilisation de jQuery pour intégrer un film à l'aide de FlowPlayer

Ce guide vous montre comment intégrer un film à l'aide du FlowPlayer open-source. Cette configuration minimale vous fait démarrer; Les messages futurs couvriront des personnalisations avancées comme la prise en charge de l'iPad, les contrôles personnalisés et le streaming en direct.

html

<div id="fms"></div>
<div id="video-stream-status"><span class="status">Status Ready.</span></div>

jQuery

//video or stream address
var streamAddressFull = "http://streamaddress/mp4:filename/playlist.m3u8",
    vidElem = $('#fms'),
    statusElem = $('#video-stream-status .status');

$f('fms', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
    debug: true, //output all events to the console for debugging

    onError: function(e) {
        statusElem.html("Error: (code:" + e + ").");
    },

    version: [9, 115], //minimum Flash version required

    onFail: function() {
        statusElem.html("Update Flash for MP4 playback. Your version: " + this.getVersion());
    },

    onBeforeLoad: function() {
        statusElem.html("Loading...");
    },

    clip: {
        url: streamAddressFull,
        scaling: 'fit', //fit, scale, orig, half
        autoPlay: true,
        autoBuffering: true,
        onStart: function(clip) {
            statusElem.html("Playing.");
        }
    },

    plugins: {
        controls: {
            right: 0,
            bottom: 0,
            opacity: 0.95,
            backgroundGradient: 'low',
        }
    },

    canvas: {
        backgroundGradient: 'none',
        backgroundColor: '#000000'
    }
});

Questions fréquemment posées (FAQ):

• Installation: Téléchargez le script FlowPlayer et le fichier CSS à partir du site officiel et les incluez dans votre HTML. Initialiser le flux de Flowplayer à l'aide de la fonction $f(), spécifiant l'ID d'élément cible et les options de configuration.

• Compatibilité jQuery: Oui, FlowPlayer fonctionne de manière transparente avec jQuery, permettant un contrôle et une interactivité avancés.

• Personnalisation: Personnaliser l'apparence de FlowPlayer à l'aide de CSS et ses options de configuration pour modifier la taille, les couleurs et le comportement.

• Sources vidéo: FlowPlayer prend en charge diverses sources vidéo, y compris votre serveur, vos CDN et vos services d'hébergement vidéo. Fournir l'URL vidéo lors de l'initialisation.

• Contrôle de la lecture: Utilisez l'API JavaScript de FlowPlayer pour contrôler programmatiques la lecture (play, pause, arrêt, recherche, volume). Les auditeurs d'événements fournissent des commentaires sur le statut de lecture.

• Compatibilité du navigateur: FlowPlayer est compatible avec les navigateurs modernes à l'aide de la vidéo HTML5. Les navigateurs plus anciens peuvent nécessiter un plugin flash (comme indiqué dans l'exemple de code).

• Prise en charge mobile: FlowPlayer est réactif et fonctionne sur les appareils mobiles avec des contrôles tactiles.

• Plusieurs instances: Vous pouvez intégrer plusieurs instances FlowPlayer sur une seule page. Chacun a besoin d'un ID unique.

• Streaming en direct: FlowPlayer prend en charge les flux en direct; fournir l'URL du flux pendant l'initialisation.

• Dépannage: Vérifiez la console JavaScript du navigateur pour les messages d'erreur. Consultez la documentation FlowPlayer et les forums communautaires pour obtenir de l'aide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!