index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MarkLogic Binaries with metadata</title>
    <script src="node_modules/react/dist/react.js"></script>
    <script src="node_modules/react-dom/dist/react-dom.js"></script>
    <script src="node_modules/babel-core/browser.min.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
    class VideoPlayer extends React.Component {
      constructor() {
        super();
        this.state = {
          data: []
        }
      }

      loadVideoMetadataFromServer() {
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: data => this.setState({data: data}),
          error: (xhr, status, err) => console.log(this.props.url, status, err.toString())
        });
      }

      componentDidMount() {
        this.loadVideoMetadataFromServer();
      }

      render() {
        return (
          <div className="videoPlayer">
            <Clip metadata={this.state.data} />
          </div>
        );
      }
    }

    class Clip extends React.Component {
      constructor() {
        super();
        this.uriToVideoClip = '/clips/bunny.mp4'
      }
      render() {
        return (
          <div className="clipMetadata">
            <h3>Video clip with metadata</h3>
            <p>Clip title: {this.props.metadata.title}</p>
            <p>More information: <a href={this.props.metadata.info}>{this.props.metadata.info}</a></p>
            <video controls preload="auto" width="640" height="360">
              <source src={this.uriToVideoClip + "?data=content"} type="video/mp4" />
            </video>
          </div>
        );
      }
    }

    ReactDOM.render(
      <VideoPlayer url="/clips/bunny.mp4?data=meta" />,
      document.getElementById('content')
    );
    </script>
  </body>
</html>