web-dev-qa-db-fra.com

Jouer avec video.js ustream flux de fichiers m3u8

J'ai essayé de lire dans une page Web un fichier m3u8 en 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>
javascripthtml5streamingvideo.jsm3u8
7
grigione

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

Vérifiez également si les requêtes inter-domaines sont autorisées (CORS).

Considérations sur l'hébergement

Contrairement à une implémentation HLS native, la technologie HLS doit se conformer à les politiques de sécurité du navigateur. Cela signifie que tous les fichiers qui Le flux doit être servi à partir du même domaine que la page hébergeant le lecteur vidéo ou à partir d'un serveur doté de CORS approprié. en-têtes configurés. Des instructions faciles sont disponibles pour populaire Les serveurs Web et la plupart des CDN ne devraient avoir aucune difficulté à activer CORS pour Ton compte.

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

CORS How-To: http://enable-cors.org/server.html

9
aergistal
<!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-->
3
Ajay nandoriya

J'ai trouvé deux des bibliothèques hls les plus puissantes pour la vidéo js

1.videojs-http-streaming

Cette bibliothèque a été générée à partir de videojs-contrib-hls D'après la description suivante

Avis: ce projet sera obsolète et succédera à videojs-http-streaming. VHS prend en charge HLS et DASH et est intégré à video.js 7, voir le blog video.js 7

La description courte de la bibliothèque videojs-http-streaming est la suivante

Lisez les protocoles de streaming HTTP HLS, DASH et futurs avec video.js, même s'ils ne sont pas pris en charge de manière native . Inclus dans video.js 7 par défaut !.

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

2.videojs-hlsjs-plugin

La description courte de cette bibliothèque est la suivante

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

La force de la bibliothèque à l'utiliser depuis la bibliothèque hls.js

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

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

conclusion

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

1
MostafaMashayekhi