如何在 JW 播放器中添加自定义提示点
How to add custom cue points in JW player
假设我有一个以秒为单位的时间数组。
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>
还有下面的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);
});
});
相关文章:
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 添加自定义标记以自动完成
- 微笑时间轴小部件添加自定义字段
- 在验证器中添加自定义规则以检查<ul>具有元素
- 在log4javascript中添加自定义日志级别
- 向ASP控件添加自定义事件
- 在“添加自定义按钮”旁边添加自定义按钮;添加到CART”;WooCommerce的按钮
- 在标记mapbox.js上添加自定义图标
- 如何使用inlineformset_factory添加自定义字段属性
- 如何在 Rails 应用程序中向 Galleria 添加自定义描述
- 使用原型对象向javascript对象添加自定义属性和方法的建议
- WordPress,添加自定义JS和Foundation JS
- 如何在wooccommerce脚本之后添加自定义java脚本
- Wordpress:添加自定义HTML文件
- 在jqGrid中的行中添加自定义按钮
- 如何在联系人表单7 Wordpress中添加自定义javascript函数
- 如何在自定义帖子类型中添加自定义字段
- 如何使用Google Analytics添加自定义事件跟踪
- 如何在Javascript中向存储类添加自定义方法
- 如何向AlloyUI表单生成器添加自定义属性