如何在ng-click上获取视频中的时间

时间:2015-08-28 12:47:41

标签: angularjs videogular

在ng-click调用publishBookmark范围对象。在HTML页面呈现它有一个视频标记,所以捕获视频标记并尝试获取当前时间位置,当我点击按钮但总是得到“0”作为警报消息。

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

$scope.publishBookmark = function () {
    var location = document.getElementsByTagName("video").currentTime;
    alert(location);
};

<!--Videogular COntainer Starts  -->
<div ng-controller="videogularController as controller" class="videogular- player">
<videogular vg-theme="controller.config.theme.url"
vg-auto-play="controller.config.plugins.controls.autoPlay">
<vg-media vg-src="controller.config.sources"
vg-native-controls="false">
</vg-media>
<vg-controls vg-autohide="controller.config.plugins.controls.autoHide" 
vg-autohide-time="controller.config.plugins.controls.autoHideTime">
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ API.currentTime | date:'mm:ss':'+0000' }}</vg-time- display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ API.totalTime | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-playback-button></vg-playback-button>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
</videogular>
<!-- Videogular Container Ends -->

alert始终显示0为默认值。 角度JS的新手,需要帮助。 感谢。

1 个答案:

答案 0 :(得分:2)

在您的HTML中添加一个回调来监听控制器中的更新时间:

<videogular vg-update-time="ctrl.onUpdateTime($currentTime, $duration)">
    <!-- videogular plugins and other stuff -->
</videogular>

在您的控制器中获取当前时间:

    this.onUpdateTime = function (currentTime, totalTime) {
        this.currentTime = currentTime;
        this.totalTime = totalTime;
    };

我建议你看看演示:

它将向您展示如何使用所有Videogular功能。特别main.js档案。