jplayer / jPlayer

jPlayer : HTML5 Audio & Video for jQuery
http://jplayer.org/
Other
4.6k stars 1.47k forks source link

Seekbar not working in chorme and firefox version : 2.9.2 #345

Open shivasingh0101 opened 8 years ago

shivasingh0101 commented 8 years ago

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?

erikmartinessanches commented 8 years ago

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.

1khushigrewal commented 8 years ago

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.

GuyPaddock commented 7 years ago

Any update on this issue?

sanjay-wagento commented 7 years ago

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

aramboyajyan commented 6 years ago

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.

SAFatemi commented 3 years ago

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

loukltd commented 3 years ago

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);
  });