2

ユーザーが用語を検索できるhtmlプレーヤーアプリケーションがあり、それらの単語が発生した時刻を結果に入力します。その特定の文をクリックすると、htmlプレーヤーがその場所から再生を開始します。しかし、この機能を使用して、youtube で見られるように、videogular のタイム ラインにマークを追加したいと考えています。

ここに画像の説明を入力

YouTube のように、特定の時間に黄色のマーカーを見ることができます。同じように、特定の場所に css マーカーが必要です。 ここに画像の説明を入力

右側の検索ボックスに 19:00 min に文章がある場合、videogular タイムラインの 19:00 に黄色のマーカーを設定します。

検索ボタンのクリックイベント:

HTML:

<button class="btn btn-default side-search" type="button" data-ng-click="inlinSearch()"></button>

JS:

var onSearchSuccess = function (response) {
    $scope.inlineSearchResult = response.data;
    $scope.jsonResult = JSON.parse($scope.inlineSearchResult);
};
$scope.inlinSearch = function () {
    var counterSearch = 0;
    var textSearch = $scope.searchkey.toLowerCase().trim();
    scopraServices.searchWithin(textSearch, videoId)
                  .then(onSearchSuccess, function () {
                      alert("Search Operation failed");
                  });
};

ng-repeat を使用して、ビューの値をバインドしています:

<section class="scroll-content-container">
<article class="scroll-content" data-ng-repeat="sr in jsonResult" data-ng-click="Seek(sr.Location)">
<a>[{{util.formatTime(sr.Location)}}]</a>
<p ng-bind-html=util.boldText(searchkey,sr.Result[0].Text)></p>
</article>
</section>

前もって感謝します。

4

1 に答える 1

2

ここにデモがあります: http://videogular.com/demo/#/cue-points 完全なコード例: https://github.com/2fdevs/videogular/tree/master/app

基本的に、いくつかのキューポイントを Videogular に追加し、CSS でスタイルを設定します。キュー ポイントを表示するディレクティブがあります (vg-scrub-bar-cue-points):

HTML

<videogular vg-cue-points="ctrl.config.cuePoints">
    <vg-media vg-src="ctrl.config.sources"></vg-media>

    <vg-controls>
        <vg-play-pause-button></vg-play-pause-button>
        <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-cue-points class="myCuepoints"
                                     vg-cue-points="ctrl.config.cuePoints.myCuepoints"></vg-scrub-bar-cue-points>
        </vg-scrub-bar>
        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
        <vg-volume>
            <vg-mute-button></vg-mute-button>
            <vg-volume-bar></vg-volume-bar>
        </vg-volume>
        <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>

    <vg-buffering></vg-buffering>
    <vg-overlay-play></vg-overlay-play>
</videogular>

CSS

vg-scrub-bar-cue-points.myCustomCuepoints .cue-point {
    background-color: aqua !important;
}
于 2015-09-02T18:50:51.120 に答える