एचटीएमएल 5

Question

में वीडियो ऊंचाई सेट करें यह एक साधारण सवाल हो सकता है लेकिन यह वास्तव में मुझे पागल कर रहा है। मैं सिर्फ HTML5 वीडियो की ऊंचाई और चौड़ाई निर्धारित करना चाहता हूं।

मैं इस कोड का उपयोग कर रहा हूँ:

<video controls="controls" width="1000" id="video"> 
      <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> 
      <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
    </video> 

परिणाम:

मैं ऊंचाई विशेषता

<video controls="controls" width="1000" height="300" id="video"> 
       <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> 
       <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video> 

परिणाम जोड़ते हैं:

तो मुझे याद आ रही som यहाँ कुछ है?

क्या कोई भी मेरी गलती को सही कर सकता है।

Answer 1

आप <video> टैग में पहलू अनुपात को नहीं बदल सकते हैं।

हालांकि आप अपनी वीडियो सामग्री पढ़ सकते हैं और इसे <canvas> तत्व पर लिख सकते हैं।

उदाहरण के लिए:

<canvas id="canvas" height="768" width="1024"></canvas> 

और जे एस:

function updateVideo() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var myVideo = document.getElementById('video'); 
    ctx.drawImage(myVideo, 0, 0, 640, 480); 
} 
setInterval (updateVideo, 24); 

Answer 2

आप को हल करने के लिए सीएसएस का उपयोग कर सकते हैं।

#video { 
    width:1000px; 
    height:auto; 
} 

Answer 3

यहां सरल सीएसएस चाल है, आपको कोई जावास्क्रिप्ट या jQuery कोड जोड़ने की आवश्यकता नहीं है। वीडियो टैग पर object-fit सीएसएस संपत्ति का उपयोग करें।

एचटीएमएल

<video controls="controls" id="video"> 
<source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> 
<source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video> 

सीएसएस

#video{ 
    object-fit: initial; 
    width: 400px; 
    height: 300px; 
} 

See Fiddle