미디어 요소 JS - 비디오의 남은 시간

Question

MediaElement JS를 사용하여 웹 사이트의 여러 페이지에 데모 및 설명 비디오를 여러 개 통합했습니다.

고객은 비디오의 남은 시간을 current 및 duration 비디오와 함께 표시하려고합니다. 나는 영광으로가는 길을 봤는데 (문자 적으로) 그러나 그것에 대한 해결책을 찾지 못하고있다. 아무도 나를 함께 넣어이 가이드 수 없습니다.

하십시오 help.Thanks :

Answer 1

당신은 아마 이미 문서에서 MediaElement를 플레이어에 표시되어야합니다/플러그인을, 어떤 기능 정의 할 수 있습니다다시피 : 이제

// the order of controls you want on the control bar (and other plugins below) 
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'], 

그것은 외설 ' docs에서 지우기 -하지만 Mediaelement.js에 대한 자신 만의 플러그인/기능을 추가/구현할 수도 있습니다. 예를 들어 time-feature의 소스를 살펴보고 남은 시간 플러그인을 구축 할 수있는 충분한 정보를 제공해야합니다. 기본적으로 시간 기능 코드의 복사본을 만들 수 있으며 currenttime을 feature-plugin 이름 (예 : timeleft)으로 바꾸고 현재 시간/기간 대신 남은 시간을 삽입 할 수 있습니다. 당신의 기능/플러그인을 추가 할 마지막

(function ($) { 
    // loop toggle 
    MediaElementPlayer.prototype.buildtimeleft = function (player, controls, layers, media) { 
     var t = this; 

     $('<div class="mejs-time">' + 
      '<span class="mejs-timeLeft">&#45;' + // use &minus; for a wider sign 
      (t.options.duration > 0 ? 
       mejs.Utility.secondsToTimeCode(t.options.duration, t.options.alwaysShowHours || t.media.duration > 3600, t.options.showTimecodeFrameCount, t.options.framesPerSecond || 25) : 
       ((player.options.alwaysShowHours ? '00:' : '') + (player.options.showTimecodeFrameCount ? '00:00:00' : '00:00')) 
       ) + 
      '</span>' + 
      '</div>') 
      // append it to the toolbar 
      .appendTo(controls); 

     //attach element we want to update to t (this) for easier access 
     t.timeLeft = t.controls.find('.mejs-timeLeft'); 

     // add a timeupdate event 
     media.addEventListener('timeupdate', function() { 
      if (t.timeLeft && t.media.duration) { 
       //replace with whatever time you want to insert here 
       t.timeLeft.html('&#45;' + mejs.Utility.secondsToTimeCode(t.media.duration - t.media.currentTime, t.options.alwaysShowHours || t.media.duration > 3600, t.options.showTimecodeFrameCount, t.options.framesPerSecond || 25)); 
      } 
     }, false); 
    } 
})(jQuery); 

기억 : 여기

는 mediaelement.js 생성 할 수 원하는 플러그인, 플러그인 이름 앞에 "빌드"접두사를 통지 방법의 예입니다 features: PARAM에, 인스턴스에서 당신은 MediaElement에의 생성 :

$('video').mediaelementplayer({ 
    features: ['playpause','progress','current','duration','timeleft','tracks','volume','fullscreen'] 
}); 

또한 여기에 문서에서 루프 버튼을 추가하는 방법의 예를 볼 수 있습니다

: http://mediaelementjs.com/examples/?name=loop