FlowPlayer Dynamic Video Taille

Ce tutoriel montre comment ajuster dynamiquement la taille de la vidéo FlowPlayer. Ceci est particulièrement utile pour les conceptions réactives ou lors de la gestion des vidéos avec des débits et des résolutions variables (en maintenant un rapport d'aspect 16: 9).

Articles connexes:

• Dépannage et gestion des erreurs dans FlowPlayer
• Intégration de vidéos de flux de flux avec jQuery

Dimensions vidéo fixes

Dimensionnement vidéo réactif

JQUERY Implémentation

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

Exemple de structure HTML

    <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>

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!