Paano Mag-embed ng isang HTML5 Video Player sa iyong Website gamit ang HLS at DASH Adaptive Streaming

Ang Flash Player ng Adobe ay matagal nang ginamit bilang pangunahing video player para sa internet. Naghari ito ng mahabang panahon ngunit pinalitan ito ng mga protocol na mas mabilis, mahusay at gagawing mas madali sa pamamahala ng file. Sinimulan na ng Google Chrome na harangan din ang Flash at malapit nang matapos nito ang suporta nito para sa Adobe Flash. Maaaring magtagal ng ilang oras upang ganap na mapalitan ang legacy na protocol na ito, ngunit tiyak na nagdudulot ito ng mga benepisyo. Ang ilan sa mga mas bagong browser ay may mga katutubong suporta para sa HLS (HTTP Live Streaming).

Ang HTML5 at HLS ay mga open-source na protokol na nangangahulugang maaaring baguhin ng sinuman ang kanilang code at magamit ang mga ito sa kanilang website, ganap na walang gastos. Ang pag-encode ng isang video sa maraming iba't ibang mga pamantayan ng kalidad ng pag-playback, nakapaloob na mga caption at pag-optimize ng kalidad ng video ayon sa bandwidth ay ginawa ng seamless sa HLS video streaming. Dahil sa katutubong HTML ang tag, ang streaming ng HTML5 ay dumating sa code, na ginagawang madali ang streaming sa paglipas ng HLS at DASH. Ang DASH at HLS ay naghiwalay ng isang video stream sa mga maliliit na segment na maaaring magamit para sa isang HTML5 video player. Binabawasan nila ang oras na kailangan mong mag-buffer ng isang video bago magsimula itong i-play at anumang mga nauutal na problema na maaari mong makasalubong kapag nanonood ng isang stream. Ang mga benepisyo ay hindi lamang pinaghihigpitan sa manonood ngunit umaabot din sa nagbibigay ng nilalaman.

Mag-embed ng isang HTML5 Video Player sa iyong Website Gamit ang JWPlayer

Bago kami magsimula, iminumungkahi naming kunin ang JWPlayer mula sa dito . Sa pagtaas ng HLS at DASH na ginagamit para sa adaptive streaming na layunin, maraming mga manlalaro ng video ang lumitaw na tiyak na nagbibigay sa mga gumagamit ng kanilang patas na bahagi ng mga benepisyo. Ang isa sa mga naturang manlalaro na nakatiis ng mga hamon sa oras-oras at mayroon ay ginagamit ng mga gusto ng ESPN at Sony Pictures ay ang JWPlayer. Ang pag-upload ng nilalaman, pag-embed ng video player sa HTML5, iOS, Android at Fire OS ay ginawang madali gamit ang katutubong code ng JWPlayer na maaaring iakma para sa isang mas mahusay na karanasan ng gumagamit. Ngunit ang aming pokus ngayon ay sa mga HTML5 video player at kung paano mo magagamit ang HLS at DASH para sa mas mahusay na adaptive streaming.

Ano ang inaalok ng JW Player?

Kasabay ng pagbibigay sa iyo ng isang platform upang mai-upload ang iyong mga video at gawing isang playlist, pinapayagan ka rin ng JWPlayer na tingnan ang mga istatistika ng real-time ng iyong na-upload na mga video sa pamamagitan ng pagbibigay sa iyo ng mga ulat ng iyong mga iskedyul ng ad at na-customize na mga ulat.

Pasadyang mga ulat

Ginagawang madali ng JWPlayer ang pamamahala ng nilalaman para sa iyong pinalakas na website ng CMS din sa pamamagitan ng pagpapaalam sa iyo na madaling mapamahalaan ang mga caption, thumbnail, metadata atbp Samakatuwid, ang paggamit at mga benepisyo ng JWPlayer ay lumalawak nang lampas sa pagiging isang video player upang mai-embed ang iyong mga HTML5 na video.

Pag-upload ng mga video sa JWPlayer

Mag-upload ng mga video

Bago mo simulang i-embed ang JWPlayer sa iyong website sa HTML5, mahalagang i-upload muna ang kani-kanilang mga video sa platform ng JWPlayer. Sa kabutihang palad, iyon ay hindi isang napaka-kumplikadong gawain tulad ng kailangan mo lang gawin ay piliin ang file na nais mong i-upload.

Kapag na-upload na ang video, maaari mong simulang i-edit ang seksyon ng metadata ng nasabing video, tingnan ang analytics at subaybayan ang trapiko atbp o kumuha ng mga mapagkukunan para sa HLS at mag-upload ng mga closed caption mula sa tab ng mga assets.

Pagpapasadya ng HLS at DASH video player

Bago mag-embed ng isang video player, dapat mo munang magdagdag ng isang library ng manlalaro sa iyong site. Mayroong tatlong mga paraan kung saan maaari mong magawa ang gawaing ito. Self-host, cloud-host at cloud-host na may mga tawag sa API. Ang pagkakaiba sa pagitan ng cloud hosting at cloud hosting na may mga tawag sa API ay batay lamang sa mga tawag sa API. Inirerekumenda ng mga developer na gustong pamahalaan ang pagpapatupad ng kanilang video player sa pamamagitan ng mga tawag sa API na gamitin ito. Para sa mga host sa sarili, ang bersyon ng player ay ganap mong kinokontrol. Mahalagang tandaan na ang lisensya ng manlalaro ay hindi awtomatikong paikutin at kailangang gawin nang manu-mano kapag gumagamit ng self-host.

Pagpapasadya ng cloud-host player

Tulad ng nakikita mo rito, ang cloud-host player ay maaaring ipasadya at makintab ayon sa gusto mo. Halimbawa, ang manlalaro ay maaaring magkaroon ng tumutugon na laki o isang nakapirming isa. Ang pag-playback ay maaaring itakda sa isang loop, mute sa pagsisimula atbp Bukod dito, maaari mo ring baguhin ang default na kulay ng player, ang mga rekomendasyon ng mga video at marami pa.

Kapag natapos mo na ang lahat ng ito, pagkatapos ay dapat mong i-upload ang code ng Cloud Hosted Player Library sa iyong webpage i-tag upang hayaan ang JWPlayer na mai-load sa iyong website.

I-embed ang video player

Bilang default, awtomatikong ginugusto ng JWPlayer ang mga HTML5 media engine upang hindi ka mag-alala tungkol sa pagtatakda ng pangunahing kagustuhan. Gayunpaman, ang ilang mga kaso ay maaaring tumawag sa iyo na baguhin iyon. Kapag nangyari iyon, maaari mong ipasadya ang player at i-set up mo ito.

Kapag na-upload mo na ang cloud-host player library sa tag ng iyong webpage, ang susunod na hakbang ay i-upload ang naka-embed na code. Una, lumikha ng a tag sa kung saan dapat lumitaw ang JWPlayer. Tawagin mo ang setup () kasama ang pag-aari ng playlist upang tawagan ang player sa naka-target .

Nasa ibaba ang isang halimbawa ng isang sample setup () code na ibinigay ng JWPlayer devs kanilang mga sarili:

jwplayer ('myElement'). setup ({'playlist': 'https://example.com/myVideo.mp4