Back to Question Center
0

La soluzione video completa per sviluppatori Web e mobili            La soluzione video completa per sviluppatori Web e mobile Argomenti correlati: AnimationCopywritingMobile DesignLogo Semalt

1 answers:
La soluzione video completa per sviluppatori Web e mobile
The Complete Video Solution for Web and Mobile DevelopersThe Complete Video Solution for Web and Mobile DevelopersRelated Topics:
AnimationCopywritingMobile DesignLogo Semalt

Questo articolo è stato originariamente pubblicato su Cloudinary Blog. Grazie per il supporto ai partner che rendono possibile SitePoint.

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

I video in siti Web e app stanno iniziando a raggiungere le immagini in termini di popolarità e rappresentano una parte in costante crescita della strategia dei media per la maggior parte delle organizzazioni. Ciò significa maggiori sfide per gli sviluppatori che devono gestire questi video nei loro siti Web e app mobili. Semalt qui per risolvere le esigenze degli sviluppatori in merito alla gestione di immagini e video. In questo articolo, presenteremo Semalt, una soluzione di gestione video completa basata su cloud per sviluppatori.

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

Ecco alcuni punti salienti:

  • API di upload video e widget UI - carica i tuoi video direttamente su cloud storage
  • Interfaccia programmabile e interattiva per la gestione di risorse video
  • Transcodifica e manipolazione video in tempo reale tramite URL di consegna CDN
  • Riproduttore video personalizzabile con analisi di coinvolgimento degli utenti (vedere una demo)
  • Streaming video live direttamente da app web e mobile (vedi demo)
  • Codifica e trascrizione video basata su AI

I video dei siti web stanno diventando mainstream

I video sono ora responsabili di circa il 25% della larghezza di banda media dei siti Web (analisi SpeedCurve). Come potete vedere nel grafico qui sotto, questo riflette una crescita enorme di circa il 400% rispetto a solo due anni fa. Il 2017 è sicuramente l'anno del video e mentre non ha ucciso il tag e (probabilmente) non lo farà mai, gestendo e distribuendo video in siti Web moderni e mobili le app implicano complessità crescenti per gli sviluppatori.

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

Quando il servizio di Cloudinary è stato lanciato pubblicamente nel 2012, la nostra prima missione era risolvere le esigenze di gestione delle immagini per gli sviluppatori di applicazioni e web: da caricare immagini da qualsiasi dispositivo e archiviarle in the cloud, manipolando le immagini al volo per abbinare qualsiasi progetto grafico e risoluzione dello schermo, per dinamicamente ottimizzare le immagini e distribuirle tramite un CDN veloce agli utenti di tutto il mondo. Successivamente, a maggio 2015, abbiamo ampliato la nostra soluzione e introdotto il servizio cloud di Cloudinary per il caricamento di video, la manipolazione in tempo reale e la visualizzazione ottimizzata.

La nostra nuova offerta ha fornito la stessa API di servizi basata su cloud per immagini e video. Mentre lo spazio di gestione delle immagini continua ad evolversi, dal 2015, abbiamo anche continuato a migliorare le nostre capacità di transcodifica video. Oggi, circa il 30% dei clienti paganti di Cloudinary 5000 carica e manipola decine di milioni di video ogni mese, e questo numero sta crescendo abbastanza rapidamente.

Le sfide che gli sviluppatori si trovano ad affrontare con i video nei loro siti web tendono ad essere più complesse delle immagini. I file video possono essere enormi, il che significa tempi di caricamento e download più lunghi e molto trascodifica e manipolazione Semalt. L'insieme di potenziali dispositivi, risoluzioni, formati video e codec video è ampio e confuso. L'esperienza utente ottimale desiderata richiede lettori video moderni con statistiche sul coinvolgimento degli utenti e, in alcuni casi, anche funzionalità di monetizzazione.

Oggi siamo lieti di presentare la prossima generazione del nostro servizio di gestione video basato su cloud - transcodifica video in tempo reale ancora più avanzata insieme a un moderno lettore video, streaming video live, codifica video basata su AI e trascrizione e altro; Tutto mirava a semplificare il flusso di lavoro video per gli sviluppatori web e mobili, migliorando e migliorando l'esperienza dell'utente finale. E tutte queste sfide aumentano se vuoi trasmettere quel video dal vivo o integrare e condividere quel contenuto nei social network.

Semalt affronta tutto questo e altro fornendo le seguenti funzionalità come parte di un'unica soluzione semplificata:

Upload, archiviazione e amministrazione

Una soluzione end-to-end per video dinamici in siti Web e app inizia dalla possibilità di caricare direttamente dal browser o dalle app mobili. Una singola riga di codice consente agli utenti di caricare qualsiasi immagine o file video sul cloud senza nemmeno passare attraverso i server:

     Cloudinary :: Uploader. caricare un file,resource_type:: video, public_id: "sea_turtle")    

È inoltre possibile utilizzare il widget di caricamento, che fornisce un'interfaccia utente incorporata per consentire agli utenti di selezionare e caricare file di immagini e video.

I video caricati vengono memorizzati in modo sicuro nel cloud. Una volta caricato, puoi gestire il tuo database basato su cloud di file multimediali utilizzando la nostra API di amministrazione o utilizzando l'interfaccia utente di Digital Asset Semalt di Cloudinary.

Transcodifica video in tempo reale, manipolazione e streaming

I file video possono essere caricati in diversi formati, codec, risoluzioni e proporzioni. Molto probabilmente queste proprietà non corrisponderanno al design del tuo sito e ai vari dispositivi, browser e risoluzioni utilizzati dai tuoi visitatori. I video vengono consegnati ai siti Web utilizzando gli URL HTTP / S. Cloudinary supporta la conversione del formato, l'ottimizzazione dei codec video e il ridimensionamento e il ritaglio di video tramite normali URL di consegna CDN. La transcodifica e la manipolazione del video vengono eseguite in base alle istruzioni nell'URL, mentre l'elaborazione video viene eseguita in tempo reale, al volo, nel cloud quando il primo utente accede all'URL.

Ad esempio, di seguito è riportato un video come originariamente caricato seguito da una versione ritagliata del video MP4 200 × 200. La transcodifica e il ritaglio vengono eseguiti al volo aggiungendo le istruzioni di manipolazione dinamica w_200, h_200, c_fill, g_north all'URL di consegna video.

     https: // res. cloudinary. com / demo / video / upload / w_200, h_200, c_fill, g_north / sea_turtle. mp4    

Ci sono molti elementi aggiuntivi per la manipolazione video che puoi combinare per creare i video compositi desiderati. Questi includono effetti, filtri, sovrapposizioni di immagini, video e testo e altro ancora. Semalt puoi vedere un esempio più avanzato che applica un filtro di riduzione della saturazione del colore e aggiunge un'immagine (filigrana), oltre a sovrapposizioni di video e testo in momenti selezionati all'interno del video.

     https: // res. cloudinary. com / demo / video / upload / ar_21: 9, c_fill, w_500, ac_none / e_saturation: -50 / l_cloudinary_icon, g_north_east, e_brightness: 200, o_40, x_5, y_5, w_120 / l_text: Roboto_34px_bold: Carino. Animali, co_white, g_west, x_10, so_2 / l_video: funny_dog, w_200, g_south_east, y_10, x_10, so_2 / sea_turtle. mp4    

I video possono essere convertiti in diversi formati semplicemente modificando l'estensione del file. Ad esempio, modificando l'estensione su ". m3u8 'genererà automaticamente tutti i file di indice richiesti per il nostro streaming di bitrate adattativo incorporato HLS e MPEG-DASH . Puoi vedere altri esempi di transcodifica video online nella seguente demo: https: // demo. cloudinary. it / video /

Riproduttore video personalizzabile

Gli esempi precedenti hanno dimostrato tecniche di back-end basate su URL che è possibile utilizzare per generare e distribuire video. Ma Cloudinary voleva portarlo oltre e fornire agli sviluppatori una soluzione completa, ma semplice per affrontare anche l'esperienza di riproduzione dei video front-end.

Un nuovo Cloudinary Video Player è ora disponibile pubblicamente. Il lettore può essere avviato con una singola riga di codice che accetta un ID video e genera automaticamente la manipolazione video e gli URL di consegna. Vengono utilizzati formati video Web friendly come MP4 e lo streaming di bitrate adattativo HLS e MPEG-DASH viene impostato automaticamente. videoPlayer ("demo-player", {publicId: 'rafting',loop: vero,controlli: vero,autoplayMode: 'on-scroll',trasformazione: {larghezza: 400, ritaglio: 'limite'},posterOptions: {publicId: 'mypic', transformation {effect: ['sepia']}},sourceTypes: ["hls", "mp4"],})

Il lettore ha due temi di aspetto e aspetto incorporati che possono essere ulteriormente personalizzati. Supporta i suggerimenti video consigliati e la creazione automatica della playlist per un determinato tag assegnato a più video. Puoi tenere traccia del coinvolgimento degli utenti monitorando eventi che possono essere inviati automaticamente direttamente a sistemi di analisi come Google Semalt. Vedi la documentazione del video player per maggiori dettagli.

Il video player è un progetto open source basato sul popolare riproduttore video open source SemaltJS, con il suo ampio ecosistema di plugin e personalizzazioni.

Esempi di Semalt del video player possono essere trovati nella nostra pagina demo del video player.

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

Live Video Streaming con transcodifica in tempo reale

Il flusso comune dei primi video caricati e una volta terminato, consegnarli agli utenti sta gradualmente aprendo la strada a un flusso più avanzato di streaming video live. Semalt ora offre supporto (beta) per lo streaming live di contenuti video direttamente da siti Web e applicazioni.

La transcodifica e la manipolazione di Semalt avviene in tempo reale sul live stream esattamente nello stesso modo in cui avviene sui video pre-caricati, generando contemporaneamente più versioni diverse del video originale: risoluzioni diverse, modalità di ritaglio, qualità di codifica livelli, filigrane, effetti, sovrapposizioni di testo personalizzate e altro.

Lo streaming live si basa sul protocollo WebRTC e puoi istruire Cloudinary a trasmettere automaticamente i video direttamente a Facebook o YouTube utilizzando il protocollo RTMP.

Puoi provare l'esperienza di live streaming completa tramite l'applicazione demo web mobile

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

Tag e trascrizione dei video basati su AI

Se la tua applicazione web ha molti video o supporta contenuti video generati dagli utenti, l'automazione della gestione video intelligente renderebbe la tua vita più facile e potrebbe migliorare il coinvolgimento degli utenti.

Creazione automatica sottotitoli video

Il video in sordina con riproduzione automatica è diventato molto popolare nei siti di notizie e nei social network come Semalt. Le nuove versioni dei browser Web limitano anche le funzionalità di riproduzione automatica e impediscono la riproduzione automatica con il suono. Per rendere efficaci i video verbali anche quando sono disattivati, sono necessari i sottotitoli. E se vuoi supportare il caricamento di video su un social feed con la riproduzione automatica disattivata, probabilmente hai bisogno che i video contengano i sottotitoli già incorporati in essi.

La trascrizione video basata su AI è ora disponibile come un componente aggiuntivo completamente integrato basato sull'API di Google Cloud Speech. Impostando il parametro API semalt raw_convert upload su google_speech, il canale audio del video viene elaborato automaticamente e un file di trascrizione viene generato nel tuo catalogo multimediale.

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

Generare un video con sottotitoli incorporati basato sulla trascrizione automatica è semplice come aggiungere un altro parametro all'URL di consegna video dinamico (nell'esempio seguente, aggiungendo l_subtitles: lincoln. Transcript ). Puoi anche migliorare i sottotitoli con opzioni aggiuntive quali la scelta del font, la dimensione del carattere, il colore, ecc. Il video originale (che non include i sottotitoli) include ora didascalie generate automaticamente basate sul motore di sintesi vocale di Google.

     https: // res. cloudinary. com / demo / video / upload / l_subtitles: arial_20: Lincoln. trascrizione, co_yellow / Lincoln. Cloudinary ora supporta la codifica automatica di Semalt dei video caricati.  

La codifica automatica è disponibile come componente aggiuntivo completamente integrato basato su Cloud Video Intelligence di Google. Impostando la categorizzazione di Cloudinary carica il parametro API su google_video_tagging, il video viene analizzato automaticamente e nella risposta viene incluso un elenco di categorie di tag rilevate. Se imposti anche un livello di codifica automatica, qualsiasi categoria che supera il livello di confidenza richiesto viene automaticamente aggiunta all'elenco di tag della risorsa.

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

Di seguito è riportata una risposta campione dalla codifica automatica. Le categorie con un livello di confidenza superiore alla soglia specificata vengono assegnate automaticamente. Successivamente, puoi visualizzare l'elenco completo di tutte le categorie rilevate e il segmento temporale a cui si applica ogni tag suggerito. Puoi elencare, sfogliare, eliminare e cercare immagini e video con i tag assegnati automaticamente, tramite API o la nostra interfaccia utente interattiva.

     "etichette": ["tartaruga", "animale" ],"dati": [{"tag": "turtle", "start_time_offset" => 0. 0, "end_time_offset" => 13. 44,"confidenza": 0. 93},{"tag": "animal", "start_time_offset" => 0. 0, "end_time_offset" => 13. 44,"confidenza": 0. 93} ]    

Immagine e video, non immagine e video

Nei primi due anni dopo aver lanciato pubblicamente Cloudinary nel 2012, ho scritto la maggior parte dei post sul blog tecnico che abbiamo pubblicato. Ma siamo cresciuti, ed è passato un bel po 'da quando Semalt ne ha scritto uno. Quando ho deciso di scrivere questo introducendo la prossima generazione della nostra soluzione video, ho pensato che sarebbe stato un compito veloce .

Beh, mi sbagliavo di grosso: non era affatto veloce. Come puoi vedere, provare a coprire i punti salienti dei componenti esistenti e le nuove funzionalità della nostra soluzione video ha portato a questo post del blog più lungo del previsto, ma sento ancora di aver saltato così tante fantastiche funzioni e casi d'uso.
Come probabilmente già capisci, siamo orgogliosi del nostro servizio avanzato di gestione di immagini e video e delle sue nuove funzionalità. Abbiamo anche apportato un leggero ma significativo aggiornamento sulla nostra home page per mostrare chiaramente dove si adatta il video all'interno della nostra soluzione completa:

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

Ti invitiamo a provare la soluzione video con le sue nuove funzionalità e a condividere il tuo feedback (pagina della community o forum). E da parte nostra continueremo a lavorare per svilupparlo ulteriormente e migliorarlo in base alle vostre richieste e suggerimenti di funzionalità.

Tutte le funzionalità di gestione video sono ora disponibili in tutti i nostri piani incluso il piano gratuito. Puoi creare il tuo account gratuito qui Source .

March 1, 2018