flowplayer streamig stop, когда я нахожу свое приложение - PullRequest
Новая
       30

flowplayer streamig stop, когда я нахожу свое приложение

0 голосов
/ 26 апреля 2019

У меня проблемы с Flowplayer в реакции.У меня есть один компонент с проигрывателем, как это выглядит в двух разделах (дома и в сетке), когда приложение запускается дома, проигрыватель работает отлично, но когда я иду в сетку, проигрыватель останавливается ... почему?если я установлю всю конфигурацию в моем app.js, он должен охватить все разделы, верно?

вот мой код:

app.js (в моем индексе у меня есть все cdns) 

import React, { Component} from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from './components/commons/Header/Header';
import Footer from './components/commons/Footer/Footer';
import Home from './Screens/Home';
import Grid from './Screens/Grid';
import {Helmet} from "react-helmet";

class App extends Component {
  constructor(props){
    super(props)
    this.state = {}
  }

 render() {

    return (
      <React.Fragment>
      <BrowserRouter>
        <div className='container-fluid'>

        <Header />

        {<Helmet>
             <link rel="stylesheet" href="//releases.flowplayer.org/7.0.2/commercial/skin/skin.css"></link> 
             <script type="text/javascript">{`


                     flowplayer.conf.hlsjs = {
                       maxBufferSize: 0,
                       maxBufferLength: 30,

                       liveSyncDuration: 30
                     }

                     flowplayer.conf.dnaConfig = {};

                     window.onload = function () {
                       flowplayer("#vast", {
                         ima: {
                           ads: [{
                             time: 0,
                             adTag: "url1"
                           },
                           {
                             time: 1800,
                             adTag: "url2"
                           }
                           ] 
                         },

                         key: "$000",
                         splash: true,
                         live: true,
                         share: false,
                         ratio: 5/12,

                         clip: {
                           sources: [
                             { type: "application/x-mpegurl",
                               src:   "urlvideo" }
                           ]
                         }
                       })

                     };
         `}
         </Helmet>}
         <Switch>
            <Route path="/"  exact render={(props) => <Home {...props}/>}/>
            <Route path="/grid" render={(props) => <Grid {...props} />
         </Switch>
        <Footer />
        </div>
        </BrowserRouter>

        </React.Fragment>
    )
  }
}

export default App;

home.js 

import React from 'react'
import MainPlayer from '../components/main-player/Main-player';

export default class Home extends React.Component {
    constructor(props){
        super(props)
    }

    render(){
        return (
             <React.Fragment>
                <MainPlayer />
            </ React.Fragment> 
        )
    }
}

grid.js 

import React from 'react'
import MainPlayer from '../components/main-player/Main-player';

export default class Grid extends React.Component {
    constructor(props){
        super(props)
    }

    render(){
        return (
             <React.Fragment>
                <MainPlayer />
            </ React.Fragment> 
        )
    }
}

Mainplayer.js 

import React from 'react'
import './Main-player.scss';


export default class MainPlayer extends React.Component {
    constructor(props) {
        super(props);
   }


    render() {

        return (
            <React.Fragment>
                <div id="content">
                    <div id="vast" class="flowplayer"></div>
                </div>
            </React.Fragment>
        )
    }

}
...