diff --git a/README.md b/README.md index e23ff67..de844cc 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Just specify version to be within: ``` "videojs-ass": ">=0.3.0 < 0.5.0" ``` -for bower or npm whichever you perfer using. +for bower or npm whichever you prefer using. ## Usage diff --git a/example.html b/example.html index ca31be7..4d3d2c8 100644 --- a/example.html +++ b/example.html @@ -32,13 +32,28 @@ nativeControlsForTouch: false, width: 640, height: 360, - plugins: { - ass: { - 'src': ["subs/os.ass"] - } - }, + // fluid: true, + // plugins: { + // ass: { + // 'src': ["subs/os.ass"], + // videoWidth: 640, + // videoHeight: 360, + // // enableSvg: false + // } + // }, playbackRates: [0.5, 1, 1.5, 2] }); + + var vjs = videojs('player'); + // initialize the plugin this way to access internal methods + var vjs_ass = vjs.ass({ + 'src': ["subs/os.ass"], + videoWidth: 640, + videoHeight: 360, + // enableSvg: false + }) + // you will then be able to use the following js to switch subtitle + // vjs_ass.loadNewSubtitle('URL HERE') diff --git a/package.json b/package.json index 8107401..35f7784 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "videojs-ass", - "version": "0.6.3", + "version": "0.7.0", "author": "Sunny Li", "description": "ASS/SSA subtitle overlay for videojs", "repository": { diff --git a/src/videojs.ass.js b/src/videojs.ass.js index c38fd81..20df64f 100644 --- a/src/videojs.ass.js +++ b/src/videojs.ass.js @@ -6,12 +6,15 @@ 'use strict'; var vjs_ass = function (options) { - var overlay = document.createElement('div'), - clock = null, + var cur_id = 0, + id_count = 0, + overlay = document.createElement('div'), + clocks = [], clockRate = options.rate || 1, delay = options.delay || 0, player = this, - renderer = null, + renderers = [], + rendererSettings = null, AssButton = null, AssButtonInstance = null, OverlayComponent = null, @@ -32,28 +35,28 @@ } } - player.addChild(OverlayComponent); + player.addChild(OverlayComponent, {}, 3); function getCurrentTime() { return player.currentTime() - delay; } - clock = new libjass.renderers.AutoClock(getCurrentTime, 500); + clocks[cur_id] = new libjass.renderers.AutoClock(getCurrentTime, 500); player.on('play', function () { - clock.play(); + clocks[cur_id].play(); }); player.on('pause', function () { - clock.pause(); + clocks[cur_id].pause(); }); player.on('seeking', function () { - clock.seeking(); + clocks[cur_id].seeking(); }); function updateClockRate() { - clock.setRate(player.playbackRate() * clockRate); + clocks[cur_id].setRate(player.playbackRate() * clockRate); } updateClockRate(); @@ -73,23 +76,25 @@ subsWrapperLeft = (videoOffsetWidth - subsWrapperWidth) / 2, subsWrapperTop = (videoOffsetHeight - subsWrapperHeight) / 2; - renderer.resize(subsWrapperWidth, subsWrapperHeight, subsWrapperLeft, subsWrapperTop); + renderers[cur_id].resize(subsWrapperWidth, subsWrapperHeight, subsWrapperLeft, subsWrapperTop); }, 100); } - window.addEventListener('resize', updateDisplayArea); + window.addEventListener('resize', updateDisplayArea); player.on('loadedmetadata', updateDisplayArea); player.on('resize', updateDisplayArea); player.on('fullscreenchange', updateDisplayArea); player.on('dispose', function () { - clock.disable(); + for (var i = 0; i < clocks.length; i++) { + clocks[i].disable(); + } window.removeEventListener('resize', updateDisplayArea); }); + rendererSettings = new libjass.renderers.RendererSettings(); libjass.ASS.fromUrl(options.src, libjass.Format.ASS).then( function (ass) { - var rendererSettings = new libjass.renderers.RendererSettings(); if (options.hasOwnProperty('enableSvg')) { rendererSettings.enableSvg = options.enableSvg; } @@ -100,10 +105,29 @@ .makeFontMapFromStyleElement(document.getElementById(options.fontMapById)); } - renderer = new libjass.renderers.WebRenderer(ass, clock, overlay, rendererSettings); + renderers[cur_id] = new libjass.renderers.WebRenderer(ass, clocks[cur_id], overlay, rendererSettings); } ); + /* + Experimental API use at your own risk!! + */ + function loadNewSubtitle(url) { + renderers[cur_id]._removeAllSubs(); + renderers[cur_id]._preRenderedSubs.clear(); + renderers[cur_id].clock.disable(); + + libjass.ASS.fromUrl(url, libjass.Format.ASS).then( + function (ass) { + cur_id = ++id_count; + clocks[cur_id] = new libjass.renderers.AutoClock(getCurrentTime, 500); + renderers[cur_id] = new libjass.renderers.WebRenderer(ass, clocks[cur_id], overlay, rendererSettings); + updateDisplayArea(); + clocks[cur_id].play(); + } + ); + }; + // Visibility Toggle Button if (!options.hasOwnProperty('button') || options.button) { VjsButton = videojs.getComponent('Button'); @@ -136,6 +160,10 @@ ); }); } + + return { + loadNewSubtitle: loadNewSubtitle + }; }; videojs.plugin('ass', vjs_ass);