0
190
Views¿Cómo puedo detectar que la URL es mp4 o m3u8 y reproducirla en el navegador?
Estoy usando React, tengo 2 tipos de video que quiero reproducir, 1 es m3u8 y 1 es mp4.
Tengo un conjunto de episodios de series de películas, pero se mezcló con m3u8 y mp4 juntos.
Entonces, ¿cómo puedo detectar lo que sea para que pueda mostrarlo en el navegador?
Estoy usando ReactHlsPlayer que puede reproducir fácilmente el m3u8, pero el problema es que si es la URL que contiene un archivo mp4, se niega a leerlo y mostrarlo en mi navegador.
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') );si uso
<source src="url-that-contain-mp4" type="video/mp4">Leerá la URL de mp4 perfectamente, pero luego, solo leerá el mp4 y rechazará el m3u8
Entonces, ¿hay alguna manera de que pueda crear una función o un componente que pueda detectar si mi URL es m3u8 o mp4 y reproducirlo con una solución adecuada? Gracias.
1 answers
Answer question0
Basado en mi condición, solo necesito reconocer/discriminar si la URL que obtengo es tipo video/mp4 o no (será m3u8 entonces), si tu caso es similar o tiene más tipos que necesitan reconocer/discriminar , creo que funcionará de la misma manera.
Primero, echo un vistazo rápido a los tipos MIME que proporciona @ControlAltDel, y luego investigo un poco más sobre cómo tomar la solicitud de URL, lo que conduce aXMLHttpRequest debido a la solución con POSTMAN para ver el encabezado de la solicitud de URL que Entiendo, las cosas se vuelven más claras, que necesito ingresar al ENCABEZADO y obtener el Tipo de contenido de él.
Así que aquí hay un código rápido que hago para obtener las cosas que quiero.
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();