title: VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) with Azure Media Services
body: <p>I have a Next app where I want to embed a player. To do so, I decided to use the video.js library.
  Everything works fine with, eg, youtube videos.
  However, Video.js player doesn't play videos hosted on Azure Media Service</p>
  <p>My player code:</p>
  <pre><code>import { useCallback, useEffect, useState } from 'react';
  import videojs from 'video.js';
  import 'videojs-youtube';
  import 'videojs-flash';
  import 'videojs-vimeo';
  
  const Player = (props) =&gt; {
    const [videoEl, setVideoEl] = useState(null);
    const onVideo = useCallback((el) =&gt; {
      setVideoEl(el);
    }, []);
  
    useEffect(() =&gt; {
      if (videoEl == null) return;
      const player = videojs(videoEl, props);
      console.log('quality', player.getVideoPlaybackQuality());
      return () =&gt; {
        player.dispose();
      };
    }, [props, videoEl]);
  
    return (
      &lt;&gt;
        {/* wrap the player in a div with a `data-vjs-player` attribute
        so videojs won't create additional wrapper in the DOM */}
        &lt;div data-vjs-player&gt;
          &lt;video
            ref={onVideo}
            className=&quot;video-js&quot;
            style={{ width: '100%', height: '100%' }}
            playsInline
          /&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default Player;
  </code></pre>
  <p>The options for videos are the following:</p>
  <pre><code>const videoJsOptions = {
    techOrder: ['html', 'youtube', 'flash', 'other supported tech'],
    autoplay: true,
    controls: true,
    usingNativeControls: true,
    sources: [
      {
        src:
  'https://my-video.streaming.media.azure.net/49a94f-122/manifest',
        type: 'application/vnd.ms-sstr+xml'
      }
    ]
  };
  </code></pre>
  <p>In the head of the app I injected the following links from the Azure docs:</p>
  <pre><code>&lt;link
        href=&quot;//amp.azure.net/libs/amp/2.3.5/skins/amp-default/azuremediaplayer.min.css&quot;
        rel=&quot;stylesheet&quot;
      /&gt;
      &lt;script src=&quot;//amp.azure.net/libs/amp/2.3.5/azuremediaplayer.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>I get this error</p>
  <pre><code>VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.
  </code></pre>