एचटीएमएल 5 वीडियो फिट चौड़ाई या ऊंचाई

Question

width=100% height="auto" ब्राउज़र विंडो की पूरी चौड़ाई को फिट करने के लिए मेरे वीडियो स्केल करता है, लेकिन यदि खिड़की की ऊंचाई पहलू अनुपात से कम है तो वीडियो ऊंचाई में फसल हो जाता है।

मैं चाहता हूं कि वीडियो चौड़ाई या ऊंचाई फिट करने के लिए स्केल करें ताकि मैं हमेशा फसल के बिना पूरे वीडियो को देख सकूं, निकटतम अनुपात भर रहा हूं (खिड़की अनुपात कम होने पर किनारे पर खाली स्थान जोड़ना)।

मैं यह नहीं समझ सकता कि यह कैसे करें।
पहले किसी भी ऊंचाई मूल्य,% या पीएक्स को उपेक्षा किया जाता है, मैं ऊंचाई का उपयोग करके आकार को केवल चौड़ाई नहीं लगा सकता। न्यूनतम चौड़ाई/ऊंचाई के लिए ही।

यह कैसे किया जा सकता है?

मेरे कोड:

<video id="video" width=100% height="auto" onclick=playPause()></video> 

वीडियो जहां v एक सरणी से एक वीडियो लिंक है जावास्क्रिप्ट द्वारा लोड किया जाता है:

video.addEventListener('play', function() { v.play();}, false); 

Answer 1

इसे अपने आप को एक जावास्क्रिप्ट समारोह के साथ हल:

window.addEventListener('resize', resize, false); 

video.height = 100; /* to get an initial width to work with*/ 
resize(); 

function resize() { 
videoRatio = video.height/video.width; 
windowRatio = window.innerHeight/window.innerWidth; /* browser size */ 

    if (windowRatio < videoRatio) { 
     if (window.innerHeight > 50) { /* smallest video height */ 
       video.height = window.innerHeight; 
     } else { 
      video.height = 50; 
    } 
    } else { 
     video.width = window.innerWidth; 
    } 

}; 

Answer 2

लपेटकर मूल्य के अंदर उद्धरण

<div class="videoContainer"> 
    <video id="video" width="100%" height="auto" onclick="playPause();"></video> 
</div> 

प्रयास करें आप इन कक्षाओं को

जोड़ सकते हैं

.videoContainer 
{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    overflow: hidden; 
} 

.videoContainer video 
{ 
    min-width: 100%; 
    min-height: 100%; 
} 

या वैकल्पिक रूप से उपयोग करने के लिए इस

video { 
    object-fit: cover; 
} 

Answer 3

वहाँ एक महान ऑटो चौड़ाई/ऊंचाई चाल intrinsic ratios कहा जाता है कि छवियों/वीडियो और पसंद पर इस्तेमाल किया जा सकता है! यह चाल आपके वांछित तत्व को एक रैपर में रखना है जिसमें उसके बाद प्रतिशत-मूल्यवान पैडिंग लागू होता है।

आपका मार्कअप तो होगा:

<div class="video-wrapper"> 
    <video class="video" id="video" onclick=playPause()></video> 
</div> 

और अपने सीएसएस:

.video-wrapper { 
    position: relative; 
    padding-bottom: 20%; 
    height: 0; 
} 

.video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #ccc; /* Random BG colour for unloaded video elements */ 
} 

आप min-width या .video-wrapper शैलियों की max-width के साथ खेल के द्वारा अपने वीडियो कंटेनर के आयाम सीमित कर सकते हैं।

आशा है कि इससे मदद मिलती है!

Answer 4

मैं एक ऐसी ही समस्या थी। मैंने स्लाइड्स के रूप में विभिन्न ऑब्जेक्ट्स के साथ 'स्लाइड शो' बनाया है, उनमें से कुछ विभिन्न आकारों के वीडियो हैं। मुझे कोई वैचारिक समाधान नहीं मिला, इसलिए मुझे एक चाल मिली है।

मैं स्पष्ट रूप टैग में सभी वास्तविक वीडियो आकार निर्दिष्ट किया है और उन सभी की जानकारी एकत्र की: फिर

var vids = document.getElementsByClassName("vid"); // videos 
var vidl = vids.length; 
var vidH = [ ]; 
var vidW = [ ]; 

// Get original widths and heights of videos 
for (i=0; i<vidl; i++) { // > 
    vidH.push(vids[i].height); 
    vidW.push(vids[i].width); 
} 

(जब आवश्यक) मैं खिड़की आकार को परिभाषित इस प्रकार है:

// Current inner height of the browser window (in pixels) 

var iH = window.innerHeight 
     || document.documentElement.clientHeight 
     || document.body.clientHeight; 
// Current inner width of the browser window (in pixels) 
var iW = window.innerWidth 
     || document.documentElement.clientWidth 
     || document.body.clientWidth; 

एक आयताकार को एक आयत में पुन: सहेजने के लिए हमें न्यूनतम स्केल मिलना होगा:

var r, rh, rw; 

// Scale videos to fit window 
for (i=0; i<vidl; i++) { // > 
    rh=iH/vidH[i]; rw=iW/vidW[i]; r=Math.min(rh, rw); 
    if (rh>rw) { 
     vids[i].height=Math.floor(vidH[i]*r); 
     vids[i].width=iW; 
    } 
    else { 
     vids[i].height=iH-5; 
     vids[i].width=Math.floor(vidW[i]*r); 
    } 
} 

अनजाने में, यहां कुछ अतिरिक्त जगह दिखाई दी; फ़ायरफ़ॉक्स में मुझे 5 के रूप में इसका न्यूनतम मान मिला है कि मैं नए वीडियो आकार के रूप में फॉर्म विंडोज़ ऊंचाई मान (iH) को अस्वीकार करता हूं।