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.
4 answers
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>
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!<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
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.