2013-02-14 18 views
5

Qualcuno sa di un modo per ridimensionare il video all'interno del lettore MEJS in modo che il lettore stesso gestisca qualsiasi letterboxing o columnboxing? Simile a come JWPlayer ha le opzioni 'fit' e 'fill'.mediaelement.js - Opzioni di ridimensionamento video (ad esempio "fit" o "riempimento")

In sostanza, ho un lettore che vive all'interno di un wrapper e ridimensiono il wrapper in base alla risoluzione dello schermo degli utenti. In questo modo:

<div id="video_dims_wrapper" style="width: 1280px; height: 720px;"> 
    <video id="video_player" width="1280" height="720" controls="controls" preload="none" autoplay="autoplay" style="width: 100%; height: 100%;">   

     <source type="video/mp4" src="my_video.mp4" /> 
     <source type="video/webm" src="my_video.webm" /> 

     //Flash fallback removed for brevity 

    </video> 
</div> 

E poi ho appena ridimensionare il #video_dims_wrapper e l'elemento MEJS contenuto all'interno ridimensiona di conseguenza (a causa della larghezza: 100%; height: 100%; dichiarazioni di stile).

Questo metodo funziona bene se tutti i video sono dello stesso formato (16: 9 in questo caso), ma se vi capita di essere un video di un diverso rapporto di aspetto allora non ridimensiona all'interno il giocatore ma piuttosto ridimensiona le dimensioni totali del giocatore.

Quello che mi piacerebbe succedere è che il playe mantiene sempre un rapporto di 16: 9 e il video in scala per adattarsi al lettore e alle cassette delle lettere o alle colonne del giocatore, se necessario.

Qualcuno si imbatte in questo? Qualche soluzione?

Grazie per qualsiasi aiuto.

risposta

1

Ho provato a fare lo stesso in un ambiente Wordpress. Mi dispiace per aver riesumato questo, ma Ik mi ha portato ad invecchiare. Ma guardando nel codice sorgente di mediaelement.js ho trovato questa proprietà:

// imposta dimensioni tramite JS invece di CSS setDimensioni: true; // (è la proprietà predefinita).

L'ho appena passato mentre init su false (quindi non ho modificato i file sorgente). E ha fatto lo styling con i CSS. Ecco! Funziona come un fascino :). Posso solo dire che questo script funky è mal documentato! Certo che ho cercato proprietà come questa sul sito web dei distributori e ore googled ... Ma non ho mai trovato quello segnalato ovunque.

Spero di poter aiutare qualcuno con questo;). Solo per il motore di ricerca, ho cercato i seguenti tag: Wordpress video letterbox embed flash fallback mediaelement.js wp-mediaelement.js

Problemi correlati