admin 管理员组

文章数量: 1086019

I am trying to make a page with looping background video with React js.

When I pile the code I can see the video is playing straight away on the browser but when I click the link of website, the video is not playing. I should click the Home button in the page and starts again.

I used 

<video src={BackVideo} autoplay="true" loop="true">

I could not use :

react-native-video

library because I got an error when I import the library in the code.

Also I have one more problem that the video is not playing in Safari at all.

Can someone help me please.

Here is my part of Javascript file

render() {
    return (
      <div>
        <div className="bgded overlay">
        {/* Menu, call the menu ponent with the ChangeViewButtonClick function recieved from Dashbaord */}
          <Menu ChangeViewButtonClick={this.props.ChangeViewButtonClick} />

        </div>

        <header className="v-header container">

      <div class="fullscreen-video-wrap">

        <video src={BackVideo} autoplay="true" loop="true"> </video>

    </div>
    <div className="header-overlay"></div>
    <div className="header-content">

       <article>
              <h1 className="heading">Something</h1>
              <h2 className="heading">something too</h2>



            </article>

    </div>
       </header>

        {/* Start of Overview */}
        <div className="wrapper row3">
          <main className="hoc container clear">
            <article className="two_third first">
              <h4 className="font-x2 font-x3">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                Exercitationem, nihil.
              </h4>


            </article>

          </main>
        </div>
        {/* End of Overview */}
      </div>

I am trying to make a page with looping background video with React js.

When I pile the code I can see the video is playing straight away on the browser but when I click the link of website, the video is not playing. I should click the Home button in the page and starts again.

I used 

<video src={BackVideo} autoplay="true" loop="true">

I could not use :

react-native-video

library because I got an error when I import the library in the code.

Also I have one more problem that the video is not playing in Safari at all.

Can someone help me please.

Here is my part of Javascript file

render() {
    return (
      <div>
        <div className="bgded overlay">
        {/* Menu, call the menu ponent with the ChangeViewButtonClick function recieved from Dashbaord */}
          <Menu ChangeViewButtonClick={this.props.ChangeViewButtonClick} />

        </div>

        <header className="v-header container">

      <div class="fullscreen-video-wrap">

        <video src={BackVideo} autoplay="true" loop="true"> </video>

    </div>
    <div className="header-overlay"></div>
    <div className="header-content">

       <article>
              <h1 className="heading">Something</h1>
              <h2 className="heading">something too</h2>



            </article>

    </div>
       </header>

        {/* Start of Overview */}
        <div className="wrapper row3">
          <main className="hoc container clear">
            <article className="two_third first">
              <h4 className="font-x2 font-x3">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                Exercitationem, nihil.
              </h4>


            </article>

          </main>
        </div>
        {/* End of Overview */}
      </div>
  • javascript
  • html
  • reactjs
Share Improve this question edited Nov 22, 2018 at 0:49 Axis asked Nov 21, 2018 at 22:39 AxisAxis 2,1322 gold badges24 silver badges43 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

I figure out and might someone have the same problem.

use autoPlay loop muted so;

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

本文标签： javascriptReact js stop looping background videoStack Overflow

版权声明：本文标题：javascript - React js stop looping background video - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744098853a2533404.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。