如何在JW Player中添加自定义提示点 [英] How to add custom cue points in JW player

问题描述

说我有几秒钟的时间.

var points = [5, 30, 50];

因此，在初始化jw播放器时，我想读取此数组，然后在时间轴上放置提示点[标记].

So when the jw player is initialized, I want to read this array and then place cue points[markers] on the timeline.

一旦搜索栏到达提示点，我想调用一个执行某些功能的自定义函数.

And once the seek bar reaches the cue point, I want to call a custom function that performs something.

Jw的文档非常简单，但是我发现了它-添加章节标记

The documentation of Jw is very plain but I found this - Adding chapter markers

我需要与此类似的东西并完全控制提示点.

I need something similar to this with full control on the cue points.

有什么方法可以实现这一目标，还是应该使用自定义控件栏?

Is there any way to achieve this or should I use a custom control bar?

推荐答案

我通过在某些点暂停视频来实现相同的目的.暂停时，用户只能通过单击链接来恢复视频(暂停时控件将被删除).

I implemented the same thing by pausing the video on certain points. When paused, the user can only resume the video by clicking on a link (the controls are removed when paused).

我有以下放置播放器和提示点HTML的HTML:

I have the following HTML where the player and the cue points HTML are placed:

<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:

And the following 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);
    });
});

这篇关于如何在JW Player中添加自定义提示点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！