HTML5 वीडियो पोस्टर को वीडियो के समान आकार दें

Question

क्या किसी को पता है कि एचटीएमएल 5 वीडियो पोस्टर का आकार कैसे बदलना है, ताकि यह वीडियो के सटीक आयामों के अनुरूप हो?

यहाँ एक jsfield है जो समस्या दिखाता है: http://jsfiddle.net/zPacg/7/

यहाँ उस कोड है:

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>​

सीएसएस:

video{
border:1px solid red;
}​

ध्यान दें कि नारंगी आयत वीडियो की लाल सीमा को मापती नहीं है।

इसके अलावा, बस नीचे दिए गए सीएसएस को जोड़ने से भी काम नहीं चलता क्योंकि यह पोस्टर के साथ वीडियो को बचाता है:

video[poster]{
height:100%;
width:100%;
}

Comments

मुझे नहीं लगता कि आप विशेषताओं में "%" का उपयोग कर सकते हैं; हालाँकि इसे 100 में बदलना समस्या को ठीक नहीं करता है। मैं इसकी एक मीडिया मीडिया शैली betcha हूँ। उन के माध्यम से लेने के लिए स्वतंत्र महसूस trac.webkit.org/browser/trunk/Source/WebCore/css/...

— अल्बर्ट

@ अल्बर्ट, धन्यवाद मैंने posterआपके द्वारा भेजे गए लिंक में कोई संदर्भ नहीं देखा । क्या आप मुझे दिखा सकते हैं कि सीएसएस कैसा दिखता है जिसके बारे में आप बात कर रहे हैं, यानी " -webkit media style"? धन्यवाद

— टिम पीटरसन

अच्छी तरह से कि मैं "उठा" से क्या मतलब है; वे क्रोम विशिष्ट मीडिया शैली हैं; मैं केवल उनके साथ परिचित हूं, अकेले छद्म चयनकर्ताओं को घोषित कर रहा हूं; कोई शुरुआती बिंदु के साथ: मैं पैडिंग, आदि के साथ घोषणाओं की तलाश कर रहा हूँ

— अल्बर्ट

Answer 1

आप इसे ( उदाहरण ) प्राप्त करने के लिए सीएसएस पृष्ठभूमि छवि के साथ संयोजन में एक पारदर्शी पोस्टर छवि का उपयोग कर सकते हैं ; हालाँकि, एक पृष्ठभूमि को ऊँचाई और वीडियो की चौड़ाई तक फैलाने के लिए, आपको एक पूर्ण रूप से पोस्ट किए गए <img>टैग ( उदाहरण ) का उपयोग करना होगा।

यह उन ब्राउज़रों में सेट background-sizeकरना100% 100% भी संभव है जो समर्थनbackground-size ( उदाहरण ) करते हैं।

---

अपडेट करें

ऐसा करने का एक बेहतर तरीका यह होगा कि object-fitसीएसएस संपत्ति का उपयोग @ लार्स एरिक्सन के सुझाव के अनुसार किया जाए।

उपयोग

object-fit: cover;

यदि आप छवि के उन हिस्सों को प्रदर्शित नहीं करना चाहते हैं जो वीडियो के पहलू अनुपात में फिट नहीं होते हैं, और

object-fit: fill;

अपने वीडियो के पहलू अनुपात को फिट करने के लिए छवि को फैलाने के लिए

उदाहरण

Comments

- @ user1419007, आपका उदाहरण पृष्ठभूमि छवि को दोहराता है। चूंकि आप सुझाव देते हैं कि यह सबसे अच्छा तरीका नहीं है, तो क्या आप अपनी दूसरी रणनीति को लागू करने का प्रदर्शन करने वाले jsfiddle को प्रदान करने का मन करेंगे?

— टिम पीटरसन

मैंने no-repeatबैकग्राउंड इमेज एड की है। अन्य समाधान के रूप में, मुझे इस काम के लिए एक क्षण दें।

— user2428118

संपादित करें: दूसरे प्रस्तावित समाधान के लिए जोड़ा गया उदाहरण।

— user2428118

इसके लिए धन्यवाद, हमें z-indexछवि को बदलने के लिए कुछ जावास्क्रिप्ट की आवश्यकता है जैसे कि वीडियो तब दिखाई देता है जब आप इसे खेलना शुरू करते हैं।

— टिम पीटरसन

.. दूसरा उदाहरण क्रोम में काम नहीं किया? आपको बाहरी div को jsfiddle.net/xh8er जैसी स्थिति देने की आवश्यकता है ; तब यह काम करता है।

— आमपाइ

Answer 2

आपके द्वारा लक्षित किए जा रहे ब्राउज़रों के आधार पर, आप इसे हल करने के लिए ऑब्जेक्ट-फिट संपत्ति के लिए जा सकते हैं :

object-fit: cover;

या शायद fillतुम जो देख रहे हो। अभी भी आईई के लिए विचाराधीन है ।

Comments

यह निश्चित रूप से जवाब है।

— cilphex

+1 ऑब्जेक्ट-फिट प्रॉपर्टी के लिंक के लिए , इसका उपयोग object-fit: initialमेरे लिए किया।

— फायरब्रांड

"ऑब्जेक्ट-फिट: भरें" ने किया चाल! जैसा कि "ऑब्जेक्ट-फिट: प्रारंभिक" (अजीब तरह से, क्योंकि मुझे डेवलपर . mozilla.org/en-US/docs/Web/CSS/object-fit पर कल्पना में "प्रारंभिक" मान दिखाई नहीं देता है )। एंड्रॉइड 5.1.1 के तहत सैमसंग देशी ब्राउज़र में "कवर" और "दोनों" में पोस्टर ऑन-प्ले को विकृत किया गया है। और IE को प्रभावित नहीं करता है!

— प्लगइनकंटेनर

ऑब्जेक्ट-फिट नियम के लिए आप लोगों ने किस css चयनकर्ता को निशाना बनाया? चूंकि पोस्टर छवि को लक्षित करने का कोई तरीका नहीं है, इसलिए मुझे लगता है कि आपने उपयोग किया है video{object-fit: cover;}?

— zıəs uɐɟəʇs

@ zı it'ss uɐɟəʇs मेरी सीएसएस में यह है ... वीडियो [पोस्टर] {ऑब्जेक्ट-फिट: भरण}

— plugincontainer

Answer 3

या आप केवल preload="none"VIDEO पृष्ठभूमि को दृश्यमान बनाने के लिए विशेषता का उपयोग कर सकते हैं । और आप background-size: cover;यहाँ उपयोग कर सकते हैं ।

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>

Comments

बेहतर जवाब। कुछ भी नहीं तोड़ता है, और जब तक यह वीडियो केंद्रित साइट नहीं है, तब तक वीडियो लोड नहीं करना आपके पृष्ठ को वास्तव में चोट नहीं पहुंचाता है। +1।

— न्यूटिजार्ड्स

मेरे पास ऑन-प्ले बैकग्राउंड मोबाइलों पर था। यहाँ अन्य प्रश्नों / उत्तरों से (जैसे stackoverflow.com/questions/18229974/… ) लगता है कि समस्या छवियों का दोहराव है (खिलाड़ी css पृष्ठभूमि और वीडियो तत्व पोस्टर)। यह फिक्स काम किया।

— plugincontainer

हम्म ... क्रोम में काम किया लेकिन देशी एंड्रॉइड ब्राउज़र में एक नया मुद्दा बनाया। देखें: stackoverflow.com/questions/39546792/…

— plugincontainer

अंतिम पर निश्चित - नीचे लार्स एरिक्सन का जवाब देखें

— प्लगइनकंटेनर

Answer 4

मैं इसके साथ खेल रहा था और सभी समाधानों की कोशिश की, आखिरकार मैं जिस समाधान के साथ गया वह Google Chrome के इंस्पेक्टर का एक सुझाव था। यदि आप इसे अपने सीएसएस में जोड़ते हैं तो यह मेरे लिए काम करता है:

video{
   object-fit: inherit;
}

Comments

धन्यवाद! यह ठीक ठीक था जो मैं ऊपर और नीचे के वीडियो गैप को हटाने के लिए देख रहा था

— cpcdev

Answer 5

मेरा समाधान user2428118 और Veiko Jääger के उत्तरों को जोड़ता है, जो प्रीलोडिंग के लिए अनुमति देता है, लेकिन एक अलग पारदर्शी छवि की आवश्यकता के बिना। हम इसके बजाय एक base64 एन्कोडेड 1px पारदर्शी छवि का उपयोग करते हैं।

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

Comments

क्या इसे केवल छवि का नाम या पूर्ण पथ होना चाहिए?

Android देशी ब्राउज़र में (ब्राउज़र का नाम "इंटरनेट" है) मेरे सैमसंग पर पोस्टर का आकार बदला गया ... भयावह रूप से ऑन-प्ले। यह समाधान - पोस्टर के रूप में एक पारदर्शी जिफ़ और पृष्ठभूमि के रूप में "पोस्टर" - हल किया गया कि, लेकिन, अब पोस्टर IE-9, 10 या 11. में प्रदर्शित नहीं होता है

— plugincontainer

समाधान पारदर्शी जिफ और पोस्टर-ए-बैकग्राउंड और उपयोग को छोड़ना था (ऊपर लार्स एरिक्सन जवाब देखें) वीडियो [पोस्टर] {ऑब्जेक्ट-फिट: भरें}। एंड्रॉयड 5.1.1 के तहत सैमसंग देशी ब्राउज़र पर हल समस्या। और IE कोई समस्या नहीं के साथ पोस्टर प्रदर्शित करता है

— plugincontainer

यह दृष्टिकोण विशेष रूप से मोबाइल के लिए बेहतर है। एंड्रॉइड पर होने object-fitवाले जंगली आकार के विकृतियों को रोकता नहीं posterहै जबकि सामग्री अभी भी लोड हो रही है।

— भाषाविद

Answer 6

मैं इस विचार के साथ आया था और यह पूरी तरह से काम करता है। ठीक है तो मूल रूप से हम वीडियो को डिस्प्ले से पहले फ्रेम से बाहर निकालना चाहते हैं और फिर पोस्टर को वीडियो के वास्तविक आकार का आकार दें। यदि हम आयाम सेट करते हैं तो हमने इनमें से एक कार्य पूरा किया है। तब केवल एक ही बचता है। तो अब, पहला तरीका मुझे पता है कि वास्तव में एक पोस्टर को परिभाषित करना है। हालाँकि हम वीडियो को एक फेक देने वाले हैं, जो मौजूद नहीं है। इससे बैकग्राउंड पारदर्शी होगा। यानी हमारे माता-पिता की पृष्ठभूमि स्पष्ट होगी।

उपयोग करने में सरल, हालाँकि यह सभी वेब ब्राउज़र के साथ काम नहीं कर सकता है यदि आप वीडियो के आयाम के आयाम का आकार बदलना चाहते हैं क्योंकि मेरा कोड "पृष्ठभूमि-आकार" का उपयोग कर रहा है।

HTML / एचटीएमएल 5:

<div class="video_poster">
    <video poster="dasdsadsakaslmklda.jpg" controls>
        <source src="videos/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<div>

सीएसएस:

video{
    width:694px;
    height:390px;
}
.video_poster{
    width:694px;
    height:390px;
    background-size:694px 390px;
    background-image:url(images/myvideo_poster.jpg);
}

Comments

यह चतुर है, मैंने इसे एक शॉट दिया। यह सही नहीं है, लेकिन वहां हो रहा है ... jsfiddle.net/trpeters1/NJtc9

— टिम पीटरसन

हां आप सही हैं। आपके jsfiddle को देखकर मुझे अब एहसास हुआ कि वीडियो का आयाम भी सही होना चाहिए, न कि केवल वीडियो तत्व। मुझे लगता है कि मैं सिर्फ भाग्यशाली था जब मैंने इसे अपने पृष्ठ पर आज़माया।

— जोनाथन जे

Answer 7

<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

आवरण

video{
   object-fit: cover; /*to cover all the box*/
}

भरण

video{
   object-fit: fill; /*to add black content at top and bottom*/
   object-position: 0 -14px; /* to center our image*/
}

ध्यान दें कि वीडियो नियंत्रण हमारी छवि पर है , इसलिए हमारी छवि पूरी तरह से दिखाई नहीं देती है। यदि आप ऑब्जेक्ट-फिट कवर का उपयोग कर रहे हैं, तो अपनी छवि को फ़ोटोशॉप के रूप में एक दृश्य ऐप पर संपादित करें और मार्जिन बॉटम कंटेंट जोड़ें।

Answer 8

मेरे पास एक समान मुद्दा था और मैंने इसे अपने वीडियो (16: 9) के समान पहलू अनुपात के साथ एक छवि बनाकर ठीक किया। मेरी चौड़ाई वीडियो टैग पर 100% पर सेट है और अब छवि (320 x 180) पूरी तरह से फिट बैठती है। उम्मीद है की वो मदद करदे!

Answer 9

आप अंगूठे उत्पन्न करने के बाद छवि आकार का आकार बदल सकते हैं

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);

Answer 10

आप मोबाइल डिवाइस पर वीडियो के बजाय छवि दिखाने के लिए पोस्टर का उपयोग कर सकते हैं (या ऐसे उपकरण जो वीडियो ऑटोप्ले कार्यक्षमता का समर्थन नहीं करते हैं)। क्योंकि मोबाइल डिवाइस वीडियो ऑटोप्ले कार्यक्षमता का समर्थन नहीं करते हैं।

<div id="wrap_video">
<video preload="preload" id="Video" autoplay="autoplay" loop="loop" poster="default.jpg">
<source src="Videos.mp4" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>
</div>

अब आप केवल पोस्टर विशेषता को स्टाइल कर सकते हैं जो कि मीडिया-क्वेरी के माध्यम से मोबाइल डिवाइस के लिए वीडियो टैग के अंदर है।

#wrap_video
{
width:480px;
height:360px;
position: relative;
} 
@media (min-width:360px) and (max-width:780px)
{
video[poster]
{
top:0 !important;
left:0 !important;
width:480px !important;
height:360px !important;
position: absolute !important;
}
}

Comments

दरअसल, iOS 10+ playinline विशेषता के साथ वीडियो ऑटोप्ले कार्यक्षमता का समर्थन करता है।

— लुकास पेट्र

आप उस विशेषता को कैसे निर्दिष्ट करते हैं?

— खोम नाज़िद

Answer 11

height:500px;
min-width:100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size:100% 100%;
object-fit:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

Answer 12

यह काम किया

<video class="video-box" poster="/" controls>
    <source src="some source" type="video/mp4">
</video>

और सीएसएस

.video-box{
 background-image: 'some image';
 background-size: cover;
}

Answer 13

  <div class="container">
        <video poster="~/Content/WebSite/img/SiteSetting/Load.gif" autoplay muted loop class="myVideo">
            <source src="~/Content/WebSite/images/VideoTube.mp4" type="video/mp4" />
        </video>

    </div>



 <style>
    .myVideo {
position: absolute;
right: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: inherit;
 }
@media only screen and (max-width:768px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
    }
   }

     @media only screen and (max-width:320px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
  }
}
</style>