Вызов плеера Playkit-js не отображается в браузере
Проведя около 12 часов, я думаю, что успешно собрал плеер playkit-js (https://github.com/kaltura/playkit-js) и получил новую папку "dist" и новый "playkit.js".
Там есть папка src, которая также содержит playkit.js.
Не могли бы вы помочь мне вызвать / настроить плеер и какой будет правильный код javascript? В соответствии с их документами мне нужно добавить следующий фрагмент:
<script type="text/javascript" src="/PATH/TO/FILE/playkit.js"></script>
<div id="player-placeholder" style="height:360px;width:640px">
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {...};
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
player.play();
</script>
Я не могу сделать плеер видимым в браузере. Куда его добавить, а также какой файл playkit.js использовать? Я пробовал оба файла, но это не работает. Пожалуйста помоги.
Вот HTML, который я использую:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#player-placeholder {
width: 640px;
height: 360px;
background-color: black;
}
</style>
<script src="playkit.js" type="text/javascript"></script>
</head>
<body>
<div id="player-placeholder" style="height:360px;width:640px">
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {...};
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
player.play();
</script>
</body>
</html>
1 ответ
Воспроизведение из API иногда не работает из-за ограничений браузера (не может автоматически воспроизводиться звук), если вы добавите кнопку, она будет работать. посмотрите этот пример:
<script src="https://github.com/kaltura/playkit-js/releases/download/v0.59.9/playkit.js"></script>
<div id="player-placeholder" style="height:360px;width:640px">
<input type="button" onclick="play()" value="Play"/>
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {
sources:{
progressive:[{
mimetype:"video/mp4",
url:"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
}]
}
}
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
function play(){
player.play();
}
</script>