ReactでHTML5ビデオのソースURLを更新する

Question

HTML5ビデオ要素のソースタグを更新して、ボタンをクリックしたときに再生中のものが新しいビデオに切り替わるようにしたいとします。

私はHTML5ビデオ要素を返すClipコンポーネントを持ち、ソースURLはpropsで提供されています。

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

ムービーコンポーネントもあります。ムービーコンポーネントには、ムービーのセクションにそれぞれ対応する複数のURLが含まれています。また、現在再生中のセクションを記憶することによってイテレータのように機能するposition属性も含まれています。

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 }); 
    } 
} 

ムービーコンポーネントは、クリップコンポーネントと「次へ」ボタンをレンダリングします。 [次へ]ボタンがクリックされると、位置属性を更新し、セクションの次のURLを使用してHTML5動画要素を再レンダリングします。

現在、「次へ」を押すと、HTML5ビデオソースタグが更新されますが、要素は前のURLから動画を再生し続けます。誰も私はビデオ要素をリセットする方法を把握するのに役立つことができますか？

更新：私はJSFiddleを作成しました。これはhereです。

更新2：ビデオ要素のsrc属性を更新すると機能します。

Answer 1

<source />のsrcを変更しても何らかの理由でビデオが切り替わらないようです。これは私が考えていない反応の問題ではありません。おそらくちょうど<source />の仕組みでしょうか。おそらく、要素の上に​​をもう一度呼び出す必要があります。しかし、要素自体に直接設定するほうが簡単です。

トップの答えにコメントを参照してください：あなたが代わりに要素の上に直接srcを設定することができCan I use javascript to dynamically change a video's source?

：

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

Answer 2

ショートawnser：例えば、<Clip>または<video>にkey小道具を追加します。

を

---

ロングawnser：ビデオは変更されませんので、本質的にはあなただけ<source>要素を変更して反応していること<video>は不変でなければならないことを理解しているので、それはDOM上でそれを更新しないと新しいトリガーされませんloadそのソースのイベント。

が更新されるだけでなく、<video>も確実に反映されるように、keyの小道具を追加して、Reactが全く新しい要素であることを理解してください。より完全な説明については

、上のthis article about keysは、ドキュメントを反応させるのチェックアウトが:)