I am trying to integrate Bitmovin player to my react js application. I am new to react js. I have included the cdn link to the index.html file. when the video banner is clicked a new page should open with the video player. So in App.js I have created a route to a compnent called VideoPlayer.js where I have placed the <div> element where the video player will be integrated. I have placed the javascript codes of the video player in the index.html page.
Am I doing it right because the video player is not showing and when I place the javascript code of the video player to the component it couldn't find the bimovin and 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}
/>
I have not included all the codes of App.js as the file has a lot of codes and for security reasons.
VideoPlayer.js(Component) :
import React, { useState, useEffect } from 'react';
class VideoComponent extends React.Component {
render() {
return( <div><div id="demoplayer"></div>);
}
}
export default VideoComponent;
Check out these examples here. I don't see the Bitmovin player in your code anywhere...
https://github.com/bitmovin/bitmovin-player-web-samples/tree/main/react