Reactで背景ビデオを追加しますか？

Question

コンテンツが読み込まれるとすぐに再生される、フルスクリーンの背景画像を含む簡単なリンク先ページを作成しようとしています。

Reactの中のReactやCSSを使ってこれを行う方法はありますか？

npmモジュールの反応ドライブインを使用しようとしましたが、私の人生の間、私のリアクションコンポーネントをビデオにロードする方法を理解できません。ビデオは他のコンポーネントにロードされ続けます。

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

実際、私のプロジェクトでTrevorのコードをうまく動かすことができました。私はソース要素に終了タグを追加する必要がありました。

<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> 

また、「autoplay」は「autoPlay」に変更する必要があります。リアクションはあなたに警告を表示し、ビデオを自動再生しません。これらの2つの変更の外に、コードのコピーと貼り付けはうまくいくはずです。

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から 'のautoPlay' に変更しなければならないことに注意してくださいありがとうございました。 これはReactでビデオを再生する別の方法です。わたしにはできる。 sample.mp4ファイルはJSファイルと同じディレクトリにあることに注意してください。