प्रतिक्रिया के साथ एक पृष्ठभूमि वीडियो जोड़ना?

Question

मैं एक साधारण लैंडिंग पृष्ठ बनाने की कोशिश कर रहा हूं जिसमें एक पूर्णस्क्रीन पृष्ठभूमि छवि है, जो सामग्री लोड होने के तुरंत बाद खेलेंगे।

क्या प्रतिक्रिया के अंदर प्रतिक्रिया या सीएसएस का उपयोग करने का कोई तरीका है?

मैंने एनपीएम मॉड्यूल प्रतिक्रिया-ड्राइव-इन का उपयोग करने का प्रयास किया है, लेकिन मैं अपने जीवन के लिए वीडियो पर अपने रिएक्ट घटकों को लोड करने का तरीका नहीं समझ सकता। वीडियो मेरे अन्य घटकों पर लोड रहता रहता है।

Answer 1

मुझे लगता है कि कुछ इस तरह काम करेगा:

#background-video{ 
 

 
height: 100%; 
 
width: 100%; 
 
float: left; 
 
top: 0; 
 
padding: none; 
 
position: fixed; // optional depending on what you want 
 

 

 
}

<video id="background-video" loop autoplay> 
 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> 
 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg"> 
 
    Your browser does not support the video tag. 
 
</video>

आप आप का उपयोग वीडियो या ग्राहकों के लिए स्क्रीन के आकार के आधार पर अनुपात के साथ समस्याओं में चला सकते हैं।

तो आपको this पोस्ट की जांच करने की आवश्यकता हो सकती है।

आज भी स्क्रीन के आकार पर विचार करें। अगर आप हास्यास्पद रूप से बड़े वाइडस्क्रीन या ऐसा कुछ कर रहे हैं तो आप क्या करने जा रहे हैं? वीडियो तब तक फिट नहीं हो पाएगा जब तक कि आपके पास एक ही रिज़ॉल्यूशन वाला वीडियो न हो।

मैं सुझाव नहीं दे रहा हूं कि एक वीडियो एक बुरा विचार है। मैं बस आपको समस्याओं से अवगत होना चाहता हूं!

शुभकामनाएं!

Answer 2

असल में, मैं ट्रेवर का कोड अपने प्रोजेक्ट में ठीक काम करने में सक्षम था। मुझे स्रोत तत्व में एक समापन टैग जोड़ना पड़ा, जैसे।

<video id="background-video" loop autoPlay> 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" /> 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg" /> 
    Your browser does not support the video tag. 
</video> 

इसके अलावा, ध्यान दें कि 'ऑटोप्ले' 'ऑटोप्ले' में बदल दिया जाना चाहिए या प्रतिक्रिया आप पर एक चेतावनी फेंक देगा और न ही ऑटो वीडियो खेलते हैं। उन दो परिवर्तनों के बाहर, कोड की प्रतिलिपि बनाना और चिपकाना ठीक काम करना चाहिए।

ES6/कोलाहल उदाहरण:

'use strict'; 

import React, {Component} from 'react'; 

class Example extends Component { 
    constructor (props) { 
     super(props); 

     this.state = { 
      videoURL: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4' 
     } 
    } 

    render() { 
     return (
      <video id="background-video" loop autoPlay> 
       <source src={this.state.videoURL} type="video/mp4" /> 
       <source src={this.state.videoURL} type="video/ogg" /> 
       Your browser does not support the video tag. 
      </video> 
     ) 
    } 
}; 

export default Example; 

Answer 3

import sample from './sample.mp4'; 

<video className='videoTag' autoPlay loop muted> 
    <source src={sample} type='video/mp4' /> 
</video> 

ध्यान दें कि 'ऑटोप्ले' Mr_Antivius से 'ऑटोप्ले' में बदल दिया जाना चाहिए धन्यवाद। यह प्रतिक्रिया में वीडियो चलाने का एक वैकल्पिक तरीका है। इससे मेरा काम बनता है। याद रखें कि sample.mp4 फ़ाइल जेएस फ़ाइल की एक ही निर्देशिका में है।