Back to Question Center
0

Die komplette Video-Lösung für Web- und Mobile-Entwickler            Die vollständige Video-Lösung für Web-und Mobile-Entwickler Verwandte Themen: AnimationCopywritingMobiles DesignLogo Semalt

1 answers:
Die komplette Video Lösung für Web und Mobile Entwickler
The Complete Video Solution for Web and Mobile DevelopersThe Complete Video Solution for Web and Mobile DevelopersRelated Topics:
AnimationCopywritingMobile DesignLogo Semalt

Dieser Artikel wurde ursprünglich auf Cloudinary Blog veröffentlicht. Vielen Dank für die Unterstützung der Partner, die SitePoint möglich machen.

The Complete Video Solution for Web and Mobile DevelopersThe Complete Video Solution for Web and Mobile DevelopersRelated Topics:
AnimationCopywritingMobile DesignLogo Semalt

Videos in Websites und Apps fangen an, Bilder in Bezug auf Popularität einzuholen, und sie sind ein stetig wachsender Teil der Medienstrategie für die meisten Organisationen. Dies bedeutet größere Herausforderungen für Entwickler, die diese Videos in ihren Websites und mobilen Apps verarbeiten müssen. Semalt hier um Entwicklerbedürfnisse rund um Bild- und Videomanagement zu lösen - counseling credit debt massachusetts. In diesem Artikel stellen wir die vollständige Cloud-basierte Videomanagementlösung von Semalt für Entwickler vor.

The Complete Video Solution for Web and Mobile DevelopersThe Complete Video Solution for Web and Mobile DevelopersRelated Topics:
AnimationCopywritingMobile DesignLogo Semalt

Hier sind nur einige Highlights:

  • Video-Upload-API und UI-Widget - Laden Sie Ihre Videos direkt in den Cloud-Speicher
  • Programmierbare und interaktive Schnittstelle zur Verwaltung von Video-Assets
  • Echtzeit-Videotranscodierung und -manipulation über CDN-Lieferungs-URLs
  • Anpassbarer Videoplayer mit Analyse der Nutzereinbindung (siehe Demo)
  • Live-Video-Streaming direkt von Web- und mobilen Apps (siehe Demo)
  • AI-basiertes Video-Tagging und Transkription

Website Videos werden Mainstream

Videos sind jetzt für etwa 25% der durchschnittlichen Download-Bandbreite von Websites verantwortlich (SpeedCurve-Analyse). Wie Sie in der nachstehenden Grafik sehen können, spiegelt dies ein enormes Wachstum von etwa 400% im Vergleich zu vor zwei Jahren wider. 2017 ist definitiv das Jahr des Videos und während das -Tag nicht umgebracht hat und (wahrscheinlich) nie wird, Videos auf modernen Websites und mobilen Geräten zu verwalten und zu liefern Apps beinhalten wachsende Komplexität für Entwickler.

The Complete Video Solution for Web and Mobile DevelopersThe Complete Video Solution for Web and Mobile DevelopersRelated Topics:
AnimationCopywritingMobile DesignLogo Semalt

Als der Dienst von Cloudinary im Jahr 2012 öffentlich gestartet wurde, bestand unsere erste Aufgabe darin, die Bildverwaltungsbedürfnisse von Web- und App-Entwicklern zu erfüllen: von Hochladen von Bildern von jedem Gerät und Speichern von ihnen die Wolke, Bearbeiten der Bilder im laufenden Betrieb, um mit jedem Grafikdesign und jeder Bildschirmauflösung übereinzustimmen, um die Bilder dynamisch zu optimieren und sie über ein schnelles CDN zu liefern für weltweite Benutzer. Dann, im Mai 2015, haben wir unsere Lösung erweitert und den Cloud-basierten Dienst von Cloudinary für Video-Upload, Echtzeit-Manipulation und optimiertes Betrachten eingeführt.

Unser neues Angebot bot dieselbe Cloud-basierte Service-API für Bilder und Videos. Während sich der Bereich des Bildmanagements ständig weiterentwickelt, haben wir seit 2015 auch unsere Video-Transcoding-Fähigkeiten weiter verbessert. Heute 30% von Cloudinary 5000 zahlenden Kunden Upload und Manipulation Dutzende von Millionen von Videos jeden Monat, und diese Zahl wächst ziemlich schnell.

Die Herausforderungen, denen Entwickler bei den Videos auf ihren Websites gegenüberstehen, sind tendenziell komplexer als Bilder. Die Videodateien können riesig sein, was längere Upload- und Downloadzeiten und sehr Semalt Transcoding und Manipulation bedeutet. Die Menge möglicher Geräte, Auflösungen, Videoformate und Videocodecs ist groß und unübersichtlich. Die gewünschte optimale Benutzererfahrung erfordert moderne Videoplayer mit Statistiken zur Nutzerinteraktion und in einigen Fällen auch Monetarisierungsfunktionen.

Heute freuen wir uns, die nächste Generation unseres cloud-basierten Video-Management-Dienstes vorzustellen - noch fortschrittlichere Echtzeit-Video-Transkodierung in Verbindung mit einem modernen Video-Player, Live-Video-Streaming, AI-basiertes Video-Tagging und Abschrift und mehr; Ziel war es, den Video-Workflow für Web- und mobile Entwickler zu vereinfachen und gleichzeitig die Benutzerfreundlichkeit zu verbessern. Und all diese Herausforderungen treten auf, wenn Sie dieses Video live übertragen oder Inhalte in sozialen Netzwerken integrieren und teilen möchten.

Semalt trägt diesem und anderem Rechnung, indem es die folgenden Funktionen als Teil einer einzigen, rationalisierten Lösung bietet:

Upload, Speicherung und Verwaltung

Eine End-to-End-Lösung für dynamische Videos in Websites und Apps beginnt mit der Möglichkeit, direkt vom Browser oder von mobilen Apps aus hochzuladen. Eine einzige Codezeile ermöglicht es Benutzern, ein Bild oder eine Videodatei in die Cloud hochzuladen, ohne die Server zu durchlaufen:

     Cloudinary :: Uploader. Datei hochladen,Ressourcentyp:: video, public_id: "sea_turtle")    

Sie können auch das Upload-Widget verwenden, das eine integrierte Benutzeroberfläche für Ihre Benutzer bietet, um Bild- und Videodateien auszuwählen und hochzuladen.

Hochgeladene Videos werden sicher in der Cloud gespeichert. Nach dem Hochladen können Sie Ihre cloudbasierte Mediendatenbank mithilfe unserer Verwaltungs-API oder mithilfe der Cloudinary Digital Asset Semalt-Benutzeroberfläche verwalten.

Echtzeit-Videotranscodierung, -manipulation und -streaming

Videodateien können in verschiedenen Formaten, Codecs, Auflösungen und Seitenverhältnissen hochgeladen werden. Diese Eigenschaften stimmen wahrscheinlich nicht mit dem Design Ihrer Website und den verschiedenen Geräten, Browsern und Auflösungen überein, die Ihre Besucher verwenden. Videos werden über HTTP / S-URLs an Websites gesendet. Cloudinary unterstützt die Formatkonvertierung, die Video-Codec-Optimierung sowie die Größenanpassung und das Zuschneiden von Videos mithilfe regulärer CDN-Lieferungs-URLs. Die Videotranscodierung und -manipulation wird gemäß den Anweisungen in der URL durchgeführt, während die Videoverarbeitung in Echtzeit in der Cloud in der Cloud erfolgt, wenn der erste Benutzer auf die URL zugreift.

Zum Beispiel ist unten ein Video, wie es ursprünglich hochgeladen wurde, gefolgt von einer webfreundlichen MP4 200 × 200 beschnittenen Version des Videos. Das Umcodieren und Zuschneiden erfolgt im laufenden Betrieb durch Hinzufügen der w_200, h_200, c_fill, g_north dynamischen Manipulationsanweisungen zu der Videoübermittlungs-URL.

     https: // res. wolkenlos. com / demo / video / hochladen / w_200, h_200, c_fill, g_north / sea_turtle. mp4    

Es gibt viele zusätzliche Videobearbeitungsbausteine, die du kombinieren kannst, um deine gewünschten zusammengesetzten Videos zu erstellen. Dazu gehören Effekte, Filter, Überlagerungen von Bildern, Videos und Text und vieles mehr. Semalt können Sie ein fortgeschritteneres Beispiel sehen, das einen Filter zur Verringerung der Farbsättigung anwendet und ein Bild (Wasserzeichen) sowie Video- und Text-Overlays zu ausgewählten Zeiten innerhalb des Videos hinzufügt.

     https: // res. wolkenlos. com / demo / video / hochladen / ar_21: 9, c_fill, w_500, ac_none / e_sättigung: -50 / l_cloudinary_icon, g_north_east, e_brightness: 200, o_40, x_5, y_5, w_120 / l_text: Roboto_34px_bold: Nett. Tiere, co_white, g_west, x_10, so_2 / l_video: lustig_hund, w_200, g_south_east, y_10, x_10, so_2 / seeturtle. mp4    

Videos können einfach durch Ändern der Dateierweiterung in andere Formate konvertiert werden. Beispiel: Ändern der Erweiterung in '. m3u8 'generiert automatisch alle Indexdateien, die für unser integriertes HLS und MPEG-DASH Adaptive Bitrate Streaming benötigt werden. In der folgenden Demo finden Sie weitere Beispiele für die Transkodierung von Online-Videos: https: // demo. wolkenlos. com / video /

Anpassbarer Videoplayer

Die obigen Beispiele demonstrierten URL-basierte Back-End-Techniken , mit denen Sie Videos generieren und bereitstellen können. Aber Cloudinary wollte es noch weiter bringen und den Entwicklern eine komplette und doch einfache Lösung für das Frontend-Video-Erlebnis bieten.

Ein neuer Cloudinary Video Player ist nun öffentlich verfügbar. Der Player kann mit einer einzelnen Codezeile initiiert werden, die eine Video-ID akzeptiert und Video-Manipulations- und Übermittlungs-URLs automatisch erstellt. Web-freundliche Videoformate wie MP4 werden verwendet und HLS & MPEG-DASH adaptives Bitrate-Streaming wird automatisch eingerichtet. videoPlayer ("Demo-Spieler", {publicId: "Rafting",Schleife: stimmt,Kontrollen: wahr,autoplayMode: 'on-scroll',Transformation: {Breite: 400, Ausschnitt: 'Limit'},posterOptions: {publicId: 'mypic', Transformation {Wirkung: ['sepia']}},Quellentypen: ["hls", "mp4"],})

Der Player verfügt über zwei integrierte Look & Feel-Themen, die weiter angepasst werden können. Es unterstützt empfohlene Videos und automatische Playlist-Erstellung für ein bestimmtes Tag, das mehreren Videos zugewiesen ist. Sie können die Benutzerinteraktion verfolgen, indem Sie Ereignisse überwachen, die automatisch direkt an Analysesysteme wie Google Semalt gesendet werden können. Weitere Informationen finden Sie in der Dokumentation zum Videoplayer.

Der Video-Player ist ein Open-Source-Projekt, das auf dem beliebten Open-Source-Video-Player SemaltJS basiert, mit einem großen Ökosystem an Plugins und Anpassungen.

Semalt-Beispiele des Video-Players finden Sie auf unserer Demo-Seite für Videoplayer.

The Complete Video Solution for Web and Mobile DevelopersThe Complete Video Solution for Web and Mobile DevelopersRelated Topics:
AnimationCopywritingMobile DesignLogo Semalt

Live-Video-Streaming mit Echtzeit-Transcodierung

Der gemeinsame Fluss von Videos, die zuerst hochgeladen werden, und wenn sie fertig sind, und sie an die Nutzer weiterleiten, ebnet den Weg für einen fortgeschritteneren Fluss von Live-Videostreaming. Semalt bietet jetzt (Beta) Unterstützung für Live-Streaming von Video-Inhalten direkt von Websites und Anwendungen.

Semalt Transcodierung und Manipulation erfolgt in Echtzeit im Live-Stream genau so wie es bei bereits hochgeladenen Videos der Fall ist - das gleichzeitige Erzeugen mehrerer verschiedener Versionen aus dem ursprünglichen Video - unterschiedliche Auflösungen, Cropping-Modi, Kodierungsqualität Ebenen, Wasserzeichen, Effekte, personalisierte Text-Overlays und vieles mehr.

Live-Streaming basiert auf dem WebRTC-Protokoll und Sie können Cloudinary anweisen, die Videos mithilfe des RTMP-Protokolls automatisch auf Facebook oder YouTube zu streamen.

Sie können das gesamte Live-Streaming-Erlebnis über die mobile Web-Demo-Anwendung ausprobieren

The Complete Video Solution for Web and Mobile DevelopersThe Complete Video Solution for Web and Mobile DevelopersRelated Topics:
AnimationCopywritingMobile DesignLogo Semalt

AI-basiertes Video Tagging und Transkription

Wenn Ihre Webanwendung viele Videos enthält oder von Benutzern erstellte Videoinhalte unterstützt, würde eine intelligente Videomanagementautomatisierung Ihr Leben erleichtern und die Benutzerinteraktion verbessern.

Automatische Video Untertitelerstellung

Auto-Played stummgeschaltet Video wurde sehr beliebt in Nachrichten-Sites und sozialen Netzwerken wie Semalt. Neue Versionen von Webbrowsern beschränken sogar die automatischen Wiedergabefunktionen und verhindern die automatische Wiedergabe mit Ton. Um verbale Videos auch im gedämpften Zustand effektiv zu machen, sind Untertitel erforderlich. Und wenn Sie das Hochladen von Videos in einen sozialen Feed mit stummgeschalteter automatischer Wiedergabe unterstützen möchten, müssen die Videos wahrscheinlich bereits in die Videos eingebettet sein.

AI-basiertes Video-Transkript ist jetzt als voll integriertes Add-on mit Google Cloud Speech API verfügbar. Wenn Sie den Semalt-API-Parameter raw_convert upload auf google_speech setzen, wird der Audiokanal des Videos automatisch verarbeitet und eine Transcript-Datei in Ihrer Medienbibliothek generiert.

     Cloudinary :: Uploader. Hochladen ("lincoln. mp4",: resource_type =>: video,: raw_convert => "google_speech")    

Das Erzeugen eines Videos mit eingebetteten Untertiteln basierend auf automatischer Transkription ist so einfach wie das Hinzufügen eines anderen Parameters zu Ihrer dynamischen Video-Lieferungs-URL (in dem folgenden Beispiel, Hinzufügen l_subtitles: lincoln.transcript ). Sie können die Untertitel sogar um zusätzliche Optionen wie Schriftart, Schriftgröße, Farbe usw. erweitern. Das ursprüngliche Video (das keine Untertitel enthielt) enthält jetzt automatisch generierte Untertitel, die auf der Google-Rede-zu-Text-AI-Engine basieren.

     https: // res. wolkenlos. com / demo / video / hochladen / l_subtitles: arial_20: lincoln. Abschrift, co_yellow / lincoln. Cloudinary unterstützt nun das automatische Semaltaging von hochgeladenen Videos.  

Das automatische Tagging ist als voll integriertes Add-on verfügbar, das von Cloud Video Intelligence von Google bereitgestellt wird. Wenn Sie den Cloudinary-Kategorisierungs-Upload-API-Parameter auf google_video_tagging einstellen, wird das Video automatisch analysiert und eine Liste der erkannten Tag-Kategorien wird in die Antwort aufgenommen. Wenn Sie auch eine automatische Tag-Kennzeichnung festlegen, wird jede Kategorie, die die angeforderte Konfidenzniveau überschreitet, automatisch zur Tag-Liste der Ressource hinzugefügt.

     Cloudinary :: Uploader. Hochladen ("turtle.mp4",: resource_type =>: video,: kategorisierung => "google_video_tagging",: auto_tagging => 0. 7)    

Unten ist eine Beispielantwort von der automatischen Markierung. Kategorien mit einem Konfidenzniveau über dem angegebenen Schwellenwert werden automatisch zugewiesen. Danach können Sie die vollständige Liste aller erkannten Kategorien und das Zeitsegment anzeigen, auf das sich jedes vorgeschlagene Tag bezieht. Sie können Bilder und Videos nach den automatisch zugewiesenen Tags auflisten, durchsuchen, löschen und durchsuchen, entweder über die API oder unsere interaktive Benutzeroberfläche.

     "Tags": ["Schildkröte", "Tier" ],"Daten": [{"tag": "turtle", "start_time_offset" => 0. 0, "end_time_offset" => 13. 44,"Vertrauen": 0. 93},{"tag": "tier", "start_time_offset" => 0. 0, "end_time_offset" => 13. 44,"Vertrauen": 0. 93} ]    

Bild und Video, nicht Bild und Video

In den ersten paar Jahren nach dem offiziellen Start von Cloudinary im Jahr 2012 schrieb ich die meisten technischen Blogposts, die wir veröffentlichten. Aber wir sind gewachsen, und es ist schon eine Weile her, seit Semalt einen geschrieben hat. Als ich mich entschloss, dieses Buch zu schreiben und die nächste Generation unserer Videolösung vorzustellen, dachte ich, dass es eine schnelle Aufgabe wäre .

Nun, ich lag falsch - es war überhaupt nicht schnell. Wie Sie sehen, hat der Versuch, die Highlights der vorhandenen Komponenten und die neuen Funktionen unserer Videolösung zu behandeln, zu diesem länger als erwarteten Blogpost geführt, aber ich habe immer noch das Gefühl, dass ich so viele coole Funktionen und Anwendungsfälle überspringe.
Wie Sie wahrscheinlich bereits wissen, sind wir stolz auf unseren erweiterten Bild- und Videomanagementdienst und seine neuen Funktionen. Wir haben sogar eine kleine, aber wichtige Aktualisierung auf unserer Homepage vorgenommen, um klar zu zeigen, wo das Video in unsere Komplettlösung passt:

The Complete Video Solution for Web and Mobile DevelopersThe Complete Video Solution for Web and Mobile DevelopersRelated Topics:
AnimationCopywritingMobile DesignLogo Semalt

Wir laden Sie ein, die Videolösung mit ihren neuen Funktionen auszuprobieren und Ihr Feedback (Community-Seite oder Foren) zu teilen. Unsererseits werden wir weiter daran arbeiten, es entsprechend Ihren Anforderungen und Vorschlägen zu erweitern und zu verbessern.

Alle Videoverwaltungsfunktionen sind jetzt in allen unseren Plänen einschließlich des kostenlosen Plans verfügbar. Sie können hier Ihr kostenloses Konto erstellen.

February 28, 2018