2014-04-04 11 views
7

के साथ उत्तरदायी वीडियो छोटे स्क्रीन आकारों के लिए वीडियो स्केल करने के लिए कैसे सेट अप कर सकता हूं, लेकिन उन्हें अपने वास्तविक आकार से ऊपर स्केल नहीं करना है? (इसे सही ढंग से आकार वाले div में लपेटने के अलावा, अगर मैं बेहतर समाधान नहीं पा रहा हूं तो मैं वापस आऊंगा।)mediaelement.js - निश्चित अधिकतम आकार

मैंने style="max-width: 100%; सेटिंग करने का प्रयास किया है और यह फ़ायरफ़ॉक्स में अपने स्वयं के वीडियो का उपयोग करके काम करता है सर्वर, लेकिन क्रोम में, और यूट्यूब वीडियो से लिंक करते समय फ़ायरफ़ॉक्स और क्रोम दोनों में, width="" और height="" मान <video> टैग के लिए सेट किए गए मानों के बावजूद वीडियो कंटेनर को भरने के लिए स्केल होंगे।

मैं अपने एचटीएमएल और आउटपुट के पहले भाग का एक उदाहरण दूंगा। निम्नलिखित:

<video width="480" height="360" style="max-width: 100%;" src="http://example.com/video.mp4"></video> 

फ़ायरफ़ॉक्स में इस उत्पादन (जो मैं चाहता):

<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;"> 
    <div class="mejs-inner"> 
     <div class="mejs-mediaelement"> 
      <video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video> 

और यह क्रोम में (जो नहीं है जो मैं चाहता):

<div id="mep_0" class="mejs-container svg mejs-video" style="width: 864px; height: 648px;"> 
    <div class="mejs-inner"> 
     <div class="mejs-mediaelement"> 
      <video width="864" height="648" style="max-width: 100%; width: 100%; height: 100%;" src="http://example.com/video.mp4"></video> 

है इसे पूरा करने के लिए एक स्वीकार्य विधि है?

+0

क्या आप अपना कोड (एक वीडियो एम्बेडेड) के साथ पोस्ट कर सकते हैं और इसे यहां साझा कर सकते हैं? – Fenil

+0

क्षमा करें, यह सवाल 2 साल पहले से है। मुझे याद नहीं है कि यह कोड कहां से था। – nHaskins

उत्तर

0

आप अपने मूल स्क्रिप्ट में फ़ायरफ़ॉक्स उत्पादन कोड

<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;"> 
    <div class="mejs-inner"> 
     <div class="mejs-mediaelement"> 
      <video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video> 

उपयोग करते हैं, यह समस्या को ठीक है और उत्पादन कोड फ़ायरफ़ॉक्स और क्रोम भर में लगातार रखना चाहिए।

संबंधित मुद्दे