Javascript 如何在JW播放器中添加自定义提示点
假设我有一个以秒为单位的时间数组Javascript 如何在JW播放器中添加自定义提示点,javascript,jwplayer,jwplayer6,Javascript,Jwplayer,Jwplayer6,假设我有一个以秒为单位的时间数组 var points = [5, 30, 50]; 因此,当jw播放器初始化时,我想读取这个数组,然后在时间线上放置提示点[标记] 一旦搜索栏到达提示点,我想调用一个执行某些操作的自定义函数 Jw的文档非常简单,但我发现- 我需要类似的东西,完全控制球点 有没有办法实现这一点,或者我应该使用自定义控制栏?我通过在某些点上暂停视频实现了同样的功能。暂停时,用户只能通过单击链接恢复视频(暂停时控件将被删除) 我有以下HTML,其中放置了播放器和提示点HTML: &
var points = [5, 30, 50];
因此,当jw播放器初始化时,我想读取这个数组,然后在时间线上放置提示点[标记]
一旦搜索栏到达提示点,我想调用一个执行某些操作的自定义函数
Jw的文档非常简单,但我发现-
我需要类似的东西,完全控制球点
有没有办法实现这一点,或者我应该使用自定义控制栏?我通过在某些点上暂停视频实现了同样的功能。暂停时,用户只能通过单击链接恢复视频(暂停时控件将被删除) 我有以下HTML,其中放置了播放器和提示点HTML:
<div class="row">
<div class="col-xs-12 col-md-5">
<div id="myElement">Loading the player...</div>
</div>
<div class="col-xs-12 col-md-7">
<div id="on10seconds" class="hidden">
<p>Show after 10 seconds. <a href="#" class="positionInfoLink" data-position="10">Continue...</a></p>
</div>
<div id="on25seconds" class="hidden">
<p>Show after 25 seconds. <a href="#" class="positionInfoLink" data-position="25">Continue...</a></p>
</div>
<div id="on50seconds" class="hidden">
<p>Show after 50 seconds. <a href="#" class="positionInfoLink" data-position="50">Continue...</a></p>
</div>
</div>
</div>
正在加载播放器。。。
10秒后显示
25秒后显示
50秒后显示
以及以下JavaScript:
var positions = [10, 25, 50];
var positionsSeen = [];
var player = jwplayer("myElement").setup({
file: "/Content/videos/big_buck_bunny.mp4"
});
player.onTime(jwPlayerOnTime);
function jwPlayerOnTime(onTimeInfo) {
var currentPosition = onTimeInfo.position;
for (var i = 0; i < positions.length; i++) {
var position = positions[i];
var isPositionSeen = positionsSeen.indexOf(position) != -1;
// Within 2 seconds, so users can't skip to see the extra information displayed when pausing.
var isOnOrPastPosition = currentPosition > position && currentPosition <= position + 2;
if (isPositionSeen == false && isOnOrPastPosition) {
positionsSeen.push(position);
player.pause(true);
// Disable the controls, so the video can only be resumed with the custom controls.
player.setControls(false);
$("#on" + position + "seconds").removeClass("hidden");
}
}
}
$(document).ready(function () {
$(".positionInfoLink").on("click", function (e) {
e.preventDefault();
var position = $(this).data("position"); // 10, 25 or 50.
$(this).parent().addClass("hidden");
player.play(true);
// Enable the controls, so the video can be paused manually again.
player.setControls(true);
});
});
var位置=[10,25,50];
var PositionSeen=[];
var player=jwplayer(“myElement”).setup({
文件:“/Content/videos/big_buck_bunny.mp4”
});
player.onTime(jwPlayerOnTime);
函数jwPlayerOnTime(onTimeInfo){
var currentPosition=onTimeInfo.position;
对于(变量i=0;i var isOnOrPastPosition=currentPosition>position&¤tPosition我们恐怕没有Cuepoints API。不过,您可以使用自己的JS-