How to properly setup Azure Media Player in React.js? - reactjs

Question

I'm currently integrating a React component with Azure Media Player. I followed the documentation and first, I added the required CDN urls to the index.html file. Then I added the sample code into the App. The problem is, it throws the error 'amp' is not defined no-undef
videoPlayer.js
class videoPlayer extends Component {
render () {
const myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: true,
width: "640",
height: "400",
}
const myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{
"src": "https://devpflmedia-uswe.streaming.media.azure.net//d5f1a8b6-0d52-4e62-addc-aee7bafe408d/097cee43-6822-49bd-84f5-9f6efb05.ism/manifest",
"type": "application/vnd.ms-sstr+xml"
}
]);
return (
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
)
}
}
How can I fix this?

Answer 1

When I use the amp this way, the mentioned on.progress callback works for me. Good luck!
import * as React from "react"
import loader from "./loader";
import { RefObject } from "react";
import './videoPlayer.css';
const DEFAULT_SKIN = "amp-flush";
const DEFAULT_RATIO = [16, 9];
const DEFAULT_OPTIONS = {
controls: true,
autoplay: true,
muted: true,
logo: {
enabled: false
},
};
declare const window: any;
export interface IVideoPlayerProps {
readonly src: { src: string; }[];
readonly options: any;
readonly skin: string;
readonly className: string;
readonly adaptRatio: Array<number>;
}
export default class VideoPlayer extends React.PureComponent<IVideoPlayerProps, {}> {
public static defaultProps = {
skin: DEFAULT_SKIN,
className: "",
adaptRatio: DEFAULT_RATIO,
options: DEFAULT_OPTIONS,
}
videoNode: RefObject<any>;
player: any;
initialization: any;
constructor(props: IVideoPlayerProps) {
super(props);
this.videoNode = React.createRef();
}
componentWillUnmount() {
this._destroyPlayer();
}
componentDidMount() {
const { skin } = this.props;
this.initialization = loader(skin).then(() => {
this._createPlayer();
this._setVideo();
});
}
componentDidUpdate(prevProps: IVideoPlayerProps) {
if (prevProps.src !== this.props.src) {
this.initialization.then(() => this._setVideo());
}
}
_destroyPlayer() {
this.player && this.player.dispose();
}
_setVideo() {
const { src } = this.props;
this.player.src(src);
}
_createPlayer() {
this.player = window.amp(this.videoNode.current, this.props.options);
this.player.on("progress", () => alert('on progress called'));
}
render(): JSX.Element {
return (
<div>
<video
ref={this.videoNode}
/>
</div>
);
}
}
Also the loader function - I use it this way since I may need to use the player in the (possible) offline environment.
export default (skin = 'amp-flush') => {
return new Promise((resolve, _) => {
if (document.querySelector('#amp-azure')) {
// video player is already rendered
return resolve()
}
let scriptTag = document.createElement('script')
let linkTag = document.createElement('link')
linkTag.rel = 'stylesheet'
scriptTag.id = 'amp-azure'
scriptTag.src = '//amp.azure.net/libs/amp/2.1.5/azuremediaplayer.min.js'
linkTag.href = `//amp.azure.net/libs/amp/2.1.5/skins/${skin}/azuremediaplayer.min.css`
document.body.appendChild(scriptTag)
document.head.insertBefore(linkTag, document.head.firstChild)
scriptTag.onload = () => resolve({ skin: skin })
})
}