2013-02-14 21 views
5

क्या कोई भी को एमईजेएस प्लेयर के भीतर वीडियो स्केल करने का तरीका जानता है ताकि खिलाड़ी स्वयं लेटरबॉक्सिंग या कॉलमबॉक्सिंग को संभालेगा? JWPlayer के पास 'फिट' और 'भरें' विकल्प कैसे हैं।mediaelement.js - वीडियो स्केलिंग विकल्प (उदा। 'फिट' या 'भरें')

अनिवार्य रूप से मुझे एक खिलाड़ी मिला है जो एक रैपर के भीतर रहता है और मैं उपयोगकर्ता स्क्रीन रिज़ॉल्यूशन के अनुसार रैपर का आकार बदलता हूं। इसलिए जैसा:

<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 इस मामले में), लेकिन अगर वहाँ एक अलग पहलू अनुपात के एक वीडियो होता है तो यह प्लेयर में आकार परिवर्तन नहीं करता है बल्कि कुल खिलाड़ी आयामों को स्केल करता है।

मैं जो करना चाहता हूं वह यह है कि नाटक हमेशा 16: 9 पहलू अनुपात और वीडियो के साथ फिट होने के लिए स्केल करता है और प्लेयर लेटरबॉक्स या कॉलमबॉक्स आवश्यकतानुसार वीडियो को बनाए रखता है।

कोई भी इसमें भाग लेता है? कोई समाधान?

किसी भी मदद के लिए धन्यवाद।

उत्तर

1

मैंने वर्डप्रेस वातावरण में ऐसा करने की कोशिश की। इसे निकालने के लिए खेद है, लेकिन ik मुझे उम्र ले लिया। लेकिन mediaelement.js के स्रोत कोड में देखते हुए मुझे यह संपत्ति मिली:

// सीएसएस सेट के बजाय जेएस के माध्यम से सेट आयाम सेट आयाम: सत्य; // (डिफ़ॉल्ट संपत्ति है)।

मैंने झूठ बोलने के दौरान इसे अभी स्विच किया है (इसलिए मैंने स्रोत फ़ाइलों को संपादित नहीं किया है)। और सीएसएस के साथ स्टाइल किया था। देखा! एक जादू की तरह काम करता है :)। बस यह कह सकता है कि यह फंकी स्क्रिप्ट बुरी तरह से प्रलेखित है! बेशक मैंने वितरकों की वेबसाइट पर इस तरह की संपत्तियों की खोज की और घंटों तक गुमराह किया ... लेकिन कहीं भी यह रिपोर्ट नहीं मिली।

आशा है कि मैं इसके साथ किसी की मदद कर सकता हूं;)। बस खोज इंजन के लिए, मैंनेeseese टैग की खोज की: वर्डप्रेस वीडियो लेटरबॉक्स एम्बेड फ्लैश फ़ॉलबैक मीडियालेमेंट.जेएस wp-mediaelement.js