需要将JQuery Ui滑块控制为HTML5视频的搜索栏

时间:2015-06-24 07:59:37

标签: jquery html5 jquery-ui

我正在尝试控制hbar5视频的搜索栏。我正在使用Jquery Ui滑块。我正在使用播放按钮来启动此视频。但是不明白如何用视频时间更新搜索栏?

我的代码: HTML:

<video class="vdo" width="700" id="videoShow" style="margin-bottom: 4px;" ng-src="videos/test.mp4" >
</video>
<div id="master" style="width:700;height:8px;"></div>
<span id="changeTOpause"  class="glyphicon glyphicon-play" aria-hidden="true" onclick="playVideo()"></span>

JQuery的:

function playVideo()
{
    videoShow.play();
}
$('#master').slider({
        range: "max",
        min: 0,
        max: parseInt(video.duration, 10),
        value: 0,
        slide: function (event, ui) {
            video.currentTime = ui.value;
        }
    });

1 个答案:

答案 0 :(得分:1)

找到适合我的解决方案:

function playVideo()
    {
        videoShow.play();
    }

    $('#videoShow').on({
        canplaythrough: function() {
            var video = this;
            $('#master').slider({
                range: "max",
                min: 0,
                max: parseInt(video.duration, 10),
                value: 0,
                slide: function (event, ui) {
                    video.currentTime = ui.value;
                }
            });
        },
        timeupdate: function() {
            $('#master').slider('value', this.currentTime)
        }
    });