How to integrate a BoxCast Player on Reactjs?

Question

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!

Please, edit your answer and indent the code correctly or it will impossible to help you. — emi
– emi, Commented Nov 17, 2020 at 20:29
This code is from the player, like here: support.boxcast.com/en/articles/4235070 — Taíne Freitas
– Taíne Freitas, Commented Nov 17, 2020 at 20:41

emi · Accepted Answer · 2020-11-17 20:49:43Z

1

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 */} />
  )

answered Nov 17, 2020 at 20:49

emi

3,1081 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

emi Over a year ago

@TaíneFreitas Please, up vote the answer, too ;)

emi · Accepted Answer · 2020-11-17 20:34:55Z

0

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.

answered Nov 17, 2020 at 20:34

emi

3,1081 gold badge20 silver badges27 bronze badges

1 Comment

Taíne Freitas Over a year ago

So, in the documentation, they had a Javascript integration, but I not understand very well... boxcast.github.io/boxcast_js_docs/advanced/…

Collectives™ on Stack Overflow

How to integrate a BoxCast Player on Reactjs?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related