FMUSER бездротовий передавати відео та аудіо простіше!
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> африкаанс
sq.fmuser.org -> албанська
ar.fmuser.org -> арабська
hy.fmuser.org -> Вірменська
az.fmuser.org -> азербайджанська
eu.fmuser.org -> баскська
be.fmuser.org -> білоруська
bg.fmuser.org -> болгарська
ca.fmuser.org -> Каталонська
zh-CN.fmuser.org -> китайська (спрощена)
zh-TW.fmuser.org -> китайська (традиційна)
hr.fmuser.org -> хорватська
cs.fmuser.org -> чеська
da.fmuser.org -> данська
nl.fmuser.org -> Голландська
et.fmuser.org -> естонська
tl.fmuser.org -> філіппінська
fi.fmuser.org -> фінська
fr.fmuser.org -> французька
gl.fmuser.org -> галицький
ka.fmuser.org -> грузинський
de.fmuser.org -> німецька
el.fmuser.org -> грецька
ht.fmuser.org -> гаїтянський креольський
iw.fmuser.org -> іврит
hi.fmuser.org -> хінді
hu.fmuser.org -> Угорська
is.fmuser.org -> ісландська
id.fmuser.org -> індонезійська
ga.fmuser.org -> ірландський
it.fmuser.org -> італійська
ja.fmuser.org -> японська
ko.fmuser.org -> корейська
lv.fmuser.org -> латиська
lt.fmuser.org -> литовська
mk.fmuser.org -> македонська
ms.fmuser.org -> малайська
mt.fmuser.org -> мальтійська
no.fmuser.org -> Норвезька
fa.fmuser.org -> Перська
pl.fmuser.org -> польська
pt.fmuser.org -> португальська
ro.fmuser.org -> румунська
ru.fmuser.org -> російська
sr.fmuser.org -> сербська
sk.fmuser.org -> словацька
sl.fmuser.org -> словенська
es.fmuser.org -> іспанська
sw.fmuser.org -> суахілі
sv.fmuser.org -> шведська
th.fmuser.org -> Тайська
tr.fmuser.org -> турецька
uk.fmuser.org -> український
ur.fmuser.org -> урду
vi.fmuser.org -> в'єтнамська
cy.fmuser.org -> валлійська
yi.fmuser.org -> Ідиш
За останні два роки ми виявили, що все більше і більше відеопрограм використовують відео в форматі m3u8, оскільки воно сумісне з ПК та мобільними терміналами. Порівняно з джерелами відео, такими як mp4, m3u8 може зменшити тиск на сервері (навантаження на вимогу). HLS - це стандарт протоколу, вперше запропонований Apple, який може використовуватися для прямого мовлення.
Переглянути демонстрацію Завантажити вихідний код
m3u8 - це формат відеофайлу, заснований на HLS (HTTP Live Streaming), який в основному зберігає основну інформацію та сегменти всього відео. На відміну від великих файлів mp4, m3u8 складається із серії ts-файлів. Як правило, файл ts займає приблизно 5-10 секунд. Ці файли ts індексуються файлом .m3u8. Коли користувач відтворює відео, він може перетягувати прогрес відео за власним бажанням, і файл ts відповідного прогресу буде прочитаний, щоб продовжити перегляд відео, не чекаючи завантаження повного відео. Тому при відтворенні m3u8 відставання дуже мало.
У наступній статті ми представимо технічні приклади прямої трансляції HLS та технологію нарізки m3u8. У цій статті пояснюється лише HLS на вимогу. На відміну від прямої трансляції, за запитом означає, що відеофайл був відредагований і може бути відтворений у будь-який час.
Оскільки HLS була запропонована Apple, ви можете безпосередньо використовувати браузера Safari для відтворення відеофайлів формату m3u8 на комп’ютері iOS або мобільному телефоні. Інші браузери повинні використовувати hls.js, щоб бути сумісними з m3u8.
Використовуючи hls.js, немає необхідності в будь-якому спеціальному програвачі, лише в елемент може грати m3u8.
Завантажте js та елементи відтворення
Додайте елемент відео та файл hls.js до місця сторінки, де потрібно розмістити відео.
Зателефонуйте hls.js
Спочатку визначте, чи підтримує браузер hls, якщо він підтримує, створіть інстанцію нового Hls (), завантажте джерело m3u8, а потім відтворіть. Якщо hls не підтримується, але підтримується власний додаток Apple, відтворюється інше джерело m3u8.
var video = document.getElementById ('відео');
if (Hls.isSupported ()) {
var hls = новий Hls ();
hls.loadSource('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');
hls.attachMedia (відео);
hls.on (Hls.Events.MANIFEST_PARSED, function () {
video.play ();
});
} ще якщо (video.canPlayType ('application / vnd.apple.mpegurl')) {
video.src = 'https: //video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener ('loadedmetadata', function () {
video.play ();
});
}
Запустіть його, спробуйте отримати доступ до нього за допомогою браузера ПК та мобільного телефону, ви виявите, що m3u8 грає дуже гладко.
Використовуйте hls.js у Vue
Студенти, які використовують фреймворк Vue, можуть спочатку використовувати npm для встановлення hls.
npm встановити --save hls.js
Потім додайте компоненти.
Нарешті змонтуйте код:
імпортувати Hls з'hls.js ';
експортувати за замовчуванням {
дані () {
повернути {
//
}
},
змонтований: function () {
var hls = новий Hls ();
hls.loadSource ('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia (this. $ refs.videoRef);
hls.on (Hls.Events.MANIFEST_PARSED, function () {
це. $ refs.videoRef.play ();
});
}
}
інший
На основі hls.js розроблено багато плагінів для програвачів html5, так що ці програвачі також підтримують відтворення у форматі m3u8.
Video.js використовує videojs-contrib-hls.js.
Flowplayer використовує flowplayer-hlsjs.
|
Введіть електронну адресу, щоб отримати сюрприз
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> африкаанс
sq.fmuser.org -> албанська
ar.fmuser.org -> арабська
hy.fmuser.org -> Вірменська
az.fmuser.org -> азербайджанська
eu.fmuser.org -> баскська
be.fmuser.org -> білоруська
bg.fmuser.org -> болгарська
ca.fmuser.org -> Каталонська
zh-CN.fmuser.org -> китайська (спрощена)
zh-TW.fmuser.org -> китайська (традиційна)
hr.fmuser.org -> хорватська
cs.fmuser.org -> чеська
da.fmuser.org -> данська
nl.fmuser.org -> Голландська
et.fmuser.org -> естонська
tl.fmuser.org -> філіппінська
fi.fmuser.org -> фінська
fr.fmuser.org -> французька
gl.fmuser.org -> галицький
ka.fmuser.org -> грузинський
de.fmuser.org -> німецька
el.fmuser.org -> грецька
ht.fmuser.org -> гаїтянський креольський
iw.fmuser.org -> іврит
hi.fmuser.org -> хінді
hu.fmuser.org -> Угорська
is.fmuser.org -> ісландська
id.fmuser.org -> індонезійська
ga.fmuser.org -> ірландський
it.fmuser.org -> італійська
ja.fmuser.org -> японська
ko.fmuser.org -> корейська
lv.fmuser.org -> латиська
lt.fmuser.org -> литовська
mk.fmuser.org -> македонська
ms.fmuser.org -> малайська
mt.fmuser.org -> мальтійська
no.fmuser.org -> Норвезька
fa.fmuser.org -> Перська
pl.fmuser.org -> польська
pt.fmuser.org -> португальська
ro.fmuser.org -> румунська
ru.fmuser.org -> російська
sr.fmuser.org -> сербська
sk.fmuser.org -> словацька
sl.fmuser.org -> словенська
es.fmuser.org -> іспанська
sw.fmuser.org -> суахілі
sv.fmuser.org -> шведська
th.fmuser.org -> Тайська
tr.fmuser.org -> турецька
uk.fmuser.org -> український
ur.fmuser.org -> урду
vi.fmuser.org -> в'єтнамська
cy.fmuser.org -> валлійська
yi.fmuser.org -> Ідиш
FMUSER бездротовий передавати відео та аудіо простіше!
Контакти
Адреса:
No.305 Кімната HuiLan Будівля No273 Huanpu Road Гуанчжоу Китай 510620
Категорії
Інформаційний бюлетень