From 8e52b59d9d767a55517b5f3b876f3dc98402c7ac Mon Sep 17 00:00:00 2001 From: Arun Isaac Date: Wed, 5 Jul 2017 19:26:26 +0530 Subject: Use video element for thumbnail and playing/autoplaying functions. * viewtube.js (option): Remove "autoplay". (createMyElement): Remove handling of "play" and "autoplay" actions. (createMyPlayer): Remove panel "Autoplay" button. Do not create separate img element for thumbnail. --- viewtube.js | 78 +++++++++++++------------------------------------------------ 1 file changed, 16 insertions(+), 62 deletions(-) diff --git a/viewtube.js b/viewtube.js index 7bf2b3b..bf26459 100644 --- a/viewtube.js +++ b/viewtube.js @@ -30,7 +30,7 @@ // Player var player = {}; - var option = {'autoplay': false, 'definition': 'HD', 'container': 'MP4', 'dash': false, 'direct': false, 'widesize': false, 'fullsize': false}; + var option = {'definition': 'HD', 'container': 'MP4', 'dash': false, 'direct': false, 'widesize': false, 'fullsize': false}; var mimetypes = { 'MPEG': 'video/mpeg', 'MP4': 'video/mp4', @@ -83,7 +83,7 @@ if (target == 'video') { obj.addEventListener('change', function() { player['videoPlay'] = this.value; - if (player['isPlaying']) playMyVideo(option['autoplay']); + playMyVideo(); }, false); } } @@ -93,14 +93,6 @@ case 'close': page.body.removeChild(target); break; - case 'play': - playMyVideo(!player['isPlaying']); - break; - case 'autoplay': - option['autoplay'] = !option['autoplay']; - styleButton('buttonAutoplay', option['autoplay']); - playMyVideo(option['autoplay'] && (!player['isPlaying'])); - break; case 'dash': option['dash'] = !option['dash']; styleButton('buttonDASH', option['dash']) @@ -187,13 +179,6 @@ if (videoCode == 'Direct Video Link') styleMyElement(player['videoItem'], {color: '#00C0C0'}); } - /* Panel Autoplay Button */ - player['buttonAutoplay'] = createMyElement('div', 'AP', 'click', 'autoplay', ''); - player['buttonAutoplay'].title = '{Autoplay: click to enable/disable auto playback on page load}'; - styleMyElement(player['buttonAutoplay'], {height: panelItemHeight + 'px', border: '1px solid #CCCCCC', borderRadius: '3px', padding: '0px 5px', display: 'inline', color: '#CCCCCC', fontSize: '12px', cursor: 'pointer'}); - if (option['autoplay']) styleMyElement(player['buttonAutoplay'], {color: '#008080', textShadow: '0px 1px 1px #CCCCCC'}); - player['playerPanel'].appendChild(player['buttonAutoplay']); - /* Panel DASH Button */ player['buttonDASH'] = createMyElement('div', 'MD', 'click', 'dash', ''); player['buttonDASH'].title = '{MPEG-DASH: click to enable/disable DASH playback using the HTML5 video player (experimental)}'; @@ -220,27 +205,12 @@ styleMyElement(player['playerContent'], {width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px', position: 'relative', color: '#AD0000', backgroundColor: '#000000', fontSize: '14px', fontWeight: 'bold', textAlign: 'center'}); player['playerWindow'].appendChild(player['playerContent']); - /* The Video Thumbnail */ - if (player['videoThumb']) { - player['contentImage'] = createMyElement('img', player['videoThumb'], 'click', 'play', ''); - player['contentImage'].title = '{Click to start video playback}'; - styleMyElement(player['contentImage'], {maxWidth: '100%', maxHeight: '100%', position: 'absolute', top: '0px', left: '0px', right: '0px', bottom: '0px', margin: 'auto', border: '0px', cursor: 'pointer'}); - player['contentImage'].addEventListener('load', function() { - if (this.width/this.height >= player['contentWidth']/player['contentHeight']) { - this.style.width = '100%'; - } - else { - this.style.height = '100%'; - } - }); - } - /* Resize My Player */ if (option['widesize']) resizeMyPlayer('widesize'); if (option['fullsize']) resizeMyPlayer('fullsize'); /* Play My Video */ - playMyVideo(option['autoplay']); + playMyVideo(); } promise = browser.storage.local.get(Object.keys(option)); promise.then(onGot, onGot); @@ -295,25 +265,17 @@ player['contentVideo'].appendChild(player['contentAudio']); } - function playMyVideo(play) { - player['isPlaying'] = play; + function playMyVideo() { modifyMyElement(player['playerContent'], 'div', '', true); - if (play) { - if (player['videoList'][player['videoPlay']] == 'DASH') - playDASHwithHTML5(); - else - player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay']], '', '', ''); - player['contentVideo'].width = player['contentWidth']; - player['contentVideo'].height = player['contentHeight']; - player['contentVideo'].poster = player['videoThumb']; - styleMyElement(player['contentVideo'], {position: 'relative', width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'}); - player['playerContent'].appendChild(player['contentVideo']); - } - else { - if (player['contentImage']) - player['playerContent'].appendChild(player['contentImage']); - else showMyMessage('!thumb'); - } + if (player['videoList'][player['videoPlay']] == 'DASH') + playDASHwithHTML5(); + else + player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay']], '', '', ''); + player['contentVideo'].width = player['contentWidth']; + player['contentVideo'].height = player['contentHeight']; + player['contentVideo'].poster = player['videoThumb']; + styleMyElement(player['contentVideo'], {position: 'relative', width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'}); + player['playerContent'].appendChild(player['contentVideo']); } function resizeMyPlayer(size) { @@ -347,9 +309,6 @@ if (!player['resizeListener']) player['resizeListener'] = function() {resizeMyPlayer('fullsize')}; page.win.addEventListener('resize', player['resizeListener'], false); player['isFullsize'] = true; - if (player['isPlaying']) { - if (player['contentVideo'] && player['contentVideo'].paused) player['contentVideo'].play(); - } } } else { @@ -364,9 +323,6 @@ styleMyElement(page.body.parentNode, {overflow: 'auto'}); page.win.removeEventListener('resize', player['resizeListener'], false); player['isFullsize'] = false; - if (player['isPlaying']) { - if (player['contentVideo'] && player['contentVideo'].paused) player['contentVideo'].play(); - } } break; } @@ -386,11 +342,9 @@ player['contentWidth'] = playerWidth; player['contentHeight'] = playerHeight - player['panelHeight'] - player['panelPadding'] * 2; styleMyElement(player['playerContent'], {width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'}); - if (player['isPlaying']) { - player['contentVideo'].width = player['contentWidth']; - player['contentVideo'].height = player['contentHeight']; - styleMyElement(player['contentVideo'], {width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'}); - } + player['contentVideo'].width = player['contentWidth']; + player['contentVideo'].height = player['contentHeight']; + styleMyElement(player['contentVideo'], {width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'}); } function cleanMyContent(content, unesc) { -- cgit v1.2.3