web-dev-qa-db-fra.com

Possibilité de diffuser des vidéos à l'aide d'Amazon S3/CloudFront avec le lecteur HTML5?

Je souhaite utiliser un lecteur vidéo HTML5 et diffuser des vidéos. Est-ce possible avec S3/CloudFront? Je comprends que Amazon utilise le protocole de diffusion en continu RTMP et que la balise video de HTML5 ne prend pas en charge RTMP. Est-il possible de diffuser des vidéos avec des lecteurs HTML5?

30
at.

Une grande partie de ce que @Wayne Koorts a publié constitue la base d'une bonne réponse. La déconnexion semble être que vous pouvez "diffuser" la vidéo via le téléchargement progressif. Cela fonctionne avec n'importe quel fichier vidéo compatible html5, comme il l'a illustré. 

Pour obtenir les meilleures performances lors du téléchargement progressif de fichiers mp4, vous avez besoin que les métadonnées de l'atome moov apparaissent au début du fichier. Assurer que vos fichiers mp4 ont cette propriété est l’une des raisons pour lesquelles le programme qtfaststart est inclus avec ffmpeg.

Bien sûr, le téléchargement progressif n'est pas un "serveur de contenu multimédia en continu". Les serveurs de médias en continu ont été conçus pour prendre en charge un certain nombre de fonctionnalités, notamment:

  • Sécurité et DRM
  • Diffusion/entrelacement adaptatif (prise en charge de plusieurs débits binaires entrelacés dans un fichier spécifique)
  • À la recherche

Il semble que la préoccupation particulière exprimée ici est la fonctionnalité de recherche. Comme cela arrive, cela est supporté très bien en html5 et par s3/cloudfront.

Ce qui est déroutant, c'est que Cloudfront of Video Files a plusieurs options. Une option consiste à faire livrer les fichiers par leur réseau de serveurs Adobe FMS sous licence. C’est là que la confusion entourant l’utilisation du RTMP entre en jeu. Cependant, ce n'est qu'une option. Les fichiers peuvent être distribués vers Cloudfront sous la forme standard de "téléchargement" et ils auront la propriété de recherche en raison de la mise en œuvre de plages d'octets et de la prise en charge de ce que l'on appelle communément le pseudo streaming. 

Il semble y avoir beaucoup de confusion à propos du terme "pseudo streaming", mais dans le cas de html5, il s'agit simplement de l'exigence que le serveur HTTP prenne en charge la spécification 1.1. Lors de la recherche, le client envoie une demande de plage d'octets et le serveur est responsable de la livraison de cette partie du fichier.

En d'autres termes ... la recherche avec le lecteur html5 fonctionne avec les serveurs cloudfront, car ils sont compatibles avec HTTP 1.1.

Parmi les autres fonctions offertes par les serveurs de diffusion en continu, de nombreux serveurs concurrents ont implémenté le "streaming H264" ou des éléments de MPEG-DASH comme alternative aux serveurs compatibles RTMP et FMS. Un certain nombre de lecteurs Flash prennent en charge ces fonctions, qui vont au-delà de la simple recherche. JWPlayer et Flowplayer sont deux exemples de lecteurs prenant en charge tout ou partie des fonctionnalités. Cependant, le lecteur vidéo HTML5 ne prend en charge aucune de ces fonctionnalités. Vous pouvez en apprendre plus en regardant http://h264.code-shop.com/trac#H264StreamingModuleIntroductionversion2

Si cela ne vous suffit pas, Apple a mis en œuvre son propre protocole «HTTP Live Streaming», parfois appelé m3u8, qu’ils prennent en charge dans ios et quicktime. Je le mentionne car souvent, les utilisateurs recherchent un moyen de prendre en charge différents types de périphériques.

J'espère que cela a aidé à clarifier un peu les choses.

56
gview

J'ai récemment utilisé avec succès le lecteur vidéo Video.js HTML5 player (open source), avec des vidéos hébergées sur S3. En gros, il vous suffit de télécharger votre vidéo dans votre compartiment S3. Le code de la page ressemble à ceci (après l’inclusion des fichiers CSS et JS Video.js dans votre page):

<video id="example_video_1" class="video-js vjs-default-skin"
    controls preload="auto" width="1600" height="900"
    poster="http://mys3bucket.s3.amazonaws.com/videoImage.jpg"
    data-setup='{"example_option":true}'>
    <source src="http://mys3bucket.s3.amazonaws.com/myvideofile.mp4" type='video/mp4' />
    <source src="http://mys3bucket.s3.amazonaws.com/myvideofile.webm" type='video/webm' />
</video>

poster est simplement l'image fixe à afficher sur le lecteur vidéo pendant le chargement ou la lecture de la vidéo. En ce qui concerne les balises <source>, vous pouvez lier autant de vidéos que vous le souhaitez. Plus de formats signifie simplement une meilleure prise en charge sur différentes plates-formes (par exemple, certaines distributions Vanilla Linux peuvent ne pas lire MP4, etc.).

Consultez le guide de démarrage rapide de Video.js ici .

Lorsque vous décidez d'utiliser S3 ou CloudFront: IMHO S3 est plus approprié pour la vidéo en général, car le coût est moins cher lorsque vous stockez beaucoup de données (parce que CloudFront distribue des copies de tout à tous ses serveurs Edge, bien que vous puissiez limiter un peu via les options). Bien que certaines personnes préfèrent CloudFront en raison de la rapidité, rappelez-vous que CloudFront est principalement conçu comme un réseau de diffusion de contenu nécessitant des temps de réponse très rapides (par exemple, les graphiques de site, les feuilles de style, les fichiers JS, etc.). sur vos besoins. Si vos vidéos sont toutes très petites, vous constaterez peut-être que CloudFront est réellement adapté à vos besoins.

Pour une analyse plus précise des coûts, vous pouvez utiliser le calculateur de coûts mensuel d'Amazon.

12
Wayne Koorts

Je travaille sur des vidéos pour une production mondiale. Je dois réduire les coûts, mais je cherche à être facilement évolutif et suffisamment de fonctionnalités pour fournir un système assez complexe en toute sécurité. AWS semble génial, je les utilise depuis quelques années maintenant et je pense que les seaux S3 sont extraordinaires. Ils sont gratuits, dans une limite. Et oui. Ils réussissent certainement à fournir ce que je crois être du streaming vidéo; en ce sens qu'il est hébergé dans S3 et qu'il joue directement dans mon lecteur JW immédiatement au chargement de la page, sans instabilité ni latence. 

Je peux voir que certaines des délinéations de vidéo en continu sont vagues et restent source de confusion pour moi, bien que @gview ait fait un excellent travail en nous fournissant une incitation plus profonde. La complexité de cette question m'intéresse, mais si votre objectif est de démarrer cette vidéo, je ne crois pas que le HTML5 soit votre réponse. SOAP, REST, HTTP et même HTTPS sont pris en charge et disponibles autant que je sache. La documentation sur AWS est également remarquable, très utile. Je vais attacher un lien de départ ici. 

@ user2352370: JWplayer..Je suis indécis. Je viens d’acheter l’adhésion de niveau intermédiaire et maintenant, après avoir lu Wayne Koorts ci-dessus, je pense que JSvideo est meilleur pour diverses raisons et je travaillerai avec cela si je peux obtenir un remboursement. Je ne vois aucune valeur immédiate dans JWvideo, au-delà du style fourni pour les vidéos. Je crois que la valeur de JWvideo pour moi au moins est limitée au style de la vidéo. Je peux utiliser JSVideo pour créer une variété de solutions de remplacement pour plusieurs types d'appareils et de navigateurs. Je peux même appeler JSVideo, mais peut-être qu’il faut dire quelque chose sur la simplicité de JWvideo. Je vais probablement en avoir besoin pour l'assaut de messages vidéo que j'aurai dans les mois à venir. 

JWVideo & JSVideo fonctionneront
Je pense que JWVideo et JSvideo feront tous les deux leur travail. J'ai actuellement les deux sur mon site pour diverses vidéos et les deux font un travail décent, n’ayant pas encore testé les navigateurs en profondeur.

Do créez un compte AWS gratuit et jouez gratuitement avec les services. Son ouverture des yeux si vous avez eu affaire avec des fournisseurs comme RackSpace ou Host Gator pendant un certain temps.
Page d'accueil AWS Free Tier

Site de documentation AWS pour S3

1
Ryan H.

Je cherchais à héberger des vidéos avec VideoJS pour mon propre site. C’est pourquoi j’ai trouvé votre question, mais lorsque j’ai examiné le code exemple pour VideoJS, j’ai remarqué que le lien était chez une société appelée ZenCoder - http: // video- js.zencoder.com/oceans-clip.mp4

http://zencoder.com/en/

Je n'ai aucune association avec Zencoder, mais je pense qu'il vaut la peine d'envisager d'envisager si vous recherchez un hébergement vidéo en nuage.

0
Kevin Monk