512 lines
No EOL
15 KiB
JavaScript
512 lines
No EOL
15 KiB
JavaScript
Ox.VideoPlayer = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
height: 192,
|
|
position: 0,
|
|
timeline: '',
|
|
url: '',
|
|
width: 256
|
|
})
|
|
.options(options || {})
|
|
.css({
|
|
position: 'absolute',
|
|
width: self.options.width + 'px',
|
|
height: self.options.height + 'px'
|
|
//background: 'red'
|
|
})
|
|
.bind({
|
|
mouseenter: showControls,
|
|
mouseleave: hideControls
|
|
});
|
|
|
|
self.buffered = [];
|
|
self.controlsTimeout;
|
|
self.dragTimeout;
|
|
|
|
self.barHeight = 16;
|
|
self.outerBarWidth = self.options.width - 96;
|
|
self.innerBarWidth = self.outerBarWidth - self.barHeight;
|
|
self.markerOffset = -self.innerBarWidth - 8;
|
|
|
|
self.$video = Ox.VideoElement({
|
|
height: self.options.height,
|
|
paused: true,
|
|
url: self.options.url,
|
|
width: self.options.width
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
})
|
|
.bindEvent({
|
|
loadedmetadata: loadedmetadata,
|
|
paused: function(data) {
|
|
// called when playback ends
|
|
/*
|
|
self.$playButton.toggleTitle();
|
|
self.$positionMarkerRing.css({
|
|
borderColor: 'rgba(255, 255, 255, 0.5)'
|
|
});
|
|
*/
|
|
},
|
|
playing: function(data) {
|
|
setPosition(data.position);
|
|
},
|
|
progress: function(data) {
|
|
var buffered = data.video.buffered;
|
|
for (var i = 0; i < buffered.length; i++) {
|
|
self.buffered[i] = [buffered.start(i), buffered.end(i)];
|
|
// fixme: firefox weirdness
|
|
if (self.buffered[i][0] > self.buffered[i][1]) {
|
|
self.buffered[i][0] = 0;
|
|
}
|
|
//Ox.print(i, self.buffered[i][0], self.buffered[i][1])
|
|
}
|
|
self.$buffered.attr({
|
|
src: getBufferedImageURL()
|
|
})
|
|
//self.$bar.html(Ox.formatDuration(data.video.buffered.end(data.video.buffered.length - 1)))
|
|
},
|
|
seeked: hideLoadingIcon,
|
|
seeking: showLoadingIcon
|
|
})
|
|
.appendTo(that);
|
|
|
|
if (self.options.title) {
|
|
self.$titlebar = $('<div>')
|
|
.css({
|
|
position: 'absolute',
|
|
width: self.options.width + 'px',
|
|
height: '15px',
|
|
paddingTop: '1px',
|
|
textAlign: 'center'
|
|
})
|
|
.css({
|
|
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
|
|
})
|
|
.css({
|
|
backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
|
|
})
|
|
.html(self.options.title)
|
|
.appendTo(that.$element);
|
|
}
|
|
|
|
self.$loadingIcon = $('<img>')
|
|
.attr({
|
|
src: Ox.UI.getImagePath('symbolLoadingAnimated.svg').replace('/classic/', '/modern/')
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
left: parseInt(self.options.width / 2) - 16 + 'px', // fixme
|
|
top: parseInt(self.options.height / 2) - 16 + 'px',
|
|
width: '32px',
|
|
height: '32px'
|
|
})
|
|
.appendTo(that.$element);
|
|
|
|
self.$controls = Ox.Bar({
|
|
size: self.barHeight
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
width: self.options.width + 'px',
|
|
marginTop: self.options.height - self.barHeight + 'px',
|
|
})
|
|
.css({
|
|
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
|
|
})
|
|
.css({
|
|
backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
|
|
})
|
|
.appendTo(that);
|
|
|
|
self.$buttons = Ox.Element()
|
|
.css({
|
|
float: 'left',
|
|
width: '48px'
|
|
})
|
|
.appendTo(self.$controls);
|
|
|
|
self.$playButton = Ox.Button({
|
|
style: 'symbol',
|
|
title: [
|
|
{id: 'play', title: 'play'},
|
|
{id: 'pause', title: 'pause'}
|
|
],
|
|
tooltip: ['Play', 'Pause'],
|
|
type: 'image'
|
|
})
|
|
.css({
|
|
borderRadius: 0
|
|
})
|
|
.bindEvent('click', togglePlay)
|
|
.appendTo(self.$buttons);
|
|
|
|
self.$muteButton = Ox.Button({
|
|
style: 'symbol',
|
|
title: [
|
|
{id: 'mute', title: 'mute'},
|
|
{id: 'unmute', title: 'unmute'}
|
|
],
|
|
tooltip: ['Mute', 'Unmute'],
|
|
type: 'image'
|
|
})
|
|
.css({
|
|
borderRadius: 0
|
|
})
|
|
.bindEvent('click', toggleMute)
|
|
.appendTo(self.$buttons);
|
|
|
|
self.$menuButton = Ox.Button({
|
|
id: 'select',
|
|
style: 'symbol',
|
|
title: 'select',
|
|
tooltip: ['Menu'],
|
|
type: 'image'
|
|
})
|
|
.css({
|
|
borderRadius: 0
|
|
})
|
|
.bindEvent('click', togglePlay)
|
|
.appendTo(self.$buttons);
|
|
|
|
self.$outerBar = Ox.Element()
|
|
.css({
|
|
float: 'left',
|
|
width: self.outerBarWidth + 'px',
|
|
height: self.barHeight + 'px',
|
|
background: 'rgba(0, 0, 0, 0.75)',
|
|
borderRadius: self.barHeight / 2 + 'px'
|
|
})
|
|
/*
|
|
.css({
|
|
backgroundImage: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(64, 64, 64, 0.75))'
|
|
})
|
|
.css({
|
|
backgroundImage: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(64, 64, 64, 0.75))'
|
|
})
|
|
*/
|
|
.appendTo(self.$controls);
|
|
|
|
self.$innerBar = Ox.Element()
|
|
.css({
|
|
float: 'left',
|
|
width: self.innerBarWidth + 'px',
|
|
height: self.barHeight + 'px',
|
|
marginLeft: self.barHeight / 2 + 'px'
|
|
})
|
|
.appendTo(self.$outerBar);
|
|
|
|
self.$timeline = $('<img>')
|
|
.attr({
|
|
src: self.options.timeline
|
|
})
|
|
.css({
|
|
float: 'left',
|
|
width: self.innerBarWidth + 'px',
|
|
height: self.barHeight + 'px'
|
|
})
|
|
.appendTo(self.$innerBar.$element);
|
|
|
|
self.$buffered = $('<img>')
|
|
.attr({
|
|
src: getBufferedImageURL()
|
|
})
|
|
.css({
|
|
float: 'left',
|
|
marginLeft: -self.innerBarWidth + 'px',
|
|
width: self.innerBarWidth + 'px',
|
|
height: self.barHeight + 'px',
|
|
})
|
|
.appendTo(self.$innerBar.$element);
|
|
|
|
self.$positionMarker = $('<div>')
|
|
.css({
|
|
float: 'left',
|
|
width: '14px',
|
|
height: '14px',
|
|
marginLeft: self.markerOffset + 'px',
|
|
border: '1px solid rgba(0, 0, 0, 0.5)',
|
|
borderRadius: '8px'
|
|
})
|
|
.append(
|
|
self.$positionMarkerRing = $('<div>')
|
|
.css({
|
|
width: '10px',
|
|
height: '10px',
|
|
border: '2px solid rgba(255, 255, 255, 0.5)',
|
|
borderRadius: '7px',
|
|
})
|
|
.append(
|
|
$('<div>')
|
|
.css({
|
|
width: '8px',
|
|
height: '8px',
|
|
border: '1px solid rgba(0, 0, 0, 0.5)',
|
|
borderRadius: '5px',
|
|
})
|
|
)
|
|
)
|
|
.appendTo(self.$outerBar.$element);
|
|
|
|
self.$trackInterface = Ox.Element()
|
|
.css({
|
|
float: 'left',
|
|
width: self.outerBarWidth + 'px',
|
|
height: self.barHeight + 'px',
|
|
marginLeft: - self.outerBarWidth + 'px'
|
|
})
|
|
.appendTo(self.$controls);
|
|
|
|
self.$tooltip = Ox.Tooltip({
|
|
animate: false
|
|
});
|
|
|
|
self.$position = $('<div>')
|
|
.css({
|
|
float: 'left',
|
|
width: '44px',
|
|
height: '12px',
|
|
padding: '2px',
|
|
fontSize: '9px',
|
|
textAlign: 'center'
|
|
})
|
|
.html(Ox.formatDuration(self.options.position))
|
|
.bind({
|
|
click: function() {
|
|
if (!self.$video.paused()) {
|
|
self.wasPlaying = true;
|
|
self.$video.pause();
|
|
self.$playButton.toggleTitle();
|
|
}
|
|
self.$position.hide();
|
|
self.$positionInput
|
|
.options({
|
|
value: Ox.formatDuration(self.options.position)
|
|
})
|
|
.show()
|
|
.focusInput(false);
|
|
}
|
|
})
|
|
.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 getPosition(e) {
|
|
// fixme: no offsetX in firefox???
|
|
if ($.browser.mozilla) {
|
|
//Ox.print(e, e.layerX - 56)
|
|
return Ox.limit(
|
|
(e.layerX - 48 - self.barHeight / 2) / self.innerBarWidth * self.duration,
|
|
0, self.duration
|
|
);
|
|
} else {
|
|
/*Ox.print(e.offsetX, Ox.limit(
|
|
(e.offsetX - self.barHeight / 2) / self.innerBarWidth * self.duration,
|
|
0, self.duration
|
|
))*/
|
|
return Ox.limit(
|
|
(e.offsetX - self.barHeight / 2) / self.innerBarWidth * self.duration,
|
|
0, self.duration
|
|
);
|
|
}
|
|
}
|
|
|
|
function getBufferedImageURL() {
|
|
var width = self.innerBarWidth,
|
|
height = self.barHeight,
|
|
$canvas = $('<canvas>')
|
|
.attr({
|
|
width: width,
|
|
height: height,
|
|
}),
|
|
canvas = $canvas[0],
|
|
context = canvas.getContext('2d');
|
|
//Ox.print(width, height)
|
|
context.fillStyle = 'rgba(255, 0, 0, 0.5)';
|
|
context.fillRect(0, 0, width, height);
|
|
var imageData = context.getImageData(0, 0, width, height),
|
|
data = imageData.data;
|
|
|
|
self.buffered.forEach(function(range) {
|
|
var left = Math.round(range[0] * width / self.duration),
|
|
right = Math.round(range[1] * width / self.duration);
|
|
Ox.loop(left, right, function(x) {
|
|
Ox.loop(height, function(y) {
|
|
index = x * 4 + y * 4 * width;
|
|
data[index + 3] = 0;
|
|
});
|
|
});
|
|
});
|
|
context.putImageData(imageData, 0, 0);
|
|
return canvas.toDataURL();
|
|
}
|
|
|
|
function hideControls() {
|
|
Ox.print('!!!!!!', self.$positionInput.hasFocus())
|
|
if (!self.$positionInput.hasFocus()) {
|
|
self.controlsTimeout = setTimeout(function() {
|
|
// fixme: use class
|
|
self.$titlebar.animate({
|
|
opacity: 0
|
|
}, 250);
|
|
self.$controls.animate({
|
|
opacity: 0
|
|
}, 250);
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
function hideLoadingIcon() {
|
|
self.$loadingIcon.animate({
|
|
opacity: 0
|
|
}, 0);
|
|
}
|
|
|
|
function loadedmetadata(data) {
|
|
//self.$position.html(Ox.formatDuration(data.video.duration))
|
|
//Ox.print('!!!!', data.video.width, data.video.height, data.video.videoWidth, data.video.videoHeight)
|
|
self.duration = data.video.duration;
|
|
//Ox.print('DURATION', Ox.formatDuration(self.duration));
|
|
hideLoadingIcon();
|
|
that.gainFocus().bindEvent({
|
|
key_space: function() {
|
|
self.$playButton.toggleTitle();
|
|
togglePlay();
|
|
}
|
|
});
|
|
self.$trackInterface
|
|
.bind({
|
|
mousedown: mousedownTrack,
|
|
mouseleave: mouseleaveTrack,
|
|
mousemove: mousemoveTrack,
|
|
})
|
|
.bindEvent({
|
|
drag: dragTrack,
|
|
dragpause: dragpauseTrack,
|
|
dragend: dragpauseTrack
|
|
});
|
|
}
|
|
|
|
function dragTrack(e) {
|
|
setPosition(getPosition(e));
|
|
if (self.dragTimeout) {
|
|
clearTimeout(self.dragTimeout);
|
|
self.dragTimeout = 0;
|
|
}
|
|
}
|
|
|
|
function dragpauseTrack(e) {
|
|
self.$video.position(self.options.position);
|
|
}
|
|
|
|
function mousedownTrack(e) {
|
|
setPosition(getPosition(e));
|
|
self.$video.position(self.options.position);
|
|
}
|
|
|
|
function mouseleaveTrack(e) {
|
|
self.$tooltip.hide();
|
|
}
|
|
|
|
function mousemoveTrack(e) {
|
|
self.$tooltip.options({
|
|
title: Ox.formatDuration(getPosition(e))
|
|
}).show(e.clientX, e.clientY);
|
|
}
|
|
|
|
function showControls() {
|
|
clearTimeout(self.controlsTimeout);
|
|
self.$titlebar.animate({
|
|
opacity: 1
|
|
}, 250);
|
|
self.$controls.animate({
|
|
opacity: 1
|
|
}, 250);
|
|
}
|
|
|
|
function setPosition(position) {
|
|
self.options.position = position;
|
|
//Ox.print(-self.barWidth - 4 + self.barWidth * position / self.duration)
|
|
self.$positionMarker.css({
|
|
marginLeft: self.innerBarWidth * position / self.duration + self.markerOffset + 'px',
|
|
});
|
|
self.$position.html(Ox.formatDuration(position));
|
|
}
|
|
|
|
function showLoadingIcon() {
|
|
self.$loadingIcon.animate({
|
|
opacity: 1
|
|
}, 0);
|
|
}
|
|
function toggleMute() {
|
|
self.$video.toggleMute();
|
|
}
|
|
|
|
function togglePlay() {
|
|
self.$video.togglePlay();
|
|
self.$positionMarkerRing.css({
|
|
borderColor: 'rgba(255, 255, 255, ' + (self.$video.paused() ? 0.5 : 1) + ')'
|
|
});
|
|
}
|
|
|
|
return that;
|
|
|
|
}; |