No se pudo integrar el reproductor de video de Bitmovin en la aplicación de ReactJS.
Estoy intentando integrar el reproductor Bitmovin en mi aplicación react js. Soy nuevo en react js. He incluido el enlace cdn al archivo index.html. Cuando se hace clic en el banner del video, debería abrirse una nueva página con el reproductor de video. Por lo tanto, en App.js, he creado una ruta a un componente llamado VideoPlayer.js donde he colocado el elemento \<div> donde se integrará el reproductor de video. He colocado los códigos de JavaScript del reproductor de video en la página index.html.
¿Lo estoy haciendo bien porque el reproductor de video no se muestra y cuando coloco el código JavaScript del reproductor de video en el componente no puede encontrar Bitmovin y Player?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="%PUBLIC_URL%/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/assets/css/style.css">
<link rel="stylesheet" href="%PUBLIC_URL%/assets/css/responsive.css">
<link rel="stylesheet" href="%PUBLIC_URL%/assets/slick/slick.css">
<link rel="stylesheet" href="%PUBLIC_URL%/assets/slick/slick-theme.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
<script defer="" src="%PUBLIC_URL%/assets/fontawesome/svg-with-js/js/fontawesome-all.js"></script>
<script src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js" type="text/javascript"></script>
<script src="https://js.stripe.com/v3/"></script>
<span id="header_scripts"></span>
</head>
<body>
<div id="root"></div>
<div id="google_analytics"></div>
<div id="body_scripts"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="%PUBLIC_URL%/assets/js/jquery.min.js"></script>
<script src="%PUBLIC_URL%/assets/js/popper.min.js"></script>
<script src="%PUBLIC_URL%/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/assets/js/script.js"></script>
<script src="%PUBLIC_URL%/assets/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
var bitmovinConfig = {
key: "a9438b8a-97ae-4502-955b-fe615878e8c7",
playback: {
autoplay: true,
muted: true
},
dnaConfig: {},
style: {
width: "",
height: "",
ux: true
}
};
var playerDiv = document.getElementById("demoplayer");
if(playerDiv){
console.log("Success");
player = new bitmovin.player.Player(
document.getElementById("demoplayer"),
bitmovinConfig
);
player
.load({
//Only one playlist URL must be set at a time.
hls: "https://demo-vod.streamroot.io/index.m3u8"
//dash: 'YOUR_PLAYLIST_URL',
//smooth: 'YOUR_PLAYLIST_URL'
})
.then(function() {
player.play();
});
}else{
console.log("No Success");
}
</script>
</body>
</html>
App.js:
import React, { Component } from "react";
import ReactTimeout from "react-timeout";
import Emitter from "./components/Services/EventEmitter;";
import { Router, Switch, Route, Redirect } from "react-router-dom";
import { createBrowserHistory as createHistory } from "history";
import VideoComponent from "./components/User/Video/VideoPlayer;";
<approute path="{"/video/:id"}" component="{VideoComponent}" layout="{EmptyLayout}" screenprops="{this.eventEmitter}"></approute>
VideoPlayer.js (component):
import React, { useState, useEffect } from 'react';
class VideoComponent extends React.Component {
render() {
return (<div><div id="demoplayer"></div></div>);
}
}
export default VideoComponent;
davy.ai
Basándonos en la información proveída, parece que has incluido el código Javascript del reproductor Bitmovin en el archivo index.html, pero no lo has integrado correctamente en tu aplicación de React.
Se recomienda que no agregues directamente código Javascript al archivo index.html en una aplicación de React. En su lugar, deberías usar una biblioteca o componente de React que te ayude a integrar el reproductor Bitmovin en tu aplicación.
Una biblioteca como React-Bitmovin-Player (https://github.com/bitmovin/bitmovin-player-ui-react) proporciona un componente de React listo para usar para el reproductor Bitmovin.
Para usar esta biblioteca, primero debes instalarla a través de NPM:
npm install --save bitmovin-player-ui-reactLuego, en tu componente VideoPlayer.js, puedes importar el componente BitmovinPlayer y pasarle las props necesarias:
“`import { BitmovinPlayer } from ‘bitmovin-player-ui-react’;
class VideoPlayer extends React.Component {
render() {
const playerConfig = {
key: “TU_CLAVE_DE_REPRODUCTOR”,
source: {
hls: “TU_URL_DE_VIDEO”
}
};
}
}
export default VideoPlayer;
“`
Reemplaza “TU_CLAVE_DE_REPRODUCTOR” y “TU_URL_DE_VIDEO” con tus valores propios.
Por último, en tu archivo App.js, reemplaza la importación del componente VideoComponent con lo siguiente:
import VideoPlayer from "./components/User/Video/VideoPlayer";Y reemplaza el componente AppRoute correspondiente con:
<route path="/video/:id" component="{VideoPlayer}"></route>Esto debería integrar adecuadamente el reproductor Bitmovin en tu aplicación de React y mostrar el reproductor de video al hacer clic en el banner de video.