CODEWITHSUNDEEP
javascriptreactjsjsx
Taíne Freitas
Taíne Freitas

Reputation: 143

How to integrate a BoxCast Player on Reactjs?

So, I've trying to integrate a BoxCast player on my React aplication (the javascript one), and I don't know what to do. Anyone has some ideas that what I can do? PS: My problem with iframe is not responsive, so I've trying with the javascript one.

<div id="boxcast-widget-{video-example}"></div>
<script type="text/javascript"charset="utf-8">
    (function (d, s, c, o) { var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; var h = (("https:" == document.location.protocol) ? "https:" : "http:"); js.src = h + "//js.boxcast.com/v3.min.js"; js.onload = function () { boxcast.noConflict()("#boxcast-widget-" + c).loadChannel(c, o); }; js.charset = "utf-8"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "{video-example}", { "showTitle": 0, "showDescription": 0, "showHighlights": 0, "showRelated": false, "showCountdown": false, "market": "smb", "showDocuments": false, "showIndex": false, "showDonations": false, "autoplay": "try-muted", "playInline": true, "dvr": false }));
</script>

Thanks!

Upvotes: 0

Views: 101

Answers (2)

emi
emi

Reputation: 3070

You can integrate with something like this:

class BoxCast extends React.Component {
  componentDidMount() {
    const {broadcastChannelId, broadcastId} = this.props;
    this.$el = $(this.el);
    this.context = boxcast(this.$el);
    this.context.loadChannel(broadcastChannelId, {
      autoplay: true,
      showTitle: true,
      showDescription: true,
      showHighlights: true,
      showRelated: false,
      selectedBroadcastId: broadcastId
    });
  }

  componentWillUnmount() {
    this.context.unload();
  }

  render() {
    return <div ref={el => this.el = el} />;
  }
}

And then using it from some other React component:

  return (
    <BoxCast broadcastChannelId={/* Something */} broadcastId={/* Something */} />
  )

Upvotes: 1

emi
emi

Reputation: 3070

This does not looks like its being React compatible. If you insist to use it from React, you'll need to integrate it.

It might be a tedious job and I discourage you from doing that. Look for another provider claiming to be React compatible.

Upvotes: 0

Related Questions