Encontro-me de momento a desenvolver um projecto frontend/visualização de dados em que precise de incorporar o modulo de node.js React.Video
, em Javascript
, XML
, ou JSX
.
O projecto pode ser encontrado em: https://github.com/tiagomoraismorgado/estatisticasincendiosportugal
O código fonte da minha pagina é o seguinte
var React = require("react");
var ReactDOM = require("react-dom");
var Cassette = require("react-cassette-player");
var ReactVideo = require("react.video");
var Header = require("../components/header.jsx");
var Footer = require("../components/footer.jsx");
var Jumbotron = require("../components/jumbotron.jsx");
var Router = require("react-router");
var Link = Router.Link;
var ImageTag = require("../components/imagetag.jsx");
var generateHelmet = require("../lib/helmet.jsx");
var SpeakersPromo = require("../components/speakers-promo.jsx");
var speakersInfo = require('../talks/2017');
var Home = React.createClass({
pageMetaDescription: "Three days of building a truly global web together. Come with an idea, leave with a community.",
render: function () {
var self = this;
return (
<div className="home-page">
<Cassette src="http://localhost:9090/assets/audio/1.mp3"
preload="none"
cassetteColor="#FFFFF"
labelColor="#000"
tapeColor="#000"
controlsColor="#FFFF"
containerClass="quasi-wrap" />
);
{generateHelmet(this.pageMetaDescription)}
<Header logoImage="/assets/images/mozilla-festival_wordmark-interim_horizontal.jpg"/>
<Jumbotron className="home-jumbotron" image="/assets/images/hero/home/banner-home_5.jpg"
image2x="/assets/images/hero/home/banner-home_5.jpg">
<div className="content-wrapper">
<h1>Plataforma de visualização de dados Incêndios Portugal 2017</h1>
<p className="mb-0">Projecto de desenvolvimento frontend criado por Tiago Morais Morgado</p>
<p className="mb-0">que tem em vista a criação de uma plataforma de visualização de dados com o propósito de fazer um ponto de situação em relação aos danos provocados por incêndios em Portugal em 2017</p>
</div>
</Jumbotron>
<div className="news content wide">
</div>
<div className="white-background">
<div className="centered content wide">
<h1>Relatório de dados incêndios Portugal 2018</h1>
<p>Abaixo poderá consultar os relatórios dos incêndios que assolaram o território nacional em 2017. Os relatórios contêm gráficos em formato 2d e 3d.</p>
<a href="https://ti.to/mozilla/mozilla-festival-2018" className="btn btn-arrow"><span>Mais informação</span></a>
</div>
</div>
<Footer />
</div>
);
}
});
module.exports = Home;
Tenho como exemplo o código do site do node package manager, que pode ser encontrado em:
https://www.npmjs.com/package/react.video
a saber:
import React from 'react';
import ReactVideo from 'react.video';
class App extends React.Component {
constructor (props) {
super(props);
this.onClickPlay = this.onClickPlay.bind(this);
this.state = {
muted: false,
source: [
{
src: 'http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4',
type: 'video/mp4'
}
]
};
}
// play() method is called via refs.
onClickPlay () {
this.refs.VideoComp.play();
}
render () {
// a basic style object
const VideoStyle = {
backgroundColor: 'green'
};
return (
<ReactVideo
ref={'VideoComp'}
cls={'custom-video'}
height={500} width={'100%'}
style={VideoStyle}
muted={this.state.muted}
src={'http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4'}
source={this.state.source}>
</ReactVideo>
<div>
<div onClick={this.onClickPlay}>Play</div>
</div>
);
}
};
export default App;
contudo a sintaxe é radicalmente diferente e estou a ter alguma dificuldade em integrar o código no meu projecto do meu site de visualização de dados dos danos causados pelos incêndios que assolaram Portugal em 2017, no meu repositório de github. se alguém puder ajudar-me no sentido de providenciar exemplos de como fazê-lo ficaria muy grato.