Kā iegult HLS video savā vietnē (iframe un hls.js)

HLS (HTTP Live Streaming) ir formāts, ko mūsdienās lielākā daļa vietņu izmanto video pēc pieprasījuma. Viena milzīga MP4 faila vietā video apraksta neliels teksta atskaņošanas saraksts, kas norāda uz vairākām tā paša video versijām, katra sadalīta īsos segmentos. Atskaņotājs lejupielādē dažus segmentus uz priekšu, mēra, cik ātri tie pienāk, un lidojumā pārslēdzas starp versijām. Skatītāji ar mobilo savienojumu saņem vieglu versiju, skatītāji ar optisko šķiedru – asu, un neviens negaida visa faila lejupielādi, pirms parādās pirmais kadrs.

Šajā rokasgrāmatā parādīti divi veidi, kā ievietot UFOLOAD HLS video savā tīmekļa lapā: gatavais atskaņotājs iframe, kas aizņem apmēram minūti, un jūsu pašu <video> elements, ko vada hls.js un kas dod pilnu kontroli pār lapu. Abi izmanto to pašu straumi, tāpēc varat sākt ar iframe un vēlāk pāriet uz hls.js, neko neaugšupielādējot no jauna.

Kā izskatās UFOLOAD HLS straume

Pēc faila augšupielādes konverteris to kodē ar H.264 video un AAC stereo audio vienā līdz četrās versijās: 360p, 720p, 1080p un 2160p (4K). Versija nekad nav lielāka par avotu, tāpēc no 720p augšupielādes rodas 720p un 360p, nekad palielināts 1080p. Augstākā versija, ko faktiski saņemat, atkarīga arī no plāna; cenu lapā norādīti aktuālie limiti. Ja vēlaties pilnu priekšstatu par to, kā tiek izvēlēti pakāpieni, izlasiet adaptīvā bitreita kāpnes.

Katra versija tiek glabāta kā parasts MP4 ar indeksu faila sākumā. Kad skatītājs sāk atskaņošanu, krātuves slānis lidojumā iepako šos MP4 failus HLS formātā: galvenais atskaņošanas saraksts (master.m3u8) uzskaita katru versiju ar tās maksimālo joslas platumu, izšķirtspēju un kodekiem, un katrai versijai ir savs četru sekunžu segmentu saraksts. Atslēgkadri izvietoti tā, lai sakristu ar segmentu robežām, – tieši tas ļauj atskaņotājam vienmērīgi pārslēgt kvalitāti video vidū.

Atskaņošanas saraksts un segmenti tiek pasniegti no kešatmiņas mezgliem ar galveni Access-Control-Allow-Origin: *, tāpēc atskaņotājs jūsu domēnā var tos pieprasīt tieši. Katrs URL ir parakstīts un tam ir derīguma termiņš, kas būs svarīgi vēlāk, runājot par hls.js pieeju.

1. solis: augšupielādējiet video un gaidiet, līdz tas ir gatavs

Augšupielādējiet no paneļa, ievelkot failu vai ielīmējot tiešu saiti, vai izmantojiet FTP, WebDAV vai API (curl, Python un Node.js piemērus skatiet rakstā video augšupielāde caur API). Fails iziet statusus uploading, queued, processing un ready; failed tiek parādīts ar iemeslu, un to var atkārtot no paneļa. Īsi klipi ir gatavi dažās minūtēs, garām filmām vajag vairāk laika, un maksas plāniem ir prioritāra kodēšanas rinda.

Jums nav jāgaida, kamēr lapa būs pabeigta. Ja kāds atver atskaņotāju, kamēr fails vēl tiek apstrādāts, tas rāda apstrādes paziņojumu ar progresu un pats pārslēdzas uz video, kad apstrāde beidzas. Tomēr pirms lapas publicēšanas pārbaudiet, vai statuss ir ready, lai jūsu lapas pirmie apmeklētāji neredzētu progresa joslu.

Jums būs vajadzīgs video identifikators. Panelis to rāda kopīgošanas panelī, un API to atgriež kā public_id – īsu 11 rakstzīmju kodu. Tieši šis kods tiek ievietots iegulšanas adresē.

2. solis: iegulstiet atskaņotāju ar iframe

Panelis izsniedz iframe fragmentu uzreiz pēc augšupielādes un katra video kopīgošanas panelī. Tas izskatās kā pirmais bloks zemāk. Aizstājiet VIDEO_ID ar sava video identifikatoru. Pati atskaņotāja lapa netiek indeksēta meklētājprogrammās, un iegulšanai tieši to arī vajag: rangu iegūst jūsu lapa, nevis atskaņotāja rāmis.

<iframe width="640" height="360"
  src="https://iframe.andromedans.live/e/VIDEO_ID"
  title="My video"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen></iframe>

Fiksēti izmēri pikseļos tālruņos salūzt. Adaptīvai lapai ietiniet iframe blokā, kas saglabā 16:9 attiecību, un ļaujiet rāmim to aizpildīt. Atskaņotājs aizpilda visu rāmi, tāpēc video mērogojas korekti.

<div style="position:relative;aspect-ratio:16/9;max-width:960px">
  <iframe src="https://iframe.andromedans.live/e/VIDEO_ID"
    title="My video"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    loading="lazy"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen></iframe>
</div>

Parametri, ko var pievienot adresei

• autoplay=1 sāk atskaņošanu, kad atskaņotājs ielādējas. Pārlūki vairumā gadījumu bloķē automātisko atskaņošanu ar skaņu, tāpēc apvienojiet to ar mute=1.
• mute=1 sāk video bez skaņas; skatītājs var ieslēgt skaņu jebkurā brīdī.
• loop=1 sāk video no jauna, kad tas beidzas.
• t=30 sāk atskaņošanu no 30. sekundes – ērti, lai saitē norādītu konkrētu brīdi garākā video.

Parametrs adresē vienmēr ir noteicošais pār to pašu iestatījumu Atskaņotāja studijā. Izmantojiet Atskaņotāja studiju noklusējumiem, kas attiecas visur, piemēram, apvalkam, akcenta krāsai, logotipam un pogu izkārtojumam, bet parametrus – kad vienai lapai jādarbojas citādi. Varat pat uzturēt atsevišķu atskaņotāja profilu katram iegulšanas domēnam.

3. solis (pēc izvēles): atskaņojiet straumi ar hls.js

Iframe ir īsākais ceļš, taču dažreiz vajag savu marķējumu: pielāgotu vadības joslu, video karuselī, analītikas notikumus no jūsu koda. Tad jums vajag atskaņošanas saraksta adresi un atskaņotāja bibliotēku. Pārlūki, izņemot Safari, nespēj atskaņot HLS dabiski, tāpēc parastā izvēle ir hls.js – JavaScript bibliotēka, kas padod HLS segmentus standarta <video> elementam. Safari un iOS atskaņo HLS dabiski, un tiem tā nav vajadzīga.

Atskaņošanas saraksta adrese ir video objekta lauks links.playback. Pieprasiet to no sava servera ar API atslēgu, jo atslēga nekad nedrīkst parādīties pārlūka kodā. Tas pats izsaukums atgriež links.expires_at, un saites ir parakstītas un laikā ierobežotas, tāpēc pieprasiet jaunu saiti katru reizi, kad renderējat lapu, nevis glabājiet to datubāzē.

const BASE = 'https://ufoload.com/api/v1'

export async function playbackUrl(fileId) {
  const res = await fetch(`${BASE}/files/${fileId}`, {
    headers: { Authorization: `Bearer ${process.env.UFOLOAD_API_KEY}` },
  })
  if (!res.ok) throw new Error(`UFOLOAD API: ${res.status}`)
  const { file, links } = await res.json()
  if (file.status !== 'ready') return null // still processing
  return links.playback // signed master.m3u8 URL
}

Ja vajag citu derīguma termiņu, nevis noklusējuma, POST /files/{id}/links pieņem ttl no 60 sekundēm līdz 30 dienām un var piesaistīt saiti IP adresei vai sīkdatnei. API dokumentācijā tas aprakstīts pilnībā. Ir arī publisks galapunkts GET /api/v1/public/files/{id}, kam atslēga nav vajadzīga; to izmanto skatīšanās un iegulšanas lapas, un tā saites ir derīgas sešas stundas.

Lapā izveidojiet atskaņotāju. Zemāk esošais bloks izmanto hls.js, kur tas tiek atbalstīts, Safari pāriet uz dabisko atskaņošanu, bet citos gadījumos rāda vienkāršu ziņojumu. Glabājiet bibliotēkas failu savā serverī vai piesaistiet konkrētu versiju, nevis ielādējiet jebkuru jaunāko.

<video id="player" controls playsinline preload="metadata"
       poster="POSTER_URL" style="width:100%;aspect-ratio:16/9;background:#000"></video>
<script src="/vendor/hls.min.js"></script>
<script>
  const video = document.getElementById('player')
  const src = 'PLAYLIST_URL_FROM_YOUR_SERVER'

  if (window.Hls && Hls.isSupported()) {
    const hls = new Hls()
    hls.loadSource(src)
    hls.attachMedia(video)
    hls.on(Hls.Events.ERROR, (_, data) => {
      if (!data.fatal) return
      if (data.type === Hls.ErrorTypes.NETWORK_ERROR) hls.startLoad()
      else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) hls.recoverMediaError()
      else hls.destroy()
    })
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = src // Safari, iOS
  } else {
    video.outerHTML = '<p>This browser cannot play HLS video.</p>'
  }
</script>

Video objektā ir arī links.poster vāka attēlam un links.sprite priekšskatījuma sīktēliem, uzvirzot kursoru, ko varat izmantot, ja veidojat savu pārtīšanas joslu. Ar hls.js jūs atsakāties no tā, ko UFOLOAD atskaņotājs dara jūsu vietā: kvalitātes izvēlnes, nodaļām, subtitru izvēles, logotipa pārklājuma un, ja reklāmas ir pieejamas, reklāmām. Tā ir reālā izvēle, un tabula zemāk to apkopo.

iframe vai hls.js: ko izmantot

Problēmu novēršanas kontrolsaraksts

• Melns kadrs vai bezgalīga ielāde. Atveriet pārlūka tīkla paneli un meklējiet master.m3u8. 403 nozīmē, ka saitei beidzies termiņš vai skatītāju bloķē valsts vai IP noteikums; pieprasiet jaunu saiti.
• Pārlūks bloķē HTTPS lapā. Visam jābūt HTTPS. Nekad neielīmējiet http:// adresi iframe vai hls.js.
• Automātiskā atskaņošana nenotiek. Pārlūki bloķē automātisko atskaņošanu ar skaņu. Pievienojiet mute=1 vai hls.js iestatiet video.muted = true pirms play() izsaukšanas.
• Apstrādes paziņojums video vietā. Fails vēl nav gatavs. Vaicājiet GET /files/{id}, līdz status ir ready.
• Atskaņojas tikai zema kvalitāte. Atskaņotājs sāk piesardzīgi un kāpj augstāk, tiklīdz ir izmērījis caurlaidību. Augšējo versiju ierobežo arī jūsu plāns un avots; salīdziniet ar cenām un funkciju lapu.

Kad lapa darbojas, iespējams, vēlēsieties to aizsargāt pret hotlinkingu vai, ja reklāmas ir pieejamas, ar to pelnīt. Abi temati aplūkoti nākamajās rokasgrāmatās: ierobežojiet, kur video var iegult un monetizējiet savu video vietni ar reklāmām atskaņotājā. Ja vēl izlemjat, kur hostēt, video hostinga kontrolsaraksts uzskaita, ko salīdzināt.