我有一个Next应用，我想在其中嵌入播放器。为此，我决定使用video.js库。一切正常，例如，YouTube视频。但是，Video.js播放器不播放Azure Media Service上托管的视频
我的玩家代码：

import { useCallback, useEffect, useState } from 'react';
import videojs from 'video.js';
import 'videojs-youtube';
import 'videojs-flash';
import 'videojs-vimeo';

const Player = (props) => {
  const [videoEl, setVideoEl] = useState(null);
  const onVideo = useCallback((el) => {
    setVideoEl(el);
  }, []);

  useEffect(() => {
    if (videoEl == null) return;
    const player = videojs(videoEl, props);
    console.log('quality', player.getVideoPlaybackQuality());
    return () => {
      player.dispose();
    };
  }, [props, videoEl]);

  return (
    <>
      {/* wrap the player in a div with a `data-vjs-player` attribute
      so videojs won't create additional wrapper in the DOM */}
      <div data-vjs-player>
        <video
          ref={onVideo}
          className="video-js"
          style={{ width: '100%', height: '100%' }}
          playsInline
        />
      </div>
    </>
  );
};

export default Player;

视频的选项如下：

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'
    }
  ]
};

在应用程序的头部，我注入了来自Azure文档的以下链接：

<link
      href="//amp.azure.net/libs/amp/2.3.5/skins/amp-default/azuremediaplayer.min.css"
      rel="stylesheet"
    />
    <script src="//amp.azure.net/libs/amp/2.3.5/azuremediaplayer.min.js"></script>

我得到这个错误

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.