Dynamische Videogröße von FlowPlayer

Dieses Tutorial zeigt, wie die Videogröße von FlowPlayer dynamisch angepasst wird. Dies ist besonders nützlich für reaktionsschnelle Designs oder bei der Behandlung von Videos mit unterschiedlichen Bitraten und Auflösungen (normalerweise ein Seitenverhältnis von 16: 9).

verwandte Artikel:

• Fehlerbehebung und Fehlerbehandlung in FlowPlayer
• Integrieren von FlowPlayer -Videos in JQuery

wurde Videoabmessungen

behoben

reaktionsschnelle Video -Größe

jQuery -Implementierung

// Resize video function
$('.change-size-btn').on('click', function(e) {
    e.preventDefault();

    // Get video ID
    const videoId = $(this).closest('.fms').attr('id');

    // Determine display type (fixed, fit, fullscreen)
    const btnElem = $(this);
    const vidElem = $('#' + videoId).find('object');
    const widgetContainer = $('#' + videoId).closest('.video-container');
    const displayType = btnElem.attr('vidDisplayType');
    let width, height;

    // Fixed dimensions
    if (displayType === 'fixed') {
        height = btnElem.attr('vidHeight');
        width = btnElem.attr('vidWidth');
    }
    // Fit to container
    else if (displayType === 'fit') {
        height = widgetContainer.height();
        width = widgetContainer.width();
    }

    // Resize video
    console.log(`Resizing video to ${width} x ${height}...`);
    vidElem.height(height).width(width).fadeIn("slow", function() {
        console.log('Resize complete.');
        $f(videoId).getScreen().animate({ width: width, height: height }, 500);
    });
});

html Struktur Beispiel

    <div>
        Select Video Size:
        <button class="change-size-btn" vidDisplayType="fixed" vidWidth="240" vidHeight="427">240 x 427</button>
        <button class="change-size-btn" vidDisplayType="fixed" vidWidth="360" vidHeight="640">360 x 640</button>
        <button class="change-size-btn" vidDisplayType="fixed" vidWidth="720" vidHeight="1280">720 x 1280</button>
        <button class="change-size-btn" vidDisplayType="fit">Fit window</button>
    </div>

Das obige ist der detaillierte Inhalt vonDynamische Videogröße von FlowPlayer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!