mediaelement.js - 비디오 조정 옵션 (예 : 'fit'또는 'fill')

Question

내에서 MEJS 플레이어의 비디오 크기를 조절하는 방법을 아는 사람이 있습니까? 플레이어가 레터 박스 또는 columnboxing을 처리하게하려면 어떻게해야합니까? JWPlayer가 '적합'및 '채우기'옵션을 갖는 것과 비슷합니다.

기본적으로 래퍼 내에있는 플레이어가 있고 사용자 화면 해상도에 따라 래퍼의 크기를 조정합니다. 그래서 같이 :

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

그리고 난 그냥 #video_dims_wrapper 및 포함 된 MEJS 요소에 따라 크기를 조정 크기를 조정 (때문에 폭 : 100 %; 높이 : 100 %; 스타일 선언).

모든 동영상의 종횡비가 동일한 경우 (이 경우 16 : 9)에는 잘 작동하지만 다른 종횡비의 동영상이있는 경우 크기가 조정되지 않습니다. 내 내 플레이어 오히려 전체 플레이어 크기를 조정합니다.

나는 playe가 항상 16 : 9의 종횡비를 유지하고 있으며 비디오가 플레이어 내에서 비례하여 플레이어의 레터 박스 또는 칼럼 박스가 비디오를 필요에 따라 비 웁니다.

누구 에게라도이 문제가 발생합니까? 어떤 해결책?

도움 주셔서 감사합니다.

Answer 1

Wordpress 환경에서 동일한 작업을 시도했습니다. 이걸 발굴해서 미안하지만, 나는 나이를 먹었어. 그러나 mediaelement.js의 소스 코드를 조사한 결과,이 속성을 발견했습니다 :

// CSS 대신 CSS를 통해 크기를 설정 setDimensions : true; // (기본 속성).

init을 false로 변경하면서 (소스 파일을 편집하지 않았으므로) 방금 전환했습니다. 그리고 css로 스타일을 만들었습니다. 빌라! 매력처럼 작동합니다 :). 이 펑키 스크립트가 잘못 작성되었다고 말할 수 있습니다! 당연히 나는 분배 자 웹 사이트에 이것 같이 재산을 찾고 googled 시간을 ... 그러나 결코 어디에서든지보고 된 그것을 찾아 내지 않았다.

희망이 있으니 도와 드릴 수 있습니다. 검색 엔진 용으로 theese 태그를 검색했습니다 : Wordpress 비디오 레터 박스 embed 플래시 대체 미디어 요소 .js wp-mediaelement.js