jPlayer icon indicating copy to clipboard operation
jPlayer copied to clipboard

Seekbar not working in chorme and firefox version : 2.9.2

Open shivasingh0101 opened this issue 9 years ago • 7 comments

When I supply the sample url http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v it s working but when supply my own server media url it is not working and the actual issue is getting width:0% for div tag with class jp-seek-bar. I have checked streaming the media with 200 and 206 response codes also. Can anybody suggest me what im doing wrong?

shivasingh0101 avatar Jan 04 '16 06:01 shivasingh0101

I have the same problem. jp-seek-bar progress remains at width: 0% and also <div class="jp-play-bar progress-bar progress-bar-success" style="width: 0%;"> Using jQuery 2.2.0, playlist and own mp3 files.

erikmartinessanches avatar Jul 13 '16 13:07 erikmartinessanches

Anyone got the solution of problem jp-seek-bar class getting the style width: 0% constantly while media playing.Problem seems to be occuring in _updateInterface function if we comment out this.css.jq.seekBar.width(this.status.seekPercent+"%"); then working tracks continues to use jp-seek-bar normally but width that constantly remaining 0% gets solved.

1khushigrewal avatar Oct 09 '16 05:10 1khushigrewal

Any update on this issue?

GuyPaddock avatar Jan 13 '17 08:01 GuyPaddock

I set Response.AddHeader("Accept-Ranges", "bytes"); and it works

sanjay-wagento avatar Aug 04 '17 07:08 sanjay-wagento

I run into the same issue; adding Accept-Ranges: bytes solved the problem. Thanks @sanjay-wagento!

To explain it for anyone else who encounters this: Accept-Ranges: bytes should be set in response header for downloading the file. I didn't test this enough, but it is possible that the issue happens only when the file is not linked directly on the server, but is served via code.

aramboyajyan avatar Mar 15 '18 19:03 aramboyajyan

Adding for PHP: header('Accept-Ranges: bytes');

SAFatemi avatar Dec 04 '20 13:12 SAFatemi

I posted an issue regarding this but I found adding the following function fixed my code

 // User clicks
  $(".jp-seek-bar").click(function(e) {
    var offset = $(this).offset();
    var totalWidth = $(this).outerWidth();
    var left = e.pageX - offset.left;
    var totalDuration = $("#jquery_jplayer_1").data("jPlayer").status.duration;
    var currentPosition = (left * totalDuration) / totalWidth;
    // Move player to current position
    $("#jquery_jplayer_1").jPlayer("play", currentPosition);
  });

loukltd avatar Jun 21 '21 08:06 loukltd