Saiz video dinamik flowplayer

Tutorial ini menunjukkan cara menyesuaikan saiz video flowplayer secara dinamik. Ini amat berguna untuk reka bentuk responsif atau ketika mengendalikan video dengan bitrat dan resolusi yang berbeza -beza (biasanya mengekalkan nisbah aspek 16: 9).

Artikel yang berkaitan:

• Penyelesaian masalah dan pengendalian ralat di FlowPlayer
• Mengintegrasikan video Flowplayer dengan jQuery

Dimensi video tetap

saiz video responsif

pelaksanaan jQuery

Contoh Struktur HTML

// 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);
    });
});

Atas ialah kandungan terperinci Saiz video dinamik flowplayer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!