I am trying to control html5 video for seekbar. I am using Jquery Ui slider. I am using a play button to start this video. But dont understand how to update seekbar with video time?
My code : 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;
}
});
Got a solution which works for me :
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)
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.