Jouer m3u8 Fichiers HTML Balise Vidéo

Je suis en train d'utiliser le HTTP Live Streaming (HLS) pour diffuser de la vidéo à mes ordinateurs et mon iPhone. Après la lecture par le biais de la Pomme "HTTP Live Streaming Aperçu", ainsi que "les Meilleures Pratiques pour la Création et le Déploiement de la diffusion HTTP en Direct des Médias pour l'iPhone et l'iPad", je suis un peu coincé.

J'ai pris mon fichier source (un mkv) et utilisé ffmpeg pour encoder le fichier MPEG-TS format de pommes et les paramètres recommandés et une base de Référence 3.0 profil:

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"

Pas de soucis là-bas. J'ai utilisé un pré-compilé la segmentation de l'outil pour le segment de la vidéo et de construire un .m3u8 liste de lecture. La résultante de fichier ressemble à ceci:

#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

J'ai vérifié que contre certains Exemple de Fichiers de listes de lecture pour une utilisation avec la diffusion HTTP en Direct, et je ne vois pas de problèmes. J'ai aussi essayé de jouer la .m3u8 fichier de VLC, et il fonctionne comme un charme.

J'ai créé une page HTML pour lire le fichier:

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

Et cette page ne fonctionne pas dans Chrome, Safari sur mon iPhone. La balise vidéo html5 exemples sur w3schools fonctionner sur mon ordinateur, et l'officiel d'Apple aperçu mentionné ci-dessus donne un exemple de code HTML, très proche de ma page. Néanmoins, mon lecteur vidéo est complètement insensible lorsque je visite mon propre .m3u8 page.

Pouvez-vous montrer à la sortie de la mediastreamvalidator outil?
Merci pour la réponse! Malheureusement, je n'ai pas déboursé plus de l'argent pour être un "vrai" développeur Apple, donc je n'ai pas cet outil particulier. J'ai été à la recherche d'un probable suppléant avec peu de succès. Quels conseils donneriez-vous à ce sujet serait la bienvenue!
Peut-être pourrais-tu mettre les fichiers sur un serveur web public. Vous pouvez utiliser un micro instance Amazon EC2 si vous avez besoin d'un free serveur. Alors quelqu'un ayant accès à plus d'outils pourrait prendre un coup d'oeil. En fait, cela m'interroge sur les types mime être retourné par votre serveur... Voir si cela peut vous aider: stackoverflow.com/questions/6438680/...
Avez-vous essayé de navigation directement à la m3u8 sur votre safari, et non via le html? par exemple, si votre fichier m3u8 existe sur le serveur sous monserveur/mymoviue.m3u8, puis navigation ici devrait afficher la vidéo. Si cela ne fonctionne pas, alors votre problème n'est pas dans le HTML.

InformationsquelleAutor drucifer | 2013-11-05

37

Peut-être un peu en retard à la réponse, mais vous devez fournir le type MIME de l'attribut dans la balise video: type="application/x-mpegURL". La balise vidéo j'ai utilisé pour un 16:9 ruisseau ressemble à ceci.
```
<video width="352" height="198" controls>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>
```
- Si quelqu'un a testé cette réponse, Il convient de noter qu'Il ne fonctionne pas sur Chrome. Fonctionne très bien à Bord. Cochez cette répondre pour plus d'informations sur une solution de compatibilité du navigateur.
- HLS ne ruisseau dans une page sur Chrome dans juste une vidéo tag, comme il n'est pas le navigateur natif pour HLS.
InformationsquelleAutor ben.bourdin

Vous pouvez utiliser vidéo js bibliothèque pour jouer facilement HLS vidéo.
Il permet de lire des vidéos directement

<!-- CSS  -->
 <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">


<!-- HTML -->
<video id='hls-example'  class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://www.streambox.fr/playlists/test_001/stream.m3u8">
</video>


<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

<script>
var player = videojs('hls-example');
player.play();
</script>

GitHub Vidéo Js

InformationsquelleAutor Rakyesh Kadadas

6
```
<html>
<body>
    <video width="600" height="400" controls>
        <source src="index.m3u8" type="application/x-mpegURL">
    </video>
</body> 
```
Flux HLS ou m3u8 fichiers à l'aide de code ci-dessus.
il travaille pour le bureau: ms bord navigateur (pas de travail de bureau avec chrome)
et
mobile: chrome,opera mini navigateur.

Pour jouer sur tous les navigateur utiliser flash media player.
media player pour soutenir tous les navigateurs
- si vous voulez jouer en direct .m3u8 HLS (fichier), puis ajouter chrome extension appelée Native HLS de Lecture à partir de l'application web google chrome.
- Cette solution ne fonctionne pas. Je l'ai essayé sur Firefox et Chrome. Même l'installation de Native HLS de Lecture ne pas faire l'affaire.
InformationsquelleAutor Rakyesh Kadadas
5

L'ajout de ben.bourdin réponse, vous pouvez au moins dans tout code HTML en fonction de l'application, vérifier si le navigateur prend en charge le protocole HLS dans son élément vidéo:

Permet de supposer que votre vidéo ID de l'élément est "myVideo", puis à l'aide de javascript, vous pouvez utiliser le bouton "canPlayType" fonction (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 canPlayType fonction retourne:

"" quand il n'y a pas de support pour l'audio/vidéo de type

"peut-être" quand le navigateur pourrait soutenir le spécifiée audio/vidéo de type

"probablement" lorsqu'il est probable qu'il prend en charge l'audio spécifié/type de vidéo (vous pouvez utiliser cette valeur dans la validation pour être plus sûr que votre navigateur prend en charge le type spécifié)

Espère que cela aide 🙂

En ce qui concerne meilleur!

InformationsquelleAutor MaxTomasello

Utilisation 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>

Différentes méthodes sont disponibles dans flowplayer.org site web.

qu'est-ce que api ici?
Rien n'est affiché ci-dessus. Pourquoi? Commentant <script> flowplayer(function(api) {... affiche media player sceen dans le navigateur. Pourquoi? Quelque chose s'est mal passé dans les balise de script? Quelqu'un peut-il m'aider?

InformationsquelleAutor Jithu Wilson C

Vous devez vous connecter pour publier un commentaire.