A ler os ficheiros m3u8 com a marca de vídeo HTML

Question

A ler os ficheiros m3u8 com a marca de vídeo HTML

estou a tentar usar o HTTP Live Streaming (HLS) para transmitir vídeo para os meus computadores e para o meu iPhone. Depois de ler através da Apple 'HTTP Live Streaming Overview', bem como 'melhores práticas para a criação e implantação de HTTP Live Streaming Media para o iPhone e iPad', eu estou um pouco preso.

peguei no meu ficheiro de código (um mkv) e usei o ffmpeg para codificar o ficheiro o formato MPEG-TS e as configurações recomendadas pela Apple e um perfil de Base 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"

Não te preocupes. Eu usei um ferramenta de segmentação pré-compilada para segmentar o vídeo e construir A.playlist m3u8. O ficheiro resultante era assim:

#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

verifiquei isso com alguns ficheiros de Listas de reprodução de exemplo para usar com o HTTP Live Streaming {[[10]}, e não vejo quaisquer problemas. Também tentei tocar .arquivo M3U8 em VLC, e funciona como um encanto.

criei uma página HTML para reproduzir o ficheiro:

<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 esta página não funciona no Chrome, Safari, no meu iPhone. A etiqueta de vídeo html5 exemplos em w3schools funcionam bem no meu computador, e a visão geral oficial da Apple mencionada acima dá um exemplo HTML muito semelhante à minha página. No entanto, o meu leitor de vídeo não responde completamente quando visito o meu .m3u8 page.

27

html html5-video streaming http-live-streaming m3u8

Author: Majid, 2013-11-05

Source

4 answers

score 33 · Answer 1

Pode ser um pouco tarde com a resposta, mas você precisa fornecer o atributo do tipo MIME na tag de vídeo: type="application/x-mpegURL". A etiqueta de vídeo que eu uso para um fluxo 16:9 se parece com isso.

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

score 5 · Answer 2

A adicionar ao ben.resposta bourdin, você pode pelo menos em qualquer aplicação baseada em HTML, verificar se o navegador suporta HLS no seu elemento de vídeo:

Vamos assumir que o seu ID do elemento de vídeo é "myVideo" , então através do javascript você pode usar a função "canPlayType" (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
}

A função canPlayType devolve:

"" quando não existe suporte para o tipo de áudio/vídeo indicado

"Talvez" quando o o navegador poderá suportar o tipo de áudio/vídeo indicado

"provavelmente" quando provavelmente suporta o tipo de áudio/vídeo indicado (pode usar apenas este valor na validação para ter a certeza de que o seu navegador suporta o tipo indicado)

Espero que isto ajude. Melhores cumprimentos!

score 5 · Answer 3

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

Stream HLS ou ficheiros m3u8 usando o código acima. ele trabalha para o navegador edge,chrome, opera mini (Navegador móvel) (não trabalhando com o pc chrome)

Para jogar em todos os navegadores, use o leitor multimédia baseado em flash. leitor multimédia para suportar todo o navegador

score 3 · Answer 4

Usar O 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>

Existem diferentes métodos disponíveis em flowplayer.org website.