प्रतिक्रिया

Question

के साथ एचटीएमएल 5 वीडियो पर स्रोत यूआरएल अपडेट करना मैं एक एचटीएमएल 5 वीडियो तत्व में स्रोत टैग को अपडेट करना चाहता हूं ताकि जब मैं एक बटन पर क्लिक करता हूं, जो भी एक नया वीडियो स्विच करता है।

मेरे पास एक क्लिप घटक है जो एचटीएमएल 5 वीडियो तत्व देता है, प्रोप के माध्यम से प्रदान किए गए स्रोत यूआरएल के साथ।

function Clip(props) { 
    return (
    <video width="320" height="240" controls autoPlay> 
     <source src={props.url} /> 
    </video> 
) 
} 

मैं भी प्रत्येक फिल्म के एक हिस्से के लिए इसी, एक फिल्म घटक है, जो एक से अधिक URL शामिल है। इसमें एक स्थिति विशेषता भी शामिल है, जो यह याद रखकर एक इटरेटर की तरह कार्य करती है कि कौन सा अनुभाग वर्तमान में खेल रहा है।

class Movie extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     sections: [ 
     'https://my-bucket.s3.amazonaws.com/vid1.mp4', 
     'https://my-bucket.s3.amazonaws.com/vid2.mp4' 
     ], 
     position: 0 
    }; 
    } 
    render() { 
    const sections = this.state.sections 
    const position = this.state.position 

    return (
     <div> 
     {position} 
     <Clip url={sections[position]} /> 
     <button onClick={() => this.updatePosition()}>Next</button> 
     </div> 
    ) 
    } 
    updatePosition() { 
    const position = this.state.position + 1; 
    this.setState({ position: position }); 
    } 
} 

मूवी घटक क्लिप घटक और "अगला" बटन प्रस्तुत करता है। जब अगला बटन क्लिक हो जाता है, तो मैं स्थिति विशेषता को अपडेट करना चाहता हूं और अनुभागों से अगले यूआरएल का उपयोग कर एचटीएमएल 5 वीडियो तत्व पुनः प्रस्तुत करना चाहता हूं।

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

अद्यतन: मैंने एक JSFiddle बनाया, जिसे आप here देख सकते हैं।

अद्यतन 2: वीडियो तत्व कार्यों पर src विशेषता अद्यतन करना!

Answer 1

<source /> के स्रोत को बदलने से किसी कारण से वीडियो स्विच नहीं लगता है। यह एक प्रतिक्रिया मुद्दा नहीं है जो मुझे नहीं लगता है। शायद कैसे <source /> काम करता है। शायद आपको तत्व पर .load() पर कॉल करना होगा। लेकिन इसे सीधे तत्व पर सेट करना आसान है। Can I use javascript to dynamically change a video's source?

आप के बजाय तत्व पर सीधे src सेट कर सकते हैं:

function Clip(props) { 
    return (
    <video width="320" height="240" src={props.url} controls autoPlay> 
    </video> 
) 
} 

Answer 2

लघु awnser: एक key प्रोप <Clip> या <video>, जैसे में जोड़ें:

शीर्ष जवाब देने के लिए टिप्पणी देखें

<Clip url={sections[position]} key={sections[position]} /> 

---

लांग awnser: वीडियो संक्षेप में, क्योंकि परिवर्तन नहीं होगा आप केवल <source> तत्व संशोधित कर रहे हैं और प्रतिक्रिया समझता है कि <video> अपरिवर्तित ही रहेंगे, करना होगा कि वह डोम पर यह अपडेट नहीं करता है और एक नया ट्रिगर नहीं करता उस स्रोत के लिए load घटना।

यकीन है कि न केवल <source> अद्यतन हो जाता है, लेकिन यह भी <video> बनाने के लिए, एक key प्रोप जोड़ने के लिए यह इतना प्रतिक्रिया समझता है कि एक पूरी नई तत्व है।

एक और अधिक पूर्ण विवरण के लिए, डॉक्स :) प्रतिक्रिया पर this article about keys की जाँच