Search code examples
javascriptjquerylaravelhtml5-videohtml5-audio

Trouble with currentTime when relative path used


I'm creating a homemade js player to play some audio/video from a table to a custom player like my Laravel website. When clicking on an element on the table, set the player on correct audio/video files at the position. The problem: setting currentTime cause of link to audio/video files.

If I use the complete link, my code works perfectly. If I use the relative link, my code meets some trouble. But, I can't use the complete link on my production server because Laravel's route returns 404.

I tried to use the event loadedmetadata, doesn't work.

Ex:

player_element.currentTime = 448.3

console.log('CT: '+player_element.currentTime)

returns CT: 16.352372, why?

I tried to use the event canplay to set the currentTime:

  • work under Firefox and Edge

  • doesn't work under Chrome!

Chrome console log:

returns CT: 0.

(I set a boolean var because it comes back at this currentTime while canplay and broke the play)

player_element = document.createElement('audio');
        player_element.setAttribute('src',media_path+src[divParent.data('currentSrc')].filename);
player_element.setAttribute('preload','metadata');
player_element.load();

let start_player = true;

let start_elt = divParent.data('start_element');

player_element.oncanplay = function(){

if (start_player) {

  if (player_element.currentTime == start_elt) {

   start_player = !start_player;

  }

  player_element.currentTime = start_elt;

  }

}

Solution

  • I finally find another solution: I modified the route to had access to files, my files are in the folder 'files' in 'public' folder. This wildcard will return the file if it exist else it return 404.

    Route::GET('/public/files/{any}',function($page){
      $page = '../public/files/'.$page;
      // dd('in',$page);
      if (file_exists($page)) {
        return Response::download($page);
      }else {
        abort(404);
      }
    })->where('any','.*');