reproductor - Reproducción de archivos m3u8 con etiqueta de video HTML
m3u8 html5 player (4)
Agregando a la respuesta de ben.bourdin, puede al menos en cualquier aplicación basada en HTML, verificar si el navegador admite HLS en su elemento de video:
Asumamos que su ID de elemento de video es "myVideo", luego a través de javascript puede usar la función "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
}
La función canPlayType, devuelve:
"" cuando no hay soporte para el tipo de audio / video especificado
"quizás" cuando el navegador puede admitir el tipo de audio / video especificado
"probablemente" cuando lo más probable es que admita el tipo de audio / video especificado (puede usar solo este valor en la validación para estar más seguro de que su navegador admite el tipo especificado)
Espero que esto ayude :)
¡Atentamente!
Estoy tratando de usar HTTP Live Streaming (HLS) para transmitir video a mis computadoras y mi iPhone. Después de leer la ''Visión general de transmisión en vivo HTTP'' de Apple, así como las ''Mejores prácticas para crear e implementar HTTP Live Streaming Media para iPhone y iPad'', estoy un poco atascado.
Tomé mi archivo de origen (un mkv) y usé ffmpeg para codificar el formato MPEG-TS y la configuración recomendada por Apple y un perfil de Línea 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"
No te preocupes allí. Utilicé una herramienta de segmentación precompilada para segmentar el video y crear una lista de reproducción .m3u8. El archivo resultante se veía así:
#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
Lo comparé con algunos archivos de lista de reproducción de ejemplo para usarlos con transmisión en vivo de HTTP , y no veo ningún problema. También intenté reproducir el archivo .m3u8 en VLC, y funciona como un encanto.
Creé una página HTML para reproducir el archivo:
<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>
Y esta página no funciona en Chrome, Safari, en mi iPhone. Los ejemplos de etiquetas de video html5 en w3schools funcionan bien en mi computadora, y la descripción oficial de Apple mencionada anteriormente da un ejemplo de HTML muy similar a mi página. Sin embargo, mi reproductor de video no responde cuando visito mi propia página .m3u8.
Puede que sea un poco tarde con la respuesta, pero debe proporcionar el atributo de tipo MIME en la etiqueta de video: type = "application / x-mpegURL". La etiqueta de video que uso para una transmisión de 16: 9 se ve así.
<video width="352" height="198" controls>
<source src="playlist.m3u8" type="application/x-mpegURL">
</video>
Usa 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>
Diferentes métodos están disponibles en el sitio web flowplayer.org.
<html>
<body>
<video width="600" height="400" controls>
<source src="index.m3u8" type="application/x-mpegURL">
</video>
</body>
Transmitir archivos HLS o m3u8 utilizando el código anterior. funciona con el navegador de borde, chrome, opera mini (navegador móvil) (no funciona con pc chrome)
Para jugar en todos los navegadores utiliza un reproductor multimedia basado en flash. reproductor multimedia para soportar todos los navegadores