Totul despre videoclip!

  • HTML
  • API-uri de baza
  • Fragment URI
  • CSS
  • Grafica: Canvas si SVG
  • Captura
  • Streaming
  • Comunicare in timp real
  • Protectia continutului
  • Subtitrare
  • Accesibilitate
  • Performanta
  • Conduceti Web la potentialul sau maxim
  • 385 de membri
  • Ecosistem web: utilizatori, dezvoltatori, browsere etc.
  • Accentul este de a crea standarde care sa duca la beneficii publice si comerciale
  • W3C accepta intrari de la toti si le ofera iesiri tuturor
  • Fiecare participare isi aduce expertiza, perspectiva
  • 65 de grupuri. Fiecare are ingineri din companiile membre si suport personal W3C
  • Legaturi cu multe organizatii: IDPF, IETF, OMA, DLNA, ISO JTC1, ITU-T, Open IPTV Forum, SMPTE, EBU, etc.
  • HTML
  • Accesibilitate
  • API-uri de baza
  • Fragment URI
  • CSS
  • Grafica: Canvas si SVG
  • Captura
  • Streaming
  • Comunicare in timp real
  • Protectia continutului
  • Subtitrare
  • Performanta
<video controls preload = “auto” poster = “poster.png”> <source src = “trailer.mp4” type = ‘video / mp4’> <source src = “trailer.

Array

webm” type = ‘video / webm’> <track kind = ‘subtitles’ src = ‘brave.en’ srclang = ‘en’ label = “English”> <track kind = ‘captions’ src = brave_bis.en.vtt ‘srclang =’ en ‘label = “English for The Hard of Hearing “> <track kind = ‘subtitles’ src = ‘brave.fr.vtt’ srclang = ‘fr’ label =” Francais “> <p> Agentul dvs.

Array

de utilizator nu accepta elementul HTML5 Video. </video>

videoElement.currentTime videoElement.play () videoElement.pause () videoElement.addEventListener (“terminat”, .

Array

..); video.audioTracks [1] .enabled = adevarat;

Vedeti Evenimente video HTML5 si API

vc

conectati mai multe elemente media impreuna

<video src = “movie.vid # track = Video & amp; track = English” mediagroup = movie controls id = v1> </video> <video src = “movie.

vid # track = sign” mediagroup = movie> </video> <script> v1.controller.play (); </script>

http://www.example.com/example.mp4#xywh=160,120,320,240 http://www.example.com/example.webm?t=10,20

Chrome Firefox Internet Explorer Opera Safari video / mp4 ✔ ✔ ✔ ✔ video / ogg ✔ ✔ ✔ video / webm ✔ ✔ ✔

Proprietati CSS: opacitate, fundal (multiplu), redimensionare, margine-raza

Vezi si ctx3D.texImage (tinta, nivel, format intern, format, tip, video)

(De Paul Irish – 2010)

Player video HTML / SVG

  • HTML are suport pentru piese de text externe pentru elemente media, cum ar fi subtitrari, subtitrari, descrieri, capitole, metadate
  • HTML nu defineste si nu recomanda un format de pista text
  • Doua specificatii pentru formatele de text temporizate: Timed Text Markup Language (TTML) 1.0, WebVTT
  • Suportul pentru browser variaza
  • Produs de W3C Timed Text Working Group, grup creat in ianuarie 2003
  • TTML 1.0 a devenit standard W3C in noiembrie 2010
  • Manipuleaza diverse caracteristici: stil, regiuni, animatii
  • Bazat pe obiecte de formare XML si XSL (XSL FO)
  • Destinat initial pentru schimbul intre sistemele de autor
  • Implementat numai in Desktop IE
  • A inceput in WHATWG, stabilizat de grupul comunitar W3C Web Media Text Tracks
  • Bazat pe SRT si CSS
  • W3C investigheaza daca sa standardizeze formatul
  • Destinat pietei de continut generat de utilizatori
  • Suport pentru desktop in Chrome, Safari si IE
  • SMPTE-TT, un superset al TTML 1.0, are un sprijin larg in industria video
  • WebVTT are „asistenta” generala de la furnizorii de browsere
  • Regula FCC
    • Necesita subtitrare inchisa a programarii video furnizate de IP (anterior la televizor)
    • Stabiliti cerintele pentru functiile de subtitrare
    • Declarati SMPTE-TT ca port sigur

Pseudoelectoare API si CSS pentru suport pe ecran complet

myElement.requestFullscreen (); document.exitFullscreen (); document.fullscreenEnabled; section: fullscreen {border: none; }

Cerintele utilizatorului

  • Dupa tipul de dizabilitate: orbire, perceptie atipica a culorii, surditate, surdo-orb, …
  • Prin alternative: videoclip descris, audio curat, traducere semn, …
  • In functie de cerintele de sistem: scara de timp, descoperire, acces la controale, …

Acces audio si video local

function start () {navigator. getUserMedia ({audio: true, video: true}, gotStream); startBtn.disabled = adevarat; } functia gotStream (stream) {video.src = URL.createObjectURL (stream); video.onerror = function () {stream.stop (); }; stream.onended = function () {startBtn.disabled = false; }; }

Consultati exemplul getUserMedia

  • Control cu ​​granulatie fina: dezvoltatorul de aplicatii construieste un flux media dintr-o serie de bucati video sau audio.
  • Utilizati cazuri
    • Streaming adaptiv (cand sunt disponibile diferite rezolutii de pe server)
    • Inserarea reclamei
    • Schimbarea timpului
    • Editare video
  • Chiar si atunci cand un flux unic poate imbunatati performanta, permitand descarcari paralele de bucati care sunt recombinate
  • Functioneaza si cu fluxuri live
  • Ne asteptam sa vedem inovatii in algoritmi adaptivi.
  • W3C are o propunere pentru un API pentru a controla redarea continutului protejat.
    • Conecteaza sistemul de gestionare a continutului (CMS) la furnizorul de continut care deserveste suporturi criptate
  • Provocari ale acestei abordari:
    • Opacitatea CMS existent
    • Presupune interoperabilitatea intre CMS si serviciul care furnizeaza cheia.
    • Relatia cu ceilalti este in lucru:
      • Panza, CSS
      • Tehnologie ajutatoare
  • Conexiune de la egal la egal
    • Canal P2P pentru video, audio, date
    • Control codec
    • Criptare
    • Managementul latimii de banda
  • Configurarea sesiunii (semnalizare)
  • DataChannel
  • ICE, SDP
  • Vezi-l pe Steve daca folosesti prea mult videoclip pe pagina ta 🙂
  • Masuratori
  • Economisirea energiei

masuratori de latenta pe partea de client in cadrul aplicatiilor

function onPlay () {var now = new Date (). getTime (); alert (“Timp de incarcare a redarii automate percepute de utilizator:” + acum – performance.timing.navigationStart); } video.addEventListener („redare”, onPlay, fals);

fetchStart, requestStart, responseEnd etc.

Determinati vizibilitatea curenta a unei pagini

document.hidden document.addEventListener (‘vizibilitate schimbare’, …); function onvisibilitychange () {if (document.hidden) video.pause (); else video.play (); }

Animatii bazate pe scripturi in care agentul utilizator controleaza limitarea ratei de actualizare a animatiei

function animate (time) {if (! document.hidden) {// if visible, draw canvas.drawImage (myVideoElement, 0, 0); } window.requestAnimationFrame (animat); } function start () {window.requestAnimationFrame (animate); }

  • HTML
  • API-uri de baza
  • Fragment URI
  • CSS
  • Grafica: Canvas si SVG
  • Captura
  • Streaming
  • Comunicare in timp real
  • Protectia continutului
  • Subtitrare
  • Accesibilitate
  • Performanta

ARTICOLE SIMILAREDE LA ACELAȘI AUTOR