Using jQuery to embed a movie using Flowplayer

This guide shows you how to embed a movie using the open-source Flowplayer. This minimal setup gets you started; future posts will cover advanced customizations like iPad support, custom controls, and live streaming.

HTML

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

jQuery

<code class="language-javascript">//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'
    }
});</code>

Frequently Asked Questions (FAQs):

• Installation: Download the Flowplayer script and CSS file from the official website and include them in your HTML. Initialize Flowplayer using the $f() function, specifying the target element ID and configuration options.

• jQuery Compatibility: Yes, Flowplayer works seamlessly with jQuery, allowing for advanced control and interactivity.

• Customization: Customize Flowplayer's appearance using CSS and its configuration options to modify size, colors, and behavior.

• Video Sources: Flowplayer supports various video sources, including your server, CDNs, and video hosting services. Provide the video URL during initialization.

• Playback Control: Use Flowplayer's JavaScript API to programmatically control playback (play, pause, stop, seek, volume). Event listeners provide feedback on playback status.

• Browser Compatibility: Flowplayer is compatible with modern browsers using HTML5 video. Older browsers may require a Flash plugin (as indicated in the code example).

• Mobile Support: Flowplayer is responsive and works on mobile devices with touch controls.

• Multiple Instances: You can embed multiple Flowplayer instances on a single page. Each needs a unique ID.

• Live Streaming: Flowplayer supports live streams; provide the stream URL during initialization.

• Troubleshooting: Check the browser's JavaScript console for error messages. Consult the Flowplayer documentation and community forums for assistance.

The above is the detailed content of Using jQuery to embed a movie using Flowplayer. For more information, please follow other related articles on the PHP Chinese website!