FlexPlyr

{{ i18n.easy_to_use }}

{{ i18n.add_from_cdn }}

{{ i18n.use_js }}

                
const dom = new FPlyr({
    // Specify the element to be replaced with the player (element ID)
    // If not specified, the dom.body must be manually added to the view
    // id: "Element ID",

    // Required: Media source configuration, only one option can be selected
    video: "[Video URL]",
    // audio: "[Audio URL]",
    // vimeo: "[Vimeo ID]",
    // youtube: "[YouTube ID]"

    option: {
        showThumb: true,

        // Control panel appearance style
        // e.g., "minimal" or "classic"
        panelType: "[Style Option]",

        // Control panel buttons
        // choose the items to display as needed
        panel: [
            "play", "progress", "time", "timeMini", 
            "volume", "volumeMini", "rate", "full"
        ],
        volume: 100,
        mute: false
    },

    // Optional: Event listeners to monitor specific events during playback
    when: {
        ready: function () {
            console.log("Player is ready");
        },
        playing: function () {
            console.log("Playing");
        },
        pause: function () {
            console.log("Paused");
        },
        end: function () {
            console.log("Playback ended");
        },
        destroyed: function () {
            console.log("Player removed");
        }
    }
});

// If no element is specified, the player must be manually added to the DOM
(...).appendChild(dom.body);

// Remove the player
// dom.destroy();