我正在使用 React，我有 2 种类型的视频要播放，1 种是 m3u8，1 种是 mp4。

我有一组电影系列剧集，但它与 m3u8 和 mp4 混合在一起。

那么我怎样才能检测到它是什么，以便它可以在浏览器上显示它。

我正在使用可以轻松播放 m3u8 的 ReactHlsPlayer，但问题是如果它是包含 mp4 文件的 URL，它会拒绝在我的浏览器上读取和显示它。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ReactHlsPlayer from 'react-hls-player';


ReactDOM.render(
  <React.StrictMode>
    <App />
    <ReactHlsPlayer
    src = "url-that-contain-m3u8"
    autoPlay = {false}
    controls = {true}
    width = "100%"
    height = "auto"
    />
  </React.StrictMode>,
  document.getElementById('root')
);

如果我使用

<source src="url-that-contain-mp4" type="video/mp4">

它会完美地读取 mp4 URL，但是，它只会读取 mp4，并拒绝 m3u8

那么有没有一种方法可以创建一个函数或组件来检测我的 URL 是 m3u8 还是 mp4 并使用合适的解决方案播放它？谢谢。

解决方案

根据我的情况，我只需要识别/区分我获得的 URL 是否是 video/mp4 类型（然后是 m3u8），如果您的情况相似或有更多类型需要识别/区分，我认为它会以同样的方式工作。

首先，我快速查看@ControlAltDel 提供的MIME 类型，然后我对如何获取 URL 请求进行了更多研究，这导致XMLHttpRequest由于我使用 POSTMAN 解决方法来查看 URL 请求的标头我明白了，事情变得更清楚了，我需要进入 HEADER 并从中获取 Content-Type。

所以这里有一个快速代码，我可以用它来获得我想要的东西。

let URL = the-url-that-contain-mp4-or-m3u8
// Make a function or variable to get the URL you want, in my case it's the episode URL.

let xhr = new XMLHttpRequest();
// Requests the headers that would be returned if the HEAD request's URL was instead requested with the HTTP GET method
xhr.open('HEAD', url, true);

xhr.onload = function() {
// In here I get the Content Type from the HEAD of the response
    let contentType = xhr.getResponseHeader('Content-Type');
    if (contentType == 'video/mp4'){
        console.log(contentType);
        console.log("This is mp4 video")
//Function to play mp4 file
    }
    else {
        console.log("This is m3u8 then")
// Function to play HLS m3u8 file
    }

};

xhr.send();