如何在特定时间在 videogular 时间线上应用 css 标记
How to apply css mark on videogular time line at specific time
我有一个 html 播放器应用程序,用户可以在其中搜索一个词,然后用这些词 occurs.On 单击特定句子 html 播放器开始的时间填充结果从那个位置播放。
但是有了这个功能,我想在我们在 youtube 中看到的 videogular 时间线上添加一些标记。
与 youtube 一样,您可以在特定时间看到黄色标记。同样,我希望在特定位置显示 css 标记。
在右侧搜索框上,如果在 19:00 分钟处有一个句子,那么我想在 19:00 ofvideogular 时间轴上设置黄色标记。
搜索按钮的点击事件:
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>
提前致谢。
这里有一个演示: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;
}
我有一个 html 播放器应用程序,用户可以在其中搜索一个词,然后用这些词 occurs.On 单击特定句子 html 播放器开始的时间填充结果从那个位置播放。 但是有了这个功能,我想在我们在 youtube 中看到的 videogular 时间线上添加一些标记。
与 youtube 一样,您可以在特定时间看到黄色标记。同样,我希望在特定位置显示 css 标记。
在右侧搜索框上,如果在 19:00 分钟处有一个句子,那么我想在 19:00 ofvideogular 时间轴上设置黄色标记。
搜索按钮的点击事件:
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>
提前致谢。
这里有一个演示: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;
}