Warning: Declaration of action_plugin_popularity::register(&$controller) should be compatible with DokuWiki_Action_Plugin::register($controller) in /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/popularity/action.php on line 11

Warning: Declaration of action_plugin_safefnrecode::register(Doku_Event_Handler &$controller) should be compatible with DokuWiki_Action_Plugin::register($controller) in /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/safefnrecode/action.php on line 66

Warning: Cannot modify header information - headers already sent by (output started at /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/popularity/action.php:11) in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 377

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656

Warning: Cannot modify header information - headers already sent by (output started at /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/popularity/action.php:11) in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/actions.php on line 187
cifacom:webtv:start [Applh.com Formation]

Outils d'utilisateurs

Outils du Site


cifacom:webtv:start

<html> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"> </script> <script type="text/javascript"> /* <[!CDATA[ */ AppLH={}; AppLH.nbh1=0; AppLH.html_show='<a class="show_start" href="#"><img src="http://formation.applh.com/_media/arrow_curved_blue.png?w=50" /><span>START SLIDESHOW!</span></a>'; AppLH.html_banner2='<div class="show_banner2" style="position:fixed;bottom:0;left:0;width:100%;height:0%;opacity:0.8;background-color:#123456;"><img id="arrow" class="dragok" src="http://formation.applh.com/_media/arrow_curved_blue.png?w=50" style="resize:both;" draggable="true"/><span class="dragok" style="font-size:2em;">1</span><span class="dragok" style="font-size:2em;">2</span><span class="dragok" style="font-size:2em;">3</span></div>'; AppLH.jinit=function(){ jQuery(".page h1") .each(AppLH.count_h1) ; AppLH.nbh1=0; jQuery(".toc li.level1 a.toc") .each(AppLH.count_h1) ; jQuery(".page").prepend(AppLH.html_show); jQuery(".show_start").click(AppLH.show_start); }; AppLH.show_start=function(){ jQuery(".show_start, .footerinc, .stylehead, .toc, .stylefoot, .license, .secedit").hide(); jQuery("body").animate({"font-size": "150%"}); jQuery(".page h1") .animate({"margin-top": '+240'}) ; jQuery(".page").append(AppLH.html_banner2); jQuery(".show_banner2").animate({height: '10%'}); jQuery(".dragok").draggable(); }; AppLH.count_h1=function(){ AppLH.nbh1++; var html1=jQuery(this).html(); html1=AppLH.nbh1+'. '+html1; jQuery(this).html(html1); }; if (jQuery) { jQuery(AppLH.jinit); } /* ]]> */ </script> </html> ====== Video Interactive ====== * Il est possible de faire interagir les elements d'une page web * ...avec des videos de YouTube ou Vimeo * http://presentz.org * http://presentz.org/demo/03_vimeo-img <html> <script src="http://presentz.org/managedassets/js/embed.js" type="text/javascript" data-presentation-url="http://presentz.org/demo/03_vimeo-img" data-presentation-title="Vimeo player, images as slides"></script> </html> ====== WebTV ====== * Module Web TV * Interview de Hervé Nougier par JM Billaut... en mai 2007! * http://billaut.typepad.com/jm/2007/05/connaissezvous__5.html <html> <embed width="640" height="480" flashvars="mediaID=195774&amp;APIKey=~Udxpx5UO9Ko&amp;configURL=http://vpod.st.v3.vpod.tv/products/flash/as2/player/config/vpod~R-h1H5V5CFg.xml&amp;thumbURL=http://vpod.stream.v3.vpod.tv/vpod/kmgmt=%7EUdxpx5UO9Ko/ck=%7EUdxpx5UO9Ko/uid=4be407e08e8637.47297466//132556/thumb/0F378E68-FF8B-11DB-9EDE-9035BCFF3D01-640x480.jpg&amp;clientKey=~Udxpx5UO9Ko" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="so5660637742730150826" id="so5660637742730150826" style="undefined" src="http://vpod.api.v3.vpod.tv:80/api/tools/product/flash/pk=~R-h1H5V5CFg/kmgmt=~Udxpx5UO9Ko/ck=~Udxpx5UO9Ko/mediaID=195774" type="application/x-shockwave-flash"> </html> * 7 ans de YouTube <html> <iframe width="640" height="360" src="http://www.youtube.com/embed/GLQDPH0ulCg" frameborder="0" allowfullscreen></iframe> </html> ====== Site du Projet ====== * http://tv12.cifa3.com/ ====== Quelques Chiffres ====== * Les débits des abonnements ADSL+ permettent de regarder des videos en streaming {{http://www.ariase.com/fr/news/media/repartition-lignes-telephoniques-par-affaiblissement.png?w=400}} * http://www.youtube.com/t/press_statistics * +1h de video publiée chaque minute * 10% des videos sont en HD * +4 Milliards de videos regardées chaque jour * +600 millions de vues sur mobile chaque jour * +50% des videos sont notées * Création perso/pro: * http://YouTube.com * http://Vimeo.com * http://Dailymotion.com * http://blip.tv * VOD * => Catalogue de videos * WebTV * => VOD * => Playlist * => Live ====== Formats pour le web ====== * Historiquement, Flash a permis aux videos de s'intégrer aux pages web * => Le format FLV (VP6) reste très répandu * Avec l'arrivée des videos en HD 720p et 1080p * => Le format MP4 offre une meilleure qualité de compression (H.264) * Les navigateurs acceptent seulement une partie des conteneurs videos * http://www.longtailvideo.com/html5/formats/ * MP4 (H264) => sous licence payante * WEBM (VP8) => standard ouvert * FLV => conteneur Flash * MOV => conteneur Quicktime * ... ====== Streaming ====== {{http://streaming.infomaniak.com/images/french/streaming/vod/img-vod-comment-ca-marche-schema.png?w=400}} * RTMP: Real Time Messaging Protocol * Adobe => Flash Media Server * Attention * RTSP: Real Time Streaming Protocol * => Standard (non propriétaire) pour le streaming * HTTP * => téléchargement progressif (du début à la fin du fichier video) * http://www.longtailvideo.com/html5/ * HTTP+HTML5 * => pseudo streaming (à partir d'un point dans le fichier video) * HTTP+HTML5+M3U8 * => HTTP Live streaming (par Apple pour safari sur MacOS et iOS) * => Adaptive Bit Rate ====== Encoding YouTube ====== * Service Gratuit d'hébergement et de diffusion * => mais insertion d'annonces par Google * => UGC: User Generated Content * Tailles disponibles sur YouTube: * 1080p: 1920x1080 * 720p: 1280x720 * 480p: 854x480 * 360p: 640x360 * 240p: 426x240 <code> Suggested bitrates for uploads Standard quality uploads Type Video Bitrate Mono Audio Bitrate Stereo Audio Bitrate 5.1 Audio Bitrate 1080p 8,000 kbps 128 kbps 384 kbps 512 kbps 720p 5,000 kbps 128 kbps 384 kbps 512 kbps 480p 2,500 kbps 64 kbps 128 kbps 196 kbps 360p 1,000 kbps 64 kbps 128 kbps 196 kbps High quality uploads for creators with enterprise quality internet connections: Type Video Bitrate Mono Audio Bitrate Stereo Audio Bitrate 5.1 Audio Bitrate 1080p 50,000 kbps 128 kbps 384 kbps 512 kbps 720p 30,000 kbps 128 kbps 384 kbps 512 kbps 480p 15,000 kbps 128 kbps 384 kbps 512 kbps 360p 5,000 kbps 128 kbps 384 kbps 512 kbps </code> * YouTube: Avec le lecteur Flash, afficher les informations sur la vidéo: * par ex HOME: http://www.youtube.com/watch?v=NNGDj9IeAuI * 400x226 * => ~250 kbps * 640x360 * => ~500 kbps * 840x480 * => ~1000 kbps * YouTube encoding: * http://support.google.com/youtube/bin/static.py?hl=en&page=guide.cs&guide=1728585&topic=1728569 * options avancées: * http://support.google.com/youtube/bin/static.py?hl=en&guide=1728585&topic=1728573&page=guide.cs * live streaming (RTMP Flash Streaming): * http://support.google.com/youtube/bin/static.py?hl=en&topic=1731151&guide=1728585&page=guide.cs ====== Encoding: Vimeo ====== * Service Gratuit d'hébergement et de diffusion * => mais insertion d'annonces par Vimeo * => UGC: User Generated Content * => Pas de contenu "commercial" * Offre Vimeo PRO * => 200$/an pour une utilisation commerciale * http://vimeo.com/help/compression * H.264 (MP4) * Frames Per Second (FPS): 24, 25 ou 30 Max * Data Rate: SD => 2000 kbps ou HD => 5000 kbps * Format: * => SD => 640x480 ou 640x360 * => HD => 1280x720 ou 1920x1080 * Audio: AAC * Data Rate: 320 kbps max * Sample Rate: 44.1 kHz max ====== Hébergement ====== * Hébergement mutualisé :-( * => 50-100 euros/an, mais pas de streaming * Serveur Dédié :-/ * => 50-100 euros/mois, mais débit réseau 100 Mb/s ou 1Gb/s ====== Stockage ====== * Les disques durs proposent actuellement un espace de l'ordre de 1 To * => 1.000 Go * Combien de videos ? * => dépend de la durée des vidéos (1 min, 5 min, 10 min, 60 min, ...) * => dépend du nombre de formats disponibles (FLV, MP4, WebM, etc...) * => dépend du nombre de qualités disponibles (SD, HD, Full HD) ====== CPU et RAM ====== * la diffusion consiste simplement à lire des données et à les copier sur le réseau * => Peu de CPU :-) * => RAM raisonnable :-) ====== Réseaux et Débits ====== * Le point difficile ! * Hébergement actuel: * 100 Mbits ou 1 Gigabit pour la plupart * Limites d'interconnexion entre réseaux physiques * Il faut faire appel à des services spécialisées * => 100 Gigabits/s * CDN: Content Delivery Network * Amazon, Akamai, BitGravity, etc... ====== Services Pros VOD et Live ====== * http://vimeo.com/pro * => 200 $/an * 50 Go * 250.000 plays * http://www.dmcloud.net/fr/ * => 0.10 euro/heure visualisée * http://streaming.infomaniak.com/video/index.php * => bonne documentation et outil de simulation de trafic * http://streaming.infomaniak.com/stockage-video-en-ligne * => 50 euros/mois * => 25 Go * => 2To de trafic * http://www.longtailvideo.com/bits-on-the-run/pricing/view-rates/ * 1Go => 3.50 euros * 1h de play => 0.35 euro {{http://streaming.infomaniak.com/images/french/streaming/img-streaming-video-comment-ca-marche-schema_s1.png?w=400}} ====== Logiciels Spécialisés ====== * Est-il possible de construire son propre service de broadcast ? * => Budgets pour Matériel, Serveurs et Licences pour Logiciels :-/ * Livestream => http://new.livestream.com/broadcast-live/livestream-broadcaster * Wirecast => http://www.telestream.net/wire-cast/overview.htm * Wowza => http://www.wowza.com/media-server * Flash Media Encoder Live => http://www.adobe.com/products/flash-media-encoder.html * etc => http://en.wikipedia.org/wiki/Comparison_of_video_services ====== Technologies Open-Source ====== * RED5 Media Server * http://www.red5.org/ * VideoLAN * VLC Media Player * Nginx * MP4 and FLV server * Apache * FLV streaming * PHP * Xmoov ====== Ustream ====== * LIVE: Diffusion par Channel * http://www.ustream.tv/ * Gratuit avec publicité * PRO: à partir de 100 $/mois * https://www.ustream.tv/ustream-pro <html> <iframe src="http://www.ustream.tv/embed/10915222" width="608" height="368" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe><br /><a href="http://www.ustream.tv/" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Broadcasting live with Ustream</a> </html> <code html> <iframe src="http://www.ustream.tv/embed/10915222" width="608" height="368" scrolling="no" frameborder="0" style="border: 0px none transparent;"> </iframe> <br /> <a href="http://www.ustream.tv/" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Broadcasting live with Ustream</a> </code> ====== YouTube Live ====== * En Avril 2011, YouTube a ajouté un service de streaming live * http://www.youtube.com/live * Actuellement le service est activable sur invitation * http://support.google.com/youtube/bin/static.py?hl=en&page=guide.cs&guide=2474025 * http://youtubecreator.blogspot.fr/2012/04/celebrating-youtube-lives-first.html <html> <iframe width="560" height="315" src="http://www.youtube.com/embed/UPASl3huIIA" frameborder="0" allowfullscreen></iframe> </html> * conseils pratiques: * http://support.google.com/youtube/bin/static.py?hl=en&topic=2474327&guide=2474025&page=guide.cs&answer=2524538 <html> <iframe width="560" height="315" src="http://www.youtube.com/embed/ie4E-5tMY5k" frameborder="0" allowfullscreen></iframe> </html> ====== JW Player: Plugin pour WordPress ====== * http://wordpress.org/extend/plugins/jw-player-plugin-for-wordpress/


Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656
cifacom/webtv/start.txt · Dernière modification: 2012/11/29 21:19 par webmaster