video.dev 源码解析

知识回顾

//播放的时候会回调改方法 timeupdate。myPlayer=vjs.players['my-video'];myPlayer.on("timeupdate", function(){console.log("start");});//获取总时长 vjs.players['my-video'].duration();//获取当前时长 vjs.players['my-video'].currentTime();

myPlayer=vjs.players['my-video'];

开始 播放：myPlayer.play();

结束 播放：myPlayer.pause();

设置 播放进度：myPlayer.currentTime(120);

源码

/** * Displays the current time * @param {vjs.Player|Object} player * @param {Object=} options * @constructor */vjs.CurrentTimeDisplay = vjs.Component.extend({  /** @constructor */  init: function(player, options){    vjs.Component.call(this, player, options);    player.on('timeupdate', vjs.bind(this, this.updateContent));  }});vjs.CurrentTimeDisplay.prototype.createEl = function(){  var el = vjs.Component.prototype.createEl.call(this, 'div', {    className: 'vjs-current-time vjs-time-controls vjs-control'  });  this.contentEl_ = vjs.createEl('div', {    className: 'vjs-current-time-display',    innerHTML: '<span class="vjs-control-text">Current Time </span>' + '0:00', // label the current time for screen reader users    'aria-live': 'off' // tell screen readers not to automatically read the time as it changes  });  el.appendChild(this.contentEl_);  return el;};vjs.CurrentTimeDisplay.prototype.updateContent = function(){  // Allows for smooth scrubbing, when player can't keep up.  var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();  this.contentEl_.innerHTML = '<span class="vjs-control-text">Current Time </span>' + vjs.formatTime(time, this.player_.duration());};

//鼠标移动进度条代码 

vjs.SeekBar.prototype.onMouseMove = function(event){  var newTime = this.calculateDistance(event) * this.player_.duration();  // Don't let video end while scrubbing.  if (newTime == this.player_.duration()) { newTime = newTime - 0.1; }  // Set new time (tell player to seek to new time)   this.player_.currentTime(newTime);  this.player_.play();  };

进度条 控制代码：

vjs.Slider.prototype.onMouseUp = function() {  vjs.unblockTextSelection();  vjs.off(document, 'mousemove', this.boundEvents.move, false);  vjs.off(document, 'mouseup', this.boundEvents.end, false);  vjs.off(document, 'touchmove', this.boundEvents.move, false);  vjs.off(document, 'touchend', this.boundEvents.end, false);  this.update();};vjs.Slider.prototype.update = function(){  // In VolumeBar init we have a setTimeout for update that pops and update to the end of the  // execution stack. The player is destroyed before then update will cause an error  if (!this.el_) return;  // If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.  // On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.  // var progress =  (this.player_.scrubbing) ? this.player_.getCache().currentTime / this.player_.duration() : this.player_.currentTime() / this.player_.duration();  var barProgress,      progress = this.getPercent(),        handle = this.handle,      bar = this.bar;  // Protect against no duration and other division issues  if (isNaN(progress)) { progress = 0; }  barProgress = progress;  // If there is a handle, we need to account for the handle in our calculation for progress bar  // so that it doesn't fall short of or extend past the handle.  //change by david  if (false) {    var box = this.el_,        boxWidth = box.offsetWidth,        handleWidth = handle.el().offsetWidth,        // The width of the handle in percent of the containing box        // In IE, widths may not be ready yet causing NaN        handlePercent = (handleWidth) ? handleWidth / boxWidth : 0,        // Get the adjusted size of the box, considering that the handle's center never touches the left or right side.        // There is a margin of half the handle's width on both sides.        boxAdjustedPercent = 1 - handlePercent,        // Adjust the progress that we'll use to set widths to the new adjusted box width        adjustedProgress = progress * boxAdjustedPercent;    // The bar does reach the left side, so we need to account for this in the bar's width    barProgress = adjustedProgress + (handlePercent / 2);    // Move the handle from the left based on the adjected progress    handle.el().style.left = vjs.round(adjustedProgress * 100, 2) + '%';  }  // Set the new bar width  bar.el().style.width = vjs.round(barProgress * 100, 2) + '%';};