2017-11-15 37 views
11

एक एचटीएमएल के रूप में सहेजें में वीडियो की पूरी चौड़ाई अवधि नहीं है और एंड्रॉयड क्रोम में यह लोड:एचटीएमएल 5 वीडियो नियंत्रण इस सरल पेज

<html> 
<body style="overflow:hidden;transform: scale(0.5, 0.5);"> 
     <video controls> 
      <source src="http://techslides.com/demos/sample-videos/small.mp4"> 
     </video> 
</body> 
</html> 

यह इस तरह दिखना चाहिए:

enter image description here

आप इसके साथ चारों ओर खेलने हैं, तो आप पाएंगे कि को हटाने या तो overflow:hidden या transform:scale नियंत्रण वीडियो की पूरी चौड़ाई अवधि अपेक्षा के अनुरूप कर देगा। हालांकि दिखाए गए अनुसार, इन दो शैलियों का संयोजन किसी भी वीडियो नियंत्रण को गलत तरीके से आकार देता है।

This question कुछ हद तक संबंधित लगता है और इसमें transform: translateZ(0) को तत्व तत्व में जोड़ने का सुझाव मिलता है, हालांकि यह जोड़कर कि शरीर पर या नए युक्त div पर मौजूदा परिवर्तन के लिए अनुवाद समस्या को हल नहीं करता है।

क्या यह एंड्रॉइड क्रोम में एक बग है? मुझे समझ में नहीं आता कि इन दो शैलियों के संयोजन को वीडियो नियंत्रण चौड़ाई को क्यों प्रभावित करना चाहिए।

+0

कोई व्यूपोर्ट सहायता जोड़ रहा है? यह संभव है कि ब्राउज़र प्रत्येक मामले में एक अलग व्यूपोर्ट आकार का आविष्कार कर रहा हो। –

+0

अन्य ब्राउज़र/उपकरणों में अपेक्षित व्यवहार है? –

+0

@ जोशली - व्यूपोर्ट जोड़ना दुर्भाग्य से मदद नहीं करता है। '0 मेटा नाम =" व्यूपोर्ट "सामग्री =" चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाने = 1 ">' ' 'में कोई प्रभाव नहीं है। @ mad.meesh - यह है। किसी भी डेस्कटॉप ब्राउज़र पर, वीडियो नियंत्रण वीडियो की पूरी चौड़ाई फैलता है। मेरे आईफोन 6 प्लस पर ही। एंड्रॉइड फ़ायरफ़ॉक्स पर ही। यह एंड्रॉइड क्रोम तक ही सीमित है। – alan

उत्तर

0

सीएसएस में निम्नलिखित आप जोड़ सकते हैं वीडियो प्लेयर की मूल नियंत्रण पट्टी की चौड़ाई बदलने के लिए:

video::-webkit-media-controls-panel { 
    width: 100%; 
    } 

यहाँ देशी नियंत्रण स्टाइल की अच्छी example है। मैं आशान्वित हूं कि इससे आपको सहायता मिलेगी।

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