Riproduzione di file m3u8 con tag video HTML

Sto cercando di utilizzare HTTP Live Streaming (HLS) per trasmettere video ai miei computer e al mio iPhone. Dopo aver letto la panoramica HTTP Live Streaming di Apple e le "Best practice per la creazione e distribuzione di HTTP Live Streaming Media per iPhone e iPad", sono un po 'bloccato.Riproduzione di file m3u8 con tag video HTML

ho preso il mio file sorgente (un mkv) e ffmpeg usata per codificare il file nel formato MPEG-TS e le impostazioni di Apple raccomandati e un profilo Baseline 3.0:

ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2 -y "output.ts"

non ci preoccupa. Ho usato uno pre-compiled segmenting tool per segmentare il video e creare una playlist .m3u8. Il file risultante si presentava così:

#EXTM3U 
#EXT-X-TARGETDURATION:10 
#EXTINF:10, 
http://localhost/media/stream/stream-1.ts 
#EXTINF:10, 
http://localhost/media/stream/stream-2.ts 
#EXTINF:10, 
http://localhost/media/stream/stream-3.ts 
#EXT-X-ENDLIST

ho controllato che contro alcuni Example Playlist Files for use with HTTP Live Streaming, e non vedo problemi. Ho anche provato a riprodurre il file .m3u8 in VLC e funziona come un incantesimo.

ho creato una pagina HTML per riprodurre il file:

<html lang="en"> 
    <head> 
     <meta charset=utf-8/> 
    </head> 
    <body> 
     <div id='player'> 
      <video width="352" height="288" src="stream.m3u8" controls autoplay> 
      </video> 
     </div> 
    </body> 
</html>

E questa pagina non funziona in Chrome, Safari, sul mio iPhone. Gli esempi di tag video html5 su w3schools funzionano correttamente sul mio computer e la panoramica ufficiale di Apple sopra menzionata fornisce un esempio HTML molto simile alla mia pagina. Tuttavia, il mio lettore video non risponde affatto quando visito la mia pagina .m3u8.

fonte

2013-11-05 drucifer

È possibile visualizzare l'output dello strumento mediastreamvalidator? – vipw

Grazie per la risposta! Sfortunatamente, non ho biforcato il denaro per diventare uno "vero" sviluppatore Apple, quindi non ho quel particolare strumento. Ho cercato un sostituto probabile con scarso successo. Qualunque consiglio potresti dare su quel fronte sarebbe il benvenuto! – drucifer

Forse potresti mettere i file su un server web pubblico. È possibile utilizzare un'istanza micro Amazon EC2 se è necessario un server web gratuito. Quindi qualcuno con accesso a più strumenti potrebbe dare un'occhiata. In realtà, questo mi fa meravigliare dei tipi mime restituiti dal tuo server web ... Vedi se questo potrebbe aiutare: http://stackoverflow.com/questions/6438680/http-live-streaming-not-working-on- apache/15696465 – vipw

Potrebbe essere un po 'in ritardo con la risposta, ma è necessario fornire l'attributo di tipo MIME nel tag video: type = "application/x-mpegURL". Il tag video che uso per un flusso 16: 9 assomiglia a questo.

<video width="352" height="198" controls> 
    <source src="playlist.m3u8" type="application/x-mpegURL"> 
</video>

fonte

2014-04-22 16:50:58

+12

Se qualcun altro ha testato questa risposta, è opportuno notare che non funzionerà su Chrome. Funziona bene in Edge. Controlla questa [risposta] (http://stackoverflow.com/a/23388308/4092887) per ulteriori informazioni su una soluzione per la compatibilità del browser. –

HLS non eseguirà lo streaming in una pagina su Chrome solo in un tag video, in quanto non è il browser nativo per HLS. – HeidiWF

aggiunta alla risposta ben.bourdin, si può almeno in qualsiasi applicazione basata su HTML, verificare se il browser supporta HLS nel suo elemento video:

Mettiamoci supporre che il video elemento ID è " myVideo", poi attraverso JavaScript è possibile utilizzare il "canPlayType" funzione (http://www.w3schools.com/tags/av_met_canplaytype.asp)

var videoElement = document.getElementById("myVideo"); 
if(videoElement.canPlayType('application/vnd.apple.mpegurl') === "probably" || videoElement.canPlayType('application/vnd.apple.mpegurl') === "maybe"){ 
    //Actions like playing the .m3u8 content 
} 
else{ 
    //Actions like playing another video type 
}

la funzione canPlayType, restituisce:

"" quando non c'è suppo rt per il tipo di audio/video specificato

"forse" quando il browser potrebbe supportare il tipo di audio/video specificato

"probabilmente", quando molto probabilmente supporta il tipo di audio/video specificato (si può usare solo questo valore nella convalida per essere più sicuri che il vostro browser supporti del tipo specificato)

Spero che questo aiuto :)

i migliori saluti!

fonte

2016-08-11 14:19:25 MaxTomasello

<html> 
<body> 
    <video width="600" height="400" controls> 
     <source src="index.m3u8" type="application/x-mpegURL"> 
    </video> 
</body>

HLS Streaming o file M3U8 utilizzando sopra il codice. funziona su browser edge, chrome, opera mini (browser mobile) (non funziona con pc chrome)

Per riprodurre su tutti i browser utilizzare un lettore multimediale basato su flash. media player to support all browser

fonte

2017-01-03 09:53:35

Uso Flowplayer:

<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/commercial/skin/skin.css"> 
    <style> 

    </style> 
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="//releases.flowplayer.org/7.0.4/commercial/flowplayer.min.js"></script> 
    <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script> 
    <script> 
    flowplayer(function (api) { 
    api.on("load", function (e, api, video) { 
     $("#vinfo").text(api.engine.engineName + " engine playing " + video.type); 
    }); }); 
    </script> 

<div class="flowplayer fixed-controls no-toggle no-time play-button obj" 
     style=" width: 85.5%; 
    height: 80%; 
    margin-left: 7.2%; 
    margin-top: 6%; 
    z-index: 1000;" data-key="$812975748999788" data-live="true" data-share="false" data-ratio="0.5625" data-logo=""> 
     <video autoplay="true" stretch="true"> 

     <source type="application/x-mpegurl" src="http://live.wmncdn.net/safaritv2/live2.stream/index.m3u8"> 
     </video> 
    </div>

metodi differenti sono disponibili nel sito web flowplayer.org.

fonte

2017-12-14 12:58:56

Riproduzione di file m3u8 con tag video HTML

risposta

Problemi correlati