Jouer avec video.js ustream m3u8 diffusion en continu de fichiers

J'ai essayé de jouer dans une page web, un fichier m3u8 streaming avec video.js Mais je ne pouvais pas le faire, je ne sais pas où l'erreur est

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>

  <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.12/video.js"></script>
 <script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
  <script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>

</head>
<body>
  <h1>Video</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='video/mp4'>
  </video>

  <script>
  </script>

</body>
</html>

OriginalL'auteur grigione | 2015-03-30

  1. 9

    Au lieu de type='video/mp4' vous avez besoin type='application/x-mpegURL'.

    Vérifier également si les demandes inter-domaine sont autorisés (SCRO).

    Hébergement Considérations

    Contrairement à un natif HLS mise en œuvre, le HLS tech a pour se conformer à la
    le navigateur de politiques de sécurité. Cela signifie que tous les fichiers
    composent le flux de données doit être servis à partir du même domaine que la page
    hébergement le lecteur vidéo ou à partir d'un serveur qui dispose de la SCRO
    les en-têtes configuré. Les instructions faciles sont disponibles pour populaires
    serveurs web et la plupart des réseaux de diffusion de contenu devrait avoir aucune difficulté à tourner la SCRO sur pour
    votre compte.

    Source: https://github.com/videojs/videojs-contrib-hls

    De la SCRO Comment: http://enable-cors.org/server.html

    J'ai placé aussi type= " application/x-mpegURL mais ne fonctionnent pas. Comment vérifier si de la croix de domaine est-elle autorisée? je pense que la croix de domaine est uniquement pour flash player ....aussi pour html joueur?
    video.js propose un Flash de secours (vidéo-js.swf) de sorte que vous pourriez avoir besoin d'ajouter un crossdomain.xml sur le serveur. Avez-vous des erreurs dans la console?
    Je vais essayer sur jsfiddle, j'ai ajouté quelques bibliothèques que j'ai founfd dans cet exemple:github.com/videojs/videojs-contrib-hls/blob/master/example.html c'est mon démo: jsfiddle.net/066hfjge/5
    J'ai essayé votre code d'origine avec mon propre flux et cela a fonctionné. À l'aide de la ustream.tv source les résultats dans un C erreur (Access-Control-Allow-Origin). Je vais mettre à jour la réponse avec des instructions.
    ah ok, mais je ne peux pas accès à ustream serveur dans lequel je dois insérer <FilesMatch "\.(rss)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> est donc impossible .... grâce à ustream

    OriginalL'auteur aergistal

  2. 3
    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>

  <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.12/video.js"></script>
 <script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
  <script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>

</head>
<body>
  <h1>Video</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='application/x-mpegURL'>
  </video>

  <script>
  var player = videojs('my_video_1');
  </script>

</body>
</html>

<!-- Replace current .m3u8 and check..current file has access issue-->
    Pourriez-vous préciser votre réponse en ajoutant un peu plus de description sur la solution que vous fournissez?
    Videojs joueur a besoin d'être initialisé... donc j'ai ajouté la dernière segemnt de script dans la balise body
    nandoriya: Merci bro, il a aidé beaucoup
    Merci copain. C'était vraiment utile 🙂 Pouvez-vous l'obligeance de nous dire, quel est le problème? stackoverflow.com/questions/45924975/...

    OriginalL'auteur Ajay nandoriya

  3. 1

    J'ai trouvé deux des plus puissants hls bibliothèque pour la vidéo js

    1.videojs-http-streaming

    Cette bibliothèque a été généré à partir de videojs-contrib-hls Basée sur la description suivante

    Avis: ce projet sera obsolète et est remplacé par videojs-http-streaming. VHS prend en charge le protocole HLS et le tableau de bord et est intégré dans video.js 7, voir la video.js 7 blog

    La courte description de videojs-http-streaming bibliothèque est comme suit

    Jouer HLS, le tableau de bord, et l'avenir HTTP protocoles de diffusion en continu avec video.js même lorsqu'ils ne sont pas pris en charge nativement.
    Inclus dans video.js 7 par défaut!.

    Github lien: https://github.com/yanwsh/videojs-panorama

    2.videojs-hlsjs-plugin

    La courte description de cette bibliothèque est comme suit

    Ajoute HLS en charge de la lecture à video.js 5.0+ à l'aide de hls.js de la bibliothèque.

    De la bibliothèque de la force à l'aide de la hls.js bibliothèque

    videojs-hlsjs-plugin github lien : https://github.com/streamroot/videojs-hlsjs-plugin

    hls.js github lien : https://github.com/video-dev/hls.js/

    conclusion

    J'ai utilisé des projets à partir de ces deux bibliothèques et mon expérience dans l'utilisation, est que videojs-hlsjs-plugin bibliothèque est due à l'aide d'un puissant hls.js bibliothèque peut être une excellente option pour les grands projets.

    OriginalL'auteur MostafaMashayekhi