未在浏览器中显示Calling Playkit-js播放器

问题描述 投票:0回答:1

[花了大约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>
javascript media-player kaltura-player
1个回答
2
投票

由于添加了按钮,由于浏览器的限制(无法自动播放声音),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>

https://codepen.io/itaykinnrot/pen/LYVPGEx

© www.soinside.com 2019 - 2024. All rights reserved.