Shaka Player
Tuesday, March 31, 2020 5:24 AMShaka Player - это библиотека с открытым исходным кодом для воспроизведения адаптивных видеопотоков. Она поддерживает такие форматы как HLS и DASH без использования плагинов и Flash. Вместо этого Shaka Player использует открытые Web стандарты MediaSource Extensions и Encrypted Media Extensions.
Поддерживаемые версии
Teleport.js совместим со всеми версиями Shaka Player старше 2.1.0
Поддерживаемые форматы
Teleport.js протестирован с MPEG Dash. В скором времени ожидается поддержка HLS.js.
Необходимая внешняя информация
-
apiKey
- до первой инициализации teleport.js необходимо привязать домен и получить API ключ в личном кабинете клиента Teleport. -
manifest
- ссылка на .mpd манифест.
Инициализация Teleport
Загрузка javascript модулей при интеграции Shaka Player с Teleport.js происходит строго в следующем порядке:
- Shaka Player.
- Бандл Teleport Core с Teleport Shaka Player plugin (все варианты подключения библиотеки Teleport).
Пример:
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/2.2.6/shaka-player.compiled.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.shaka.bundle.js"></script>
Для загрузки видео плеером сегментов из пиринга нужно:
- Создать экземпляр Shaka Player.
- Инициализировать Телепорт, передав в качестве параметра лоадера созданный экземпляр плеера.
Полный пример
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TELEPORT SHAKA EXAMPLE</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/shaka-player/2.2.5/shaka-player.compiled.debug.js"></script>
</head>
<body>
<video id="video" width="640" controls autoplay></video>
<!-- Подключение основного SDK с плагином для Shaka Player-->
<script src="https://cdn.teleport.media/stable/teleport.shaka.bundle.js"></script>
<!-- Скрипт инициализации -->
<script>
var tlprt;
var STREAM_URL = "<URL видео-манифеста>";
var API_KEY = "<APIKEY полученных из кабинета>";
function initApp() {
shaka.polyfill.installAll();
var video = document.getElementById("video");
var player = new shaka.Player(video); // инициализируем плеер
player.addEventListener("error", onErrorEvent);
// инициализируем экземпляр Teleport
teleport.initialize({
apiKey: API_KEY,
loader: { // параметры интеграции с плеером
type: "shaka", // идентификатор плагина
params: {
player: player // экземпляр плеера
}
}
})
.then(function (instance) {
// запускаем плеер и сохраняем экземпляр teleport
tlprt = instance;
return player.load(STREAM_URL);
})
.then(function () {
console.log('The video has now been loaded!');
// подписываемся за событие закрытия страницы, чтобы корректно освободить ресурсы
window.addEventListener("unload", function () {
if (tlprt) {
tlprt.dispose();
tlprt = null;
}
});
})
.catch(onError);
}
function onErrorEvent(event) {
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error("Error code", error.code, "object", error);
}
document.addEventListener("DOMContentLoaded", initApp);
</script>
</body>
</html>