title: How to use hls.js with react
body: <p>I need some help trying to figure how to use hls.js in react.
  Let me explain the situation I have to fetch the m3u8 from an api I'm able to make it work from a basic html with the <code>&lt;script&gt;</code> tag but when i try to implement it on react it doesn't work any help is appreciated. This is what I've got so far: </p>
  
  <pre><code>import React, { Component } from "react";
  
  import PropTypes from "prop-types";
  import { withStyles } from "@material-ui/core/styles";
  import Paper from "@material-ui/core/Paper";
  import Typography from "@material-ui/core/Typography";
  import Grid from "@material-ui/core/Grid";
  import ButtonBase from "@material-ui/core/ButtonBase";
  import CircularProgress from "@material-ui/core/CircularProgress";
  
  import Hls from "hls.js";
  
  const styles = theme =&gt; ({
    root: {
      flexGrow: 1,
      paddingTop: theme.spacing.unit * 2,
      paddingBottom: theme.spacing.unit * 2,
      marginBottom: 24,
      marginLeft: 24,
      marginRight: 60
    },
    image: {
      marginLeft: 24,
      width: 200,
      height: 200
    },
    img: {
      display: "block",
      width: 200,
      height: 200,
      maxWidth: "100%",
      maxHeight: "100%"
    },
    detail: {
      marginLeft: 16
    },
    progress: {
      display: "flex",
      justifyContent: "center",
      alignItems: "center"
    }
  });
  
  class Video extends Component {
    constructor(props) {
      super(props);
    }
  
    componentWillReceiveProps(props) {
      if (props.episode &amp;&amp; this.player) {
        var hlsUrl = props.episode.assets.hls;
        var video = this.player;
        if (video.canPlayType("application/vnd.apple.mpegurl")) {
          // If HLS is natively supported, let the browser do the work!
          video.src = "hlsUrl";
          video.addEventListener("loadedmetadata", function() {
            video.play();
          });
        } else if (Hls.isSupported()) {
          // If the browser supports MSE, use hls.js to play the video
          var hls = new Hls({
            // This configuration is required to insure that only the
            // viewer can access the content by sending a session cookie
            // to api.video service
            xhrSetup: function(xhr, url) {
              xhr.withCredentials = true;
            }
          });
          hls.loadSource(hlsUrl);
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play();
          });
        } else {
          alert("Please use a modern browser to play the video");
        }
      }
    }
  
    handleSerieClick = () =&gt; {
      this.props.history.push("/" + this.props.serie.apiName);
    };
  
    _onTouchInsidePlayer() {
      if (this.player.paused) {
        this.player.play();
      } else {
        this.player.pause();
      }
    }
  
    render() {
      const { classes, theme } = this.props;
      if (this.props.episode) {
        const { assets, title, description, videoId } = this.props.episode;
        return (
          &lt;Grid className={classes.root} item xs={12}&gt;
            &lt;video
              controls
              onClick={this._onTouchInsidePlayer}
              ref={player =&gt; (this.player = player)}
              autoPlay={true}
            /&gt;
          &lt;/Grid&gt;
        );
      } else {
        return (
          &lt;Grid className={classes.progress} item xs={12}&gt;
            &lt;CircularProgress size={100} /&gt;
          &lt;/Grid&gt;
        );
      }
    }
  }
  
  export default withStyles(styles, { withTheme: true })(Video);
  </code></pre>
  
  <p>This is the code that works with <code>&lt;script&gt;</code> tag</p>
  
  <pre><code>&lt;script src="https://cdn.jsdelivr.net/npm/hls.js@latest"&gt;&lt;/script&gt;
  
  &lt;video id="video"&gt;&lt;/video&gt;
  
  &lt;script&gt;
    var hlsUrl = 'https://cdn.libcast.net/stream/3de8ff01-18f7-4262-a1f2-abeeb9bb962b/hls/manifest.hls';
    var video = document.getElementById('video');
    if (video.canPlayType('application/vnd.apple.mpegurl')) {
      // If HLS is natively supported, let the browser do the work!
      video.src = 'hlsUrl';
      video.addEventListener('loadedmetadata',function() {
        video.play();
      });
  
    } else if (Hls.isSupported()) {
      // If the browser supports MSE, use hls.js to play the video
      var hls = new Hls({
        // This configuration is required to insure that only the 
        // viewer can access the content by sending a session cookie
        // to api.video service
        xhrSetup: function(xhr, url) { xhr.withCredentials = true; }
      });
      hls.loadSource(hlsUrl);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
      });
  
    } else {
      alert('Please use a modern browser to play the video');
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I pass the hls source from a parent component in the props and in componentWillRecieveProps i try to use the source to run the player</p>
  
  <p><em>EDIT</em></p>
  
  <p>THe problem seems to be that <code>&lt;video&gt;</code> tag is undefined when I try to apply the source.</p>