我正在尝试将Bitmovin播放器集成到我的react js应用程序中。我是新反应js。我已经包含了指向index.html文件的cdn链接。当视频横幅被点击时，一个新的页面应该用视频播放器打开。因此，在App.js中，我创建了一个名为VideoPlayer.js的组件的路由，在那里我放置了<div>元素，视频播放器将在其中集成。我已经把视频播放器的javascript代码放在了index.html页面中。
我做得对吗？因为视频播放器没有显示，当我把视频播放器的javascript代码放在组件上时，它找不到bimovin和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}
/>
我没有包含App.js的所有代码，因为该文件有很多代码，出于安全考虑。
js(组件(：
import React, { useState, useEffect } from 'react';
class VideoComponent extends React.Component {
render() {
return( <div><div id="demoplayer"></div>);
}
}
export default VideoComponent;
请在此处查看这些示例。我在你的代码中看不到Bitmovin播放器。。。
https://github.com/bitmovin/bitmovin-player-web-samples/tree/main/react