视频: Azure媒体服务的错误：(代码:4 MEDIA_ERR_SRC_NOT_SUPPORTED)

Question

我有一个下一个应用程序，我想嵌入一个播放器。为此，我决定使用video.js库。一切都很好，比如youtube视频。但是，Video.js player不播放托管在Azure媒体服务上的视频

我的播放器代码：

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.

Answer 1

由于不确定上面提到的具体问题，我认为您可能正在尝试使用平滑流式处理"ms-sstr+xml“，这在Video.js上不是最佳选择。

我们在刚刚发布的存储库中确实有一些示例，展示了如何在AMS中使用Video.js -并列出了已知问题。https://github.com/Azure-Samples/media-services-3rdparty-player-samples

看一下那里，看看这对你的用例场景是否有帮助。欢迎您对此回购的反馈，因为它是新的。如果您看到问题，请在github中添加问题。