stv0g/tvheadend
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

html5video: display messages describing the state of the video element.

Browse source
This commit is contained in:
John Törblom 2013-07-21 21:33:14 +02:00
parent 74d424da00
commit 2d2f2dcff6
2 changed files with 55 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/webui/static/tv.css
View file

@ -91,23 +91,27 @@ body {
}
.tv-video-idle {
background-color : #000;
background-image : url(../docresources/tvheadendlogo.png);
background-repeat : no-repeat;
background-attachment: fixed;
background-position : center;
}
.tv-video-loading {
background-image : url(./img/spinner_black_bg.gif);
background-repeat : no-repeat;
background-attachment: fixed;
background-position : center;
}
.tv-video-error {
background-image : url(./img/error.png);
}
.tv-video-message {
text-align: center;
}
.tv-video-player-bwrap,
.tv-video-idle,
.tv-video-loading,
.tv-video-error {
background-repeat : no-repeat;
background-attachment: fixed;
background-position : center;
height: 100%;
}

51
src/webui/static/tv.js
View file

@ -120,7 +120,6 @@ tv.ui.VideoPlayer = Ext.extend(Ext.Panel, (function() {
initComponent: function() {
Ext.apply(this, {
baseCls : 'tv-video-player',
bodyStyle : 'background-color:#000;color:#fff',
html : '',
bufferLength: 3000, //ms
@ -137,18 +136,24 @@ tv.ui.VideoPlayer = Ext.extend(Ext.Panel, (function() {
},
render: {
fn: function() {
this.message = this.body.createChild({
tag : 'span',
cls : 'tv-video-message',
hidden: true,
html: ''
});
this.video = this.body.createChild({
tag : 'video',
width : '100%',
height : '100%',
html : "Your browser doesn't support html5 video"
});
this.source = this.video.createChild({tag: 'source'});
this.source.dom.addEventListener('error', this.error.bind(this));
this.stop();
var self = this;
this.video.dom.addEventListener('error', this.error.bind(this));
this.video.dom.addEventListener('loadeddata', function() {
setTimeout(function() {
self.play();
@ -201,25 +206,54 @@ tv.ui.VideoPlayer = Ext.extend(Ext.Panel, (function() {
return {};
},
error: function() {
var url = this.source.dom.src;
error: function(e) {
var url = this.video.dom.src;
if(url && url != document.location.href) {
this.body.removeClass('tv-video-loading');
this.body.removeClass('tv-video-idle');
this.body.addClass('tv-video-error');
this.video.hide();
var err = e.target.error;
switch (err.code) {
case err.MEDIA_ERR_ABORTED:
this.message.update('You aborted the video playback.');
break;
case err.MEDIA_ERR_NETWORK:
this.message.update('A network error caused the video ' +
'download to fail part-way.');
break;
case err.MEDIA_ERR_DECODE:
this.message.update('The video playback was aborted due to ' +
'a corruption problem or because the video ' +
'used features your browser did not support.');
break;
case err.MEDIA_ERR_SRC_NOT_SUPPORTED:
this.message.update('The video could not be loaded, either because ' +
'the server or network failed or because the ' +
'format is not supported.');
break;
default:
this.message.update('An unknown error occurred.');
break;
}
this.message.show();
}
},
stop: function() {
this.message.hide();
this.body.removeClass('tv-video-loading');
this.body.removeClass('tv-video-error');
this.body.addClass('tv-video-idle');
this.source.dom.src = '';
this.video.dom.src = '';
this.video.dom.load();
},
play: function() {
this.message.hide();
this.body.removeClass('tv-video-loading');
this.body.removeClass('tv-video-idle');
this.body.removeClass('tv-video-error');
@ -238,11 +272,14 @@ tv.ui.VideoPlayer = Ext.extend(Ext.Panel, (function() {
this.video.hide();
this.stop();
this.message.update('Loading...');
this.message.show();
this.body.removeClass('tv-video-idle');
this.body.removeClass('tv-video-error');
this.body.addClass('tv-video-loading');
this.source.dom.src = this._getUrl(chid, params);
this.video.dom.src = this._getUrl(chid, params);
this.video.dom.load();
}
};