')
+ .css({
+ width: '10px',
+ height: '10px',
+ border: '2px solid rgba(255, 255, 255, 0.5)',
+ borderRadius: '7px',
+ })
+ .append(
+ $('
')
+ .css({
+ width: '8px',
+ height: '8px',
+ border: '1px solid rgba(0, 0, 0, 0.5)',
+ borderRadius: '5px',
+ })
+ )
+ )
+ .appendTo(self.$outerTrack.$element);
+
+ self.$trackInterface = Ox.Element()
+ .css({
+ float: 'left',
+ width: self.outerTrackWidth + 'px',
+ height: self.barHeight + 'px',
+ marginLeft: - self.outerTrackWidth + 'px'
+ })
+ .appendTo(self.$controls);
+
+ self.$tooltip = Ox.Tooltip({
+ animate: false
+ });
+
+ } else if (control == 'space') {
+
+ } else if (control == 'position') {
+
+ self.$position = $('
')
+ .addClass('foo')
+ .css({
+ float: 'left',
+ width: '44px',
+ height: '12px',
+ padding: '2px',
+ fontSize: '9px',
+ textAlign: 'center'
+ })
+ .html(Ox.formatDuration(self.options.position))
+ .bind({
+ click: function() {
+ if (!self.options.paused) {
+ self.wasPlaying = true;
+ togglePaused();
+ //togglePlayIcon();
+ self.$playButton.toggleTitle();
+ }
+ self.$position.hide();
+ self.$positionInput
+ .options({
+ value: Ox.formatDuration(self.options.position)
+ })
+ .show()
+ .focusInput(false);
+ }
+ })
+ .appendTo(self.$controls);
+
+ self.$positionInput = Ox.Input({
+ value: Ox.formatDuration(self.options.position),
+ width: 48
+ })
+ .css({
+ float: 'left',
+ background: 'rgba(0, 0, 0, 0)',
+ MozBoxShadow: '0 0 0',
+ WebkitBoxShadow: '0 0 0'
+ })
+ .bindEvent({
+ blur: submitPositionInput,
+ change: submitPositionInput,
+ //submit: submitPositionInput
+ })
+ .hide()
+ .appendTo(self.$controls);
+
+ self.$positionInput.children('input').css({
+ width: '42px',
+ height: '16px',
+ padding: '0 3px 0 3px',
+ border: '0px',
+ borderRadius: '8px',
+ fontSize: '9px',
+ color: 'rgb(255, 255, 255)'
+ })
+ .css({
+ background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
+ })
+ .css({
+ background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
+ });
+
}
- })
- .appendTo(self.$controls.$element)
- self.$positionInput = Ox.Input({
- value: Ox.formatDuration(self.options.position),
- width: 48
- })
- .css({
- float: 'left',
- background: 'rgba(0, 0, 0, 0)',
- MozBoxShadow: '0 0 0',
- WebkitBoxShadow: '0 0 0'
- })
- .bindEvent({
- blur: submitPositionInput,
- change: submitPositionInput,
- //submit: submitPositionInput
- })
- .hide()
- .appendTo(self.$controls.$element);
-
- self.$positionInput.children('input').css({
- width: '42px',
- height: '16px',
- padding: '0 3px 0 3px',
- border: '0px',
- borderRadius: '8px',
- fontSize: '9px',
- color: 'rgb(255, 255, 255)'
- })
- .css({
- background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
- })
- .css({
- background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
});
- function submitPositionInput() {
- self.$positionInput.hide();
- self.$position.html('').show();
- setPosition(parsePositionInput(self.$positionInput.options('value')));
- self.$video.position(self.options.position);
- if (self.wasPlaying) {
- self.$video.play();
- self.$playButton.toggleTitle();
- self.wasPlaying = false;
- }
}
- function parsePositionInput(str) {
- var position,
- split = str.split(':').reverse();
- while (split.length > 3) {
- split.pop();
- }
- position = split.reduce(function(prev, curr, i) {
- return prev + (parseFloat(curr) || 0) * Math.pow(60, i);
- }, 0)
- return Ox.limit(position, 0, self.duration);
+ function ended() {
+
}
- function getPosition(e) {
- // fixme: no offsetX in firefox???
- if ($.browser.mozilla) {
- //Ox.print(e, e.layerX - 56)
- return Ox.limit(
- (e.layerX - 48 - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
- 0, self.duration
- );
+ function getVideoCSS() {
+ var playerWidth = self.options.width,
+ playerHeight = self.options.height,
+ playerRatio = playerWidth / playerHeight,
+ videoWidth = self.video.videoWidth,
+ videoHeight = self.video.videoHeight,
+ videoRatio = videoWidth / videoHeight,
+ videoIsWider = videoRatio > playerRatio,
+ width, height;
+ if (self.options.scaleToFill) {
+ width = videoIsWider ? playerHeight * videoRatio : playerWidth;
+ height = videoIsWider ? playerHeight : playerWidth / videoRatio;
} else {
- /*Ox.print(e.offsetX, Ox.limit(
- (e.offsetX - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
- 0, self.duration
- ))*/
- return Ox.limit(
- (e.offsetX - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
- 0, self.duration
- );
+ width = videoIsWider ? playerWidth : playerHeight * videoRatio;
+ height = videoIsWider ? playerWidth / videoRatio : playerHeight;
}
- }
+ width = Math.round(width);
+ height = Math.round(height);
+ return {
+ width: width + 'px',
+ height: height + 'px',
+ marginLeft: parseInt((playerWidth - width) / 2),
+ marginTop: parseInt((playerHeight - height) / 2)
+ };
+ }
function getBufferedImageURL() {
var width = self.innerTrackWidth,
- height = self.controlsHeight,
+ height = self.barHeight,
$canvas = $('