diff --git a/dist/iiif-av-component.bundle.js b/dist/iiif-av-component.bundle.js
index a59dea5..7e9f016 100644
--- a/dist/iiif-av-component.bundle.js
+++ b/dist/iiif-av-component.bundle.js
@@ -60,5 +60,5 @@ var _Components;
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{}]},{},[1])(1)
 });
-!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.iiifAvComponent=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVComponent=function(_super){function AVComponent(options){var _this=_super.call(this,options)||this;return _this._data=_this.data(),_this.canvasInstances=[],_this._init(),_this._resize(),_this}return __extends(AVComponent,_super),AVComponent.prototype._init=function(){var success=_super.prototype._init.call(this);return success||console.error("Component failed to initialise"),success},AVComponent.prototype.data=function(){return{autoPlay:!1,constrainNavigationToRange:!1,defaultAspectRatio:.56,doubleClickMS:350,limitToRange:!1,content:{currentTime:"Current Time",duration:"Duration",mute:"Mute",next:"Next",pause:"Pause",play:"Play",previous:"Previous"}}},AVComponent.prototype.set=function(data){var _this=this,oldData=Object.assign({},this._data);this._data=Object.assign(this._data,data);var diff=IIIFComponents.AVComponentUtils.Utils.diff(oldData,this._data);if(diff.includes("helper")&&this._reset(),!this._data.helper)return void console.warn("must pass a helper object");if(diff.includes("limitToRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({limitToRange:_this._data.limitToRange})}),diff.includes("constrainNavigationToRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({constrainNavigationToRange:_this._data.constrainNavigationToRange})}),diff.includes("autoSelectRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({autoSelectRange:_this._data.autoSelectRange})}),diff.includes("canvasId")&&this._data.canvasId){var currentCanvasInstance_1=this._getCanvasInstanceById(this._data.canvasId);this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance!==currentCanvasInstance_1?canvasInstance.set({visible:!1}):canvasInstance.set({visible:!0})})}if(diff.includes("range")&&this._data.range){var range=this._data.helper.getRangeById(this._data.range.rangeId);if(range){if(range.canvases){var canvasId=Manifesto.Utils.normaliseUrl(range.canvases[0]),canvasInstance=this._getCanvasInstanceById(canvasId);if(canvasInstance){var canvasRange=new IIIFComponents.AVComponentObjects.CanvasRange(range);this._data.canvasId&&Manifesto.Utils.normaliseUrl(this._data.canvasId)!==canvasId?this.set({canvasId:canvasId,range:canvasRange}):canvasInstance.set({range:canvasRange})}}}else console.warn("range not found")}this._render(),this._resize()},AVComponent.prototype._render=function(){},AVComponent.prototype._reset=function(){var _this=this;this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.destroy()}),this.canvasInstances=[],this._$element.empty();var canvases=this._getCanvases();canvases.forEach(function(canvas){_this._initCanvas(canvas)}),this.canvasInstances.length>0&&(this._data.canvasId=this.canvasInstances[0].getCanvasId())},AVComponent.prototype._getCanvases=function(){return this._data.helper?this._data.helper.getCanvases():[]},AVComponent.prototype._initCanvas=function(canvas){var _this=this,canvasInstance=new IIIFComponents.CanvasInstance({target:document.createElement("div"),data:Object.assign({},{canvas:canvas},this._data)});canvasInstance.logMessage=this._logMessage.bind(this),this._$element.append(canvasInstance.$playerElement),canvasInstance.init(),this.canvasInstances.push(canvasInstance),canvasInstance.on(AVComponent.Events.CANVASREADY,function(){_this.fire(AVComponent.Events.CANVASREADY)},!1),canvasInstance.on(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE,function(){_this._prevRange()},!1),canvasInstance.on(IIIFComponents.AVComponentCanvasInstance.Events.NEXT_RANGE,function(){_this._nextRange()},!1),canvasInstance.on(AVComponent.Events.RANGE_CHANGED,function(rangeId){_this.fire(AVComponent.Events.RANGE_CHANGED,rangeId)},!1),canvasInstance.on(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,function(volume){_this._setCanvasInstanceVolumes(volume),_this.fire(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,volume)},!1)},AVComponent.prototype._prevRange=function(){if(this._data&&this._data.helper){var prevRange=this._data.helper.getPreviousRange();prevRange?this.playRange(prevRange.id):this._rewind()}},AVComponent.prototype._nextRange=function(){if(this._data&&this._data.helper){var nextRange=this._data.helper.getNextRange();nextRange&&this.playRange(nextRange.id)}},AVComponent.prototype._setCanvasInstanceVolumes=function(volume){this.canvasInstances.forEach(function(canvasInstance){canvasInstance.set({volume:volume})})},AVComponent.prototype._getCanvasInstanceById=function(canvasId){canvasId=Manifesto.Utils.normaliseUrl(canvasId);for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i],id=canvasInstance.getCanvasId();if(id){var canvasInstanceId=Manifesto.Utils.normaliseUrl(id);if(canvasInstanceId===canvasId)return canvasInstance}}return null},AVComponent.prototype._getCurrentCanvas=function(){return this._data.canvasId?this._getCanvasInstanceById(this._data.canvasId):null},AVComponent.prototype._rewind=function(){if(!this._data.limitToRange){var canvasInstance=this._getCurrentCanvas();canvasInstance&&canvasInstance.set({range:void 0})}},AVComponent.prototype.playRange=function(rangeId){if(this._data.helper){var range=this._data.helper.getRangeById(rangeId);if(range){var canvasRange=new IIIFComponents.AVComponentObjects.CanvasRange(range);this.set({range:canvasRange})}}},AVComponent.prototype.showCanvas=function(canvasId){this.set({canvasId:canvasId})},AVComponent.prototype._logMessage=function(message){this.fire(AVComponent.Events.LOG,message)},AVComponent.prototype.resize=function(){this.canvasInstances.forEach(function(canvasInstance){canvasInstance.resize()})},AVComponent}(_Components.BaseComponent);IIIFComponents.AVComponent=AVComponent}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponent;!function(AVComponent){var Events=function(){function Events(){}return Events.CANVASREADY="canvasready",Events.LOG="log",Events.RANGE_CHANGED="rangechanged",Events}();AVComponent.Events=Events}(AVComponent=IIIFComponents.AVComponent||(IIIFComponents.AVComponent={}))}(IIIFComponents||(IIIFComponents={})),function(g){g.IIIFComponents?g.IIIFComponents.AVComponent=IIIFComponents.AVComponent:g.IIIFComponents=IIIFComponents}(global);var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVVolumeControl=function(_super){function AVVolumeControl(options){var _this=_super.call(this,options)||this;return _this._lastVolume=1,_this._data={volume:1},_this._init(),_this._resize(),_this}return __extends(AVVolumeControl,_super),AVVolumeControl.prototype._init=function(){var _this=this,success=_super.prototype._init.call(this);success||console.error("Component failed to initialise"),this._$volumeMute=$('\n                                <button class="btn volume-mute" title="'+this.options.data.content.mute+'">\n                                    <i class="av-icon-mute on" aria-hidden="true"></i>'+this.options.data.content.mute+"\n                                </button>"),this._$volumeSlider=$('<input type="range" class="volume-slider" min="0" max="1" step="0.01" value="1">'),this._$element.append(this._$volumeMute,this._$volumeSlider);var that=this;return this._$volumeMute.on("click",function(){0!==_this._data.volume?(_this._lastVolume=_this._data.volume,_this._data.volume=0):_this._data.volume=_this._lastVolume,_this._render(),_this.fire(AVVolumeControl.Events.VOLUME_CHANGED,_this._data.volume)}),this._$volumeSlider.on("input",function(){that._data.volume=Number(this.value),0===that._data.volume&&(that._lastVolume=0),that._render(),that.fire(AVVolumeControl.Events.VOLUME_CHANGED,that._data.volume)}),this._$volumeSlider.on("change",function(){that._data.volume=Number(this.value),0===that._data.volume&&(that._lastVolume=0),that._render(),that.fire(AVVolumeControl.Events.VOLUME_CHANGED,that._data.volume)}),success},AVVolumeControl.prototype.set=function(data){this._data=Object.assign(this._data,data),this._render()},AVVolumeControl.prototype._render=function(){this._$volumeSlider.val(this._data.volume),0===this._data.volume?this._$volumeMute.find("i").switchClass("on","off"):this._$volumeMute.find("i").switchClass("off","on")},AVVolumeControl.prototype._resize=function(){},AVVolumeControl}(_Components.BaseComponent);IIIFComponents.AVVolumeControl=AVVolumeControl}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVVolumeControl;!function(AVVolumeControl){var Events=function(){function Events(){}return Events.VOLUME_CHANGED="volumechanged",Events}();AVVolumeControl.Events=Events}(AVVolumeControl=IIIFComponents.AVVolumeControl||(IIIFComponents.AVVolumeControl={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var CanvasInstance=function(_super){function CanvasInstance(options){var _this=_super.call(this,options)||this;return _this._canvasClockDuration=0,_this._canvasClockFrequency=25,_this._canvasClockStartDate=0,_this._canvasClockTime=0,_this._canvasHeight=0,_this._canvasWidth=0,_this._data=_this.data(),_this._highPriorityFrequency=25,_this._isPlaying=!1,_this._isStalled=!1,_this._lowPriorityFrequency=250,_this._ranges=[],_this._readyCanvasesCount=0,_this._stallRequestedBy=[],_this._wasPlaying=!1,_this._data=_this.options.data,_this.$playerElement=$('<div class="player"></div>'),_this}return __extends(CanvasInstance,_super),CanvasInstance.prototype.init=function(){var _this=this;if(!this._data||!this._data.content||!this._data.canvas)return void console.warn("unable to initialise, missing canvas or content");this._$hoverPreviewTemplate=$('<div class="hover-preview"><div class="label"></div><div class="pointer"><span class="arrow"></span></div></div>'),this._$canvasContainer=$('<div class="canvas-container"></div>'),this._$optionsContainer=$('<div class="options-container"></div>'),this._$rangeTimelineContainer=$('<div class="range-timeline-container"></div>'),this._$canvasTimelineContainer=$('<div class="canvas-timeline-container"></div>'),this._$canvasHoverPreview=this._$hoverPreviewTemplate.clone(),this._$canvasHoverHighlight=$('<div class="hover-highlight"></div>'),this._$rangeHoverPreview=this._$hoverPreviewTemplate.clone(),this._$rangeHoverHighlight=$('<div class="hover-highlight"></div>'),this._$durationHighlight=$('<div class="duration-highlight"></div>'),this._$timelineItemContainer=$('<div class="timeline-item-container"></div>'),this._$controlsContainer=$('<div class="controls-container"></div>'),this._$prevButton=$('\n                                <button class="btn" title="'+this._data.content.previous+'">\n                                    <i class="av-icon-previous" aria-hidden="true"></i>'+this._data.content.previous+"\n                                </button>"),this._$playButton=$('\n                                <button class="btn" title="'+this._data.content.play+'">\n                                    <i class="av-icon-play play" aria-hidden="true"></i>'+this._data.content.play+"\n                                </button>"),this._$nextButton=$('\n                                <button class="btn" title="'+this._data.content.next+'">\n                                    <i class="av-icon-next" aria-hidden="true"></i>'+this._data.content.next+"\n                                </button>"),this._$timeDisplay=$('<div class="time-display"><span class="canvas-time"></span> / <span class="canvas-duration"></span></div>'),this._$canvasTime=this._$timeDisplay.find(".canvas-time"),this._$canvasDuration=this._$timeDisplay.find(".canvas-duration");var $volume=$('<div class="volume"></div>');if(this._volume=new IIIFComponents.AVVolumeControl({target:$volume[0],data:Object.assign({},this._data)}),this._volume.on(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,function(value){_this.fire(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,value)},!1),this._$controlsContainer.append(this._$prevButton,this._$playButton,this._$nextButton,this._$timeDisplay,$volume),this._$canvasTimelineContainer.append(this._$canvasHoverPreview,this._$canvasHoverHighlight,this._$durationHighlight),this._$rangeTimelineContainer.append(this._$rangeHoverPreview,this._$rangeHoverHighlight),this._$optionsContainer.append(this._$canvasTimelineContainer,this._$rangeTimelineContainer,this._$timelineItemContainer,this._$controlsContainer),this.$playerElement.append(this._$canvasContainer,this._$optionsContainer),this._$canvasHoverPreview.hide(),this._$rangeHoverPreview.hide(),this._data.helper&&this._data.canvas){var ranges=this._data.helper.getCanvasRanges(this._data.canvas);ranges.forEach(function(range){_this._ranges.push(new IIIFComponents.AVComponentObjects.CanvasRange(range))})}this._canvasClockDuration=this._data.canvas.getDuration();var canvasWidth=this._data.canvas.getWidth(),canvasHeight=this._data.canvas.getHeight();canvasWidth?this._canvasWidth=canvasWidth:this._canvasWidth=this.$playerElement.parent().width(),canvasHeight?this._canvasHeight=canvasHeight:this._canvasHeight=this._canvasWidth*this._data.defaultAspectRatio;var that=this,prevClicks=0,prevTimeout=0;this._$prevButton.on("click",function(){prevClicks++,1===prevClicks?(_this._previous(!1),prevTimeout=setTimeout(function(){prevClicks=0,prevTimeout=0},_this._data.doubleClickMS)):(_this._previous(!0),clearTimeout(prevTimeout),prevClicks=0,prevTimeout=0)}),this._$playButton.on("click",function(){_this._isPlaying?_this._pause():_this._play()}),this._$nextButton.on("click",function(){_this._next()}),this._$canvasTimelineContainer.slider({value:0,step:.01,orientation:"horizontal",range:"min",max:that._canvasClockDuration,animate:!1,create:function(evt,ui){},slide:function(evt,ui){that._setCurrentTime(ui.value)},stop:function(evt,ui){}}),this._$canvasTimelineContainer.mouseout(function(){that._$canvasHoverHighlight.width(0),that._$canvasHoverPreview.hide()}),this._$rangeTimelineContainer.mouseout(function(){that._$rangeHoverHighlight.width(0),that._$rangeHoverPreview.hide()}),this._$canvasTimelineContainer.on("mousemove",function(e){_this._updateHoverPreview(e,_this._$canvasTimelineContainer,_this._canvasClockDuration)}),this._$rangeTimelineContainer.on("mousemove",function(e){_this._data.range&&_this._updateHoverPreview(e,_this._$rangeTimelineContainer,_this._data.range.duration?_this._data.range.duration.getLength():0)}),this._contentAnnotations=[];var items=this._data.canvas.getContent();1===items.length&&this._$timelineItemContainer.hide();for(var i=0;i<items.length;i++){var item=items[i],mediaSource=void 0,bodies=item.getBody();if(!bodies.length)return void console.warn("item has no body");var body=bodies[0],type=body.getType(),format=body.getFormat();type&&"textualbody"===type.toString()||(mediaSource=body.id.split("#")[0]);var target=item.getTarget();if(!target)return void console.warn("item has no target");var spatial=/xywh=([^&]+)/g.exec(target),temporal=/t=([^&]+)/g.exec(target),xywh=void 0;xywh=spatial&&spatial[1]?spatial[1].split(","):[0,0,this._canvasWidth,this._canvasHeight];var t=void 0;t=temporal&&temporal[1]?temporal[1].split(","):[0,this._canvasClockDuration];var positionLeft=parseInt(xywh[0]),positionTop=parseInt(xywh[1]),mediaWidth=parseInt(xywh[2]),mediaHeight=parseInt(xywh[3]),startTime=parseInt(t[0]),endTime=parseInt(t[1]),percentageTop=this._convertToPercentage(positionTop,this._canvasHeight),percentageLeft=this._convertToPercentage(positionLeft,this._canvasWidth),percentageWidth=this._convertToPercentage(mediaWidth,this._canvasWidth),percentageHeight=this._convertToPercentage(mediaHeight,this._canvasHeight),temporalOffsets=/t=([^&]+)/g.exec(body.id),ot=void 0;ot=temporalOffsets&&temporalOffsets[1]?temporalOffsets[1].split(","):[null,null];var offsetStart=ot[0]?parseInt(ot[0]):ot[0],offsetEnd=ot[1]?parseInt(ot[1]):ot[1],itemData={type:type,source:mediaSource,start:startTime,end:endTime,top:percentageTop,left:percentageLeft,width:percentageWidth,height:percentageHeight,startOffset:offsetStart,endOffset:offsetEnd,active:!1,format:format};this._renderMediaElement(itemData)}},CanvasInstance.prototype.set=function(data){var oldData=Object.assign({},this._data);this._data=Object.assign(this._data,data);var diff=IIIFComponents.AVComponentUtils.Utils.diff(oldData,this._data);diff.includes("visible")&&this._data.canvas&&(this._data.visible?this.$playerElement.show():(this.$playerElement.hide(),this._pause()),this.resize()),diff.includes("range")&&this._data.helper&&(this._data.range?this._data.range.duration&&(this._data.range.spans(this._canvasClockTime)||this._setCurrentTime(this._data.range.duration.start),this._play(),this.fire(IIIFComponents.AVComponent.Events.RANGE_CHANGED,this._data.range.rangeId)):this.fire(IIIFComponents.AVComponent.Events.RANGE_CHANGED,null)),this._render()},CanvasInstance.prototype._render=function(){var _this=this;if(this._data.range&&this._data.range.duration){var totalLength=this._canvasClockDuration,timelineLength=this._$canvasTimelineContainer.width(),ratio=timelineLength/totalLength,start=this._data.range.duration.start*ratio,end=this._data.range.duration.end*ratio,width=end-start;this._$durationHighlight.show(),this._$durationHighlight.css({left:start,width:width});var that_1=this;this._$rangeTimelineContainer.slider("destroy"),this._$rangeTimelineContainer.slider({value:this._data.range.duration.start,step:.01,orientation:"horizontal",range:"min",min:this._data.range.duration.start,max:this._data.range.duration.end,animate:!1,create:function(evt,ui){},slide:function(evt,ui){that_1._setCurrentTime(ui.value)},stop:function(evt,ui){}})}else this._$durationHighlight.hide();this._contentAnnotations.forEach(function($mediaElement){$($mediaElement.element).prop("volume",_this._data.volume),_this._volume.set({volume:_this._data.volume})}),this._data.limitToRange&&this._data.range?(this._$canvasTimelineContainer.hide(),this._$rangeTimelineContainer.show()):(this._$canvasTimelineContainer.show(),this._$rangeTimelineContainer.hide()),this._updateCurrentTimeDisplay(),this._updateDurationDisplay()},CanvasInstance.prototype.getCanvasId=function(){return this._data&&this._data.canvas?this._data.canvas.id:null},CanvasInstance.prototype._updateHoverPreview=function(e,$container,duration){var offset=$container.offset(),x=e.pageX-offset.left,$hoverArrow=$container.find(".arrow"),$hoverHighlight=$container.find(".hover-highlight"),$hoverPreview=$container.find(".hover-preview");$hoverHighlight.width(x);var fullWidth=$container.width(),ratio=x/fullWidth,seconds=Math.min(duration*ratio);$hoverPreview.find(".label").text(IIIFComponents.AVComponentUtils.Utils.formatTime(seconds));var hoverPreviewWidth=$hoverPreview.outerWidth(),hoverPreviewHeight=$hoverPreview.outerHeight(),left=x-.5*hoverPreviewWidth,arrowLeft=.5*hoverPreviewWidth-6;left<0&&(left=0,arrowLeft=x-6),left+hoverPreviewWidth>fullWidth&&(left=fullWidth-hoverPreviewWidth,arrowLeft=hoverPreviewWidth-(fullWidth-x)-6),$hoverPreview.css({left:left,top:hoverPreviewHeight*-1+"px"}).show(),$hoverArrow.css({left:arrowLeft})},CanvasInstance.prototype._previous=function(isDouble){this._data.limitToRange?isDouble?this._isNavigationConstrainedToRange()?this._rewind():this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE):this._rewind():this._data.range?isDouble?(this.set({range:void 0}),this._rewind()):this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE):this._rewind()},CanvasInstance.prototype._next=function(){this._data.limitToRange&&this._isNavigationConstrainedToRange()?this._fastforward():this.fire(IIIFComponents.AVComponentCanvasInstance.Events.NEXT_RANGE)},CanvasInstance.prototype.destroy=function(){window.clearInterval(this._highPriorityInterval),window.clearInterval(this._lowPriorityInterval),window.clearInterval(this._canvasClockInterval)},CanvasInstance.prototype._convertToPercentage=function(pixelValue,maxValue){var percentage=pixelValue/maxValue*100;return percentage},CanvasInstance.prototype._renderMediaElement=function(data){var $mediaElement,_this=this,type=data.type.toString().toLowerCase();switch(type){case"image":$mediaElement=$('<img class="anno" src="'+data.source+'" />');break;case"video":$mediaElement=$('<video class="anno" />');break;case"audio":$mediaElement=$('<audio class="anno" />');break;case"textualbody":$mediaElement=$('<div class="anno">'+data.source+"</div>");break;default:return}var video=$mediaElement[0];if(data.format&&"application/dash+xml"===data.format.toString()){$mediaElement.attr("data-dashjs-player","");var player=dashjs.MediaPlayer().create();player.initialize(video,data.source)}else if(data.format&&"application/vnd.apple.mpegurl"===data.format.toString())if(Hls.isSupported()){var hls=new Hls;hls.loadSource(data.source),hls.attachMedia(video),hls.on(Hls.Events.MANIFEST_PARSED,function(){video.play()})}else video.canPlayType("application/vnd.apple.mpegurl")&&(video.src=data.source,video.addEventListener("canplay",function(){video.play()}));else $mediaElement.attr("src",data.source);if($mediaElement.css({top:data.top+"%",left:data.left+"%",width:data.width+"%",height:data.height+"%"}).hide(),data.element=$mediaElement,"video"===type||"audio"===type){data.timeout=null;var that_2=this;data.checkForStall=function(){var self=this;this.active?(that_2._checkMediaSynchronization(),this.element.get(0).readyState>0&&!this.outOfSync?that_2._playbackStalled(!1,self):(that_2._playbackStalled(!0,self),this.timeout&&window.clearTimeout(this.timeout),this.timeout=window.setTimeout(function(){self.checkForStall()},1e3))):that_2._playbackStalled(!1,self)}}this._contentAnnotations.push(data),this.$playerElement&&this._$canvasContainer.append($mediaElement),"video"!==type&&"audio"!==type||($mediaElement.on("loadstart",function(){data.checkForStall()}),$mediaElement.on("waiting",function(){data.checkForStall()}),$mediaElement.on("seeking",function(){}),$mediaElement.on("loadedmetadata",function(){_this._readyCanvasesCount++,_this._readyCanvasesCount===_this._contentAnnotations.length&&(_this._setCurrentTime(0),_this.options.data.autoPlay&&_this._play(),_this._updateDurationDisplay(),_this.fire(IIIFComponents.AVComponent.Events.CANVASREADY))}),$mediaElement.attr("preload","auto"),$mediaElement.get(0).load()),this._renderSyncIndicator(data)},CanvasInstance.prototype._hasRangeChanged=function(){var range=this._getRangeForCurrentTime();range===this._data.range||this._data.limitToRange||this.set({range:range})},CanvasInstance.prototype._getRangeForCurrentTime=function(){for(var i=0;i<this._ranges.length;i++){var range=this._ranges[i];if(!range.nonav&&range.spans(this._canvasClockTime))return range}},CanvasInstance.prototype._updateCurrentTimeDisplay=function(){if(this._data.limitToRange&&this._data.range&&this._data.range.duration){var rangeClockTime=this._canvasClockTime-this._data.range.duration.start;this._$canvasTime.text(IIIFComponents.AVComponentUtils.Utils.formatTime(rangeClockTime))}else this._$canvasTime.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._canvasClockTime))},CanvasInstance.prototype._updateDurationDisplay=function(){this._data.limitToRange&&this._data.range&&this._data.range.duration?this._$canvasDuration.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._data.range.duration.getLength())):this._$canvasDuration.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._canvasClockDuration))},CanvasInstance.prototype._renderSyncIndicator=function(mediaElementData){var leftPercent=this._convertToPercentage(mediaElementData.start,this._canvasClockDuration),widthPercent=this._convertToPercentage(mediaElementData.end-mediaElementData.start,this._canvasClockDuration),$timelineItem=$('<div class="timeline-item" title="'+mediaElementData.source+'" data-start="'+mediaElementData.start+'" data-end="'+mediaElementData.end+'"></div>');$timelineItem.css({left:leftPercent+"%",width:widthPercent+"%"});var $lineWrapper=$('<div class="line-wrapper"></div>');$timelineItem.appendTo($lineWrapper),mediaElementData.timelineElement=$timelineItem,this.$playerElement&&this._$timelineItemContainer.append($lineWrapper)},CanvasInstance.prototype._setCurrentTime=function(seconds){this._canvasClockTime=seconds,this._canvasClockStartDate=Date.now()-1e3*this._canvasClockTime,this.logMessage("SET CURRENT TIME to: "+this._canvasClockTime+" seconds."),this._canvasClockUpdater(),this._highPriorityUpdater(),this._lowPriorityUpdater(),this._synchronizeMedia()},CanvasInstance.prototype._rewind=function(withoutUpdate){this._pause(),this._data.limitToRange&&this._data.range&&this._data.range.duration?this._canvasClockTime=this._data.range.duration.start:this._canvasClockTime=0,this._data.limitToRange||this._data&&this._data.helper&&this.set({range:void 0}),this._play()},CanvasInstance.prototype._fastforward=function(){this._data.limitToRange&&this._data.range&&this._data.range.duration?this._canvasClockTime=this._data.range.duration.end:this._canvasClockTime=this._canvasClockDuration,this._pause()},CanvasInstance.prototype._play=function(withoutUpdate){var _this=this;this._isPlaying||(this._data.limitToRange&&this._data.range&&this._data.range.duration&&this._canvasClockTime>=this._data.range.duration.end&&(this._canvasClockTime=this._data.range.duration.start),this._canvasClockTime===this._canvasClockDuration&&(this._canvasClockTime=0),this._canvasClockStartDate=Date.now()-1e3*this._canvasClockTime,this._highPriorityInterval=window.setInterval(function(){_this._highPriorityUpdater()},this._highPriorityFrequency),this._lowPriorityInterval=window.setInterval(function(){_this._lowPriorityUpdater()},this._lowPriorityFrequency),this._canvasClockInterval=window.setInterval(function(){_this._canvasClockUpdater()},this._canvasClockFrequency),this._isPlaying=!0,withoutUpdate||this._synchronizeMedia(),this._$playButton.find("i").switchClass("play","pause"),this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PLAYCANVAS),this.logMessage("PLAY canvas"))},CanvasInstance.prototype._pause=function(withoutUpdate){window.clearInterval(this._highPriorityInterval),window.clearInterval(this._lowPriorityInterval),window.clearInterval(this._canvasClockInterval),this._isPlaying=!1,withoutUpdate||(this._highPriorityUpdater(),this._lowPriorityUpdater(),this._synchronizeMedia()),this._$playButton.find("i").switchClass("pause","play"),this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PAUSECANVAS),this.logMessage("PAUSE canvas")},CanvasInstance.prototype._isNavigationConstrainedToRange=function(){return this._data.constrainNavigationToRange},CanvasInstance.prototype._canvasClockUpdater=function(){this._canvasClockTime=(Date.now()-this._canvasClockStartDate)/1e3,this._data.limitToRange&&this._data.range&&this._data.range.duration&&this._canvasClockTime>=this._data.range.duration.end&&this._pause(),this._canvasClockTime>=this._canvasClockDuration&&(this._canvasClockTime=this._canvasClockDuration,this._pause())},CanvasInstance.prototype._highPriorityUpdater=function(){this._$rangeTimelineContainer.slider({value:this._canvasClockTime}),this._$canvasTimelineContainer.slider({value:this._canvasClockTime}),this._updateCurrentTimeDisplay(),this._updateDurationDisplay()},CanvasInstance.prototype._lowPriorityUpdater=function(){this._updateMediaActiveStates(),this._isPlaying&&this._data.autoSelectRange&&this._hasRangeChanged()},CanvasInstance.prototype._updateMediaActiveStates=function(){for(var contentAnnotation,i=0;i<this._contentAnnotations.length;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime?(this._checkMediaSynchronization(),contentAnnotation.active||(this._synchronizeMedia(),contentAnnotation.active=!0,contentAnnotation.element.show(),contentAnnotation.timelineElement.addClass("active")),"video"!==type&&"audio"!==type||contentAnnotation.element[0].currentTime>contentAnnotation.element[0].duration-contentAnnotation.endOffset&&contentAnnotation.element[0].pause()):contentAnnotation.active&&(contentAnnotation.active=!1,contentAnnotation.element.hide(),contentAnnotation.timelineElement.removeClass("active"),"video"!==type&&"audio"!==type||contentAnnotation.element[0].pause())}},CanvasInstance.prototype._synchronizeMedia=function(){for(var contentAnnotation,i=0;i<this._contentAnnotations.length;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();if("video"===type||"audio"===type){if(contentAnnotation.element[0].currentTime=this._canvasClockTime-contentAnnotation.start+contentAnnotation.startOffset,contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime)if(this._isPlaying){if(contentAnnotation.element[0].paused){var promise=contentAnnotation.element[0].play();promise&&promise["catch"](function(){})}}else contentAnnotation.element[0].pause();else contentAnnotation.element[0].pause();contentAnnotation.element[0].currentTime>contentAnnotation.element[0].duration-contentAnnotation.endOffset&&contentAnnotation.element[0].pause()}}this.logMessage("SYNC MEDIA at: "+this._canvasClockTime+" seconds.")},CanvasInstance.prototype._checkMediaSynchronization=function(){for(var contentAnnotation,i=0,l=this._contentAnnotations.length;i<l;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();if(("video"===type||"audio"===type)&&contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime){var correctTime=this._canvasClockTime-contentAnnotation.start+contentAnnotation.startOffset,factualTime=contentAnnotation.element[0].currentTime;if(Math.abs(factualTime-correctTime)>.4){contentAnnotation.outOfSync=!0;var lag=Math.abs(factualTime-correctTime);this.logMessage("DETECTED synchronization lag: "+Math.abs(lag)),contentAnnotation.element[0].currentTime=correctTime}else contentAnnotation.outOfSync=!1}}},CanvasInstance.prototype._playbackStalled=function(aBoolean,syncMediaRequestingStall){if(aBoolean)this._stallRequestedBy.indexOf(syncMediaRequestingStall)<0&&this._stallRequestedBy.push(syncMediaRequestingStall),
-this._isStalled||(this.$playerElement,this._wasPlaying=this._isPlaying,this._pause(!0),this._isStalled=aBoolean);else{var idx=this._stallRequestedBy.indexOf(syncMediaRequestingStall);idx>=0&&this._stallRequestedBy.splice(idx,1),0===this._stallRequestedBy.length&&(this._isStalled&&this._wasPlaying&&this._play(!0),this._isStalled=aBoolean)}},CanvasInstance.prototype.resize=function(){if(this.$playerElement){var containerWidth=this._$canvasContainer.width();if(containerWidth){this._$canvasTimelineContainer.width(containerWidth);var $options=this.$playerElement.find(".options-container");this._$canvasContainer.height(this.$playerElement.parent().height()-$options.height())}this._render()}},CanvasInstance}(_Components.BaseComponent);IIIFComponents.CanvasInstance=CanvasInstance}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponentCanvasInstance;!function(AVComponentCanvasInstance){var Events=function(){function Events(){}return Events.NEXT_RANGE="nextrange",Events.PAUSECANVAS="pause",Events.PLAYCANVAS="play",Events.PREVIOUS_RANGE="previousrange",Events}();AVComponentCanvasInstance.Events=Events}(AVComponentCanvasInstance=IIIFComponents.AVComponentCanvasInstance||(IIIFComponents.AVComponentCanvasInstance={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var CanvasRange=function(){function CanvasRange(range){if(this.rangeId=null,this.duration=null,this.nonav=!1,range.canvases&&range.canvases.length){this.rangeId=range.id;var canvasId=range.canvases[0],temporal=/t=([^&]+)/g.exec(canvasId);if(temporal&&temporal.length>1){var rangeTiming=temporal[1].split(",");this.duration=new AVComponentObjects.Duration(Number(rangeTiming[0]),Number(rangeTiming[1]))}this.nonav="no-nav"===range.getProperty("behavior")}}return CanvasRange.prototype.spans=function(time){return!!(this.duration&&time>=this.duration.start&&time<=this.duration.end)},CanvasRange}();AVComponentObjects.CanvasRange=CanvasRange}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var Duration=function(){function Duration(start,end){this.start=start,this.end=end}return Duration.prototype.getLength=function(){return this.end-this.start},Duration}();AVComponentObjects.Duration=Duration}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentUtils;!function(AVComponentUtils){var Utils=function(){function Utils(){}return Utils._compare=function(a,b){var changed=[];return Object.keys(a).forEach(function(p){Object.is(b[p],a[p])||changed.push(p)}),changed},Utils.diff=function(a,b){return Array.from(new Set(Utils._compare(a,b).concat(Utils._compare(b,a))))},Utils.formatTime=function(aNumber){var hours,minutes,seconds,hourValue;return seconds=Math.ceil(aNumber),hours=Math.floor(seconds/3600),hours=hours>=10?hours:"0"+hours,minutes=Math.floor(seconds%3600/60),minutes=minutes>=10?minutes:"0"+minutes,seconds=Math.floor(seconds%3600%60),seconds=seconds>=10?seconds:"0"+seconds,hourValue=hours>=1?hours+":":"",hourValue+minutes+":"+seconds},Utils}();AVComponentUtils.Utils=Utils}(AVComponentUtils=IIIFComponents.AVComponentUtils||(IIIFComponents.AVComponentUtils={}))}(IIIFComponents||(IIIFComponents={}))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
\ No newline at end of file
+!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.iiifAvComponent=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVComponent=function(_super){function AVComponent(options){var _this=_super.call(this,options)||this;return _this._data=_this.data(),_this.canvasInstances=[],_this._init(),_this._resize(),_this}return __extends(AVComponent,_super),AVComponent.prototype._init=function(){var success=_super.prototype._init.call(this);return success||console.error("Component failed to initialise"),success},AVComponent.prototype.data=function(){return{autoPlay:!1,constrainNavigationToRange:!1,defaultAspectRatio:.56,doubleClickMS:350,limitToRange:!1,content:{currentTime:"Current Time",duration:"Duration",mute:"Mute",next:"Next",pause:"Pause",play:"Play",previous:"Previous"}}},AVComponent.prototype.set=function(data){var _this=this,oldData=Object.assign({},this._data);this._data=Object.assign(this._data,data);var diff=IIIFComponents.AVComponentUtils.Utils.diff(oldData,this._data);if(diff.includes("helper")&&this._reset(),!this._data.helper)return void console.warn("must pass a helper object");if(diff.includes("limitToRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({limitToRange:_this._data.limitToRange})}),diff.includes("constrainNavigationToRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({constrainNavigationToRange:_this._data.constrainNavigationToRange})}),diff.includes("autoSelectRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({autoSelectRange:_this._data.autoSelectRange})}),diff.includes("canvasId")&&this._data.canvasId){var currentCanvasInstance_1=this._getCanvasInstanceById(this._data.canvasId);this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance!==currentCanvasInstance_1?canvasInstance.set({visible:!1}):canvasInstance.set({visible:!0})})}if(diff.includes("range")&&this._data.range){var range=this._data.helper.getRangeById(this._data.range.rangeId);if(range){if(range.canvases){var canvasId=Manifesto.Utils.normaliseUrl(range.canvases[0]),canvasInstance=this._getCanvasInstanceById(canvasId);if(canvasInstance){var canvasRange=new IIIFComponents.AVComponentObjects.CanvasRange(range);this._data.canvasId&&Manifesto.Utils.normaliseUrl(this._data.canvasId)!==canvasId?this.set({canvasId:canvasId,range:canvasRange}):canvasInstance.set({range:canvasRange})}}}else console.warn("range not found")}this._render(),this._resize()},AVComponent.prototype._render=function(){},AVComponent.prototype._reset=function(){var _this=this;this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.destroy()}),this.canvasInstances=[],this._$element.empty();var canvases=this._getCanvases();canvases.forEach(function(canvas){_this._initCanvas(canvas)}),this.canvasInstances.length>0&&(this._data.canvasId=this.canvasInstances[0].getCanvasId())},AVComponent.prototype._getCanvases=function(){return this._data.helper?this._data.helper.getCanvases():[]},AVComponent.prototype._initCanvas=function(canvas){var _this=this,canvasInstance=new IIIFComponents.CanvasInstance({target:document.createElement("div"),data:Object.assign({},{canvas:canvas},this._data)});canvasInstance.logMessage=this._logMessage.bind(this),this._$element.append(canvasInstance.$playerElement),canvasInstance.init(),this.canvasInstances.push(canvasInstance),canvasInstance.on(AVComponent.Events.CANVASREADY,function(){_this.fire(AVComponent.Events.CANVASREADY)},!1),canvasInstance.on(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE,function(){_this._prevRange()},!1),canvasInstance.on(IIIFComponents.AVComponentCanvasInstance.Events.NEXT_RANGE,function(){_this._nextRange()},!1),canvasInstance.on(AVComponent.Events.RANGE_CHANGED,function(rangeId){_this.fire(AVComponent.Events.RANGE_CHANGED,rangeId)},!1),canvasInstance.on(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,function(volume){_this._setCanvasInstanceVolumes(volume),_this.fire(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,volume)},!1)},AVComponent.prototype._prevRange=function(){if(this._data&&this._data.helper){var prevRange=this._data.helper.getPreviousRange();prevRange?this.playRange(prevRange.id):this._rewind()}},AVComponent.prototype._nextRange=function(){if(this._data&&this._data.helper){var nextRange=this._data.helper.getNextRange();nextRange&&this.playRange(nextRange.id)}},AVComponent.prototype._setCanvasInstanceVolumes=function(volume){this.canvasInstances.forEach(function(canvasInstance){canvasInstance.set({volume:volume})})},AVComponent.prototype._getCanvasInstanceById=function(canvasId){canvasId=Manifesto.Utils.normaliseUrl(canvasId);for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i],id=canvasInstance.getCanvasId();if(id){var canvasInstanceId=Manifesto.Utils.normaliseUrl(id);if(canvasInstanceId===canvasId)return canvasInstance}}return null},AVComponent.prototype._getCurrentCanvas=function(){return this._data.canvasId?this._getCanvasInstanceById(this._data.canvasId):null},AVComponent.prototype._rewind=function(){if(!this._data.limitToRange){var canvasInstance=this._getCurrentCanvas();canvasInstance&&canvasInstance.set({range:void 0})}},AVComponent.prototype.playRange=function(rangeId){if(this._data.helper){var range=this._data.helper.getRangeById(rangeId);if(range){var canvasRange=new IIIFComponents.AVComponentObjects.CanvasRange(range);this.set({range:canvasRange})}}},AVComponent.prototype.showCanvas=function(canvasId){this.set({canvasId:canvasId})},AVComponent.prototype._logMessage=function(message){this.fire(AVComponent.Events.LOG,message)},AVComponent.prototype.resize=function(){this.canvasInstances.forEach(function(canvasInstance){canvasInstance.resize()})},AVComponent}(_Components.BaseComponent);IIIFComponents.AVComponent=AVComponent}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponent;!function(AVComponent){var Events=function(){function Events(){}return Events.CANVASREADY="canvasready",Events.LOG="log",Events.RANGE_CHANGED="rangechanged",Events}();AVComponent.Events=Events}(AVComponent=IIIFComponents.AVComponent||(IIIFComponents.AVComponent={}))}(IIIFComponents||(IIIFComponents={})),function(g){g.IIIFComponents?g.IIIFComponents.AVComponent=IIIFComponents.AVComponent:g.IIIFComponents=IIIFComponents}(global);var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVVolumeControl=function(_super){function AVVolumeControl(options){var _this=_super.call(this,options)||this;return _this._lastVolume=1,_this._data={volume:1},_this._init(),_this._resize(),_this}return __extends(AVVolumeControl,_super),AVVolumeControl.prototype._init=function(){var _this=this,success=_super.prototype._init.call(this);success||console.error("Component failed to initialise"),this._$volumeMute=$('\n                                <button class="btn volume-mute" title="'+this.options.data.content.mute+'">\n                                    <i class="av-icon-mute on" aria-hidden="true"></i>'+this.options.data.content.mute+"\n                                </button>"),this._$volumeSlider=$('<input type="range" class="volume-slider" min="0" max="1" step="0.01" value="1">'),this._$element.append(this._$volumeMute,this._$volumeSlider);var that=this;return this._$volumeMute.on("click",function(){0!==_this._data.volume?(_this._lastVolume=_this._data.volume,_this._data.volume=0):_this._data.volume=_this._lastVolume,_this._render(),_this.fire(AVVolumeControl.Events.VOLUME_CHANGED,_this._data.volume)}),this._$volumeSlider.on("input",function(){that._data.volume=Number(this.value),0===that._data.volume&&(that._lastVolume=0),that._render(),that.fire(AVVolumeControl.Events.VOLUME_CHANGED,that._data.volume)}),this._$volumeSlider.on("change",function(){that._data.volume=Number(this.value),0===that._data.volume&&(that._lastVolume=0),that._render(),that.fire(AVVolumeControl.Events.VOLUME_CHANGED,that._data.volume)}),success},AVVolumeControl.prototype.set=function(data){this._data=Object.assign(this._data,data),this._render()},AVVolumeControl.prototype._render=function(){this._$volumeSlider.val(this._data.volume),0===this._data.volume?this._$volumeMute.find("i").switchClass("on","off"):this._$volumeMute.find("i").switchClass("off","on")},AVVolumeControl.prototype._resize=function(){},AVVolumeControl}(_Components.BaseComponent);IIIFComponents.AVVolumeControl=AVVolumeControl}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVVolumeControl;!function(AVVolumeControl){var Events=function(){function Events(){}return Events.VOLUME_CHANGED="volumechanged",Events}();AVVolumeControl.Events=Events}(AVVolumeControl=IIIFComponents.AVVolumeControl||(IIIFComponents.AVVolumeControl={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var CanvasInstance=function(_super){function CanvasInstance(options){var _this=_super.call(this,options)||this;return _this._canvasClockDuration=0,_this._canvasClockFrequency=25,_this._canvasClockStartDate=0,_this._canvasClockTime=0,_this._canvasHeight=0,_this._canvasWidth=0,_this._data=_this.data(),_this._highPriorityFrequency=25,_this._isPlaying=!1,_this._isStalled=!1,_this._lowPriorityFrequency=250,_this._ranges=[],_this._readyCanvasesCount=0,_this._stallRequestedBy=[],_this._wasPlaying=!1,_this._data=_this.options.data,_this.$playerElement=$('<div class="player"></div>'),_this}return __extends(CanvasInstance,_super),CanvasInstance.prototype.init=function(){var _this=this;if(!this._data||!this._data.content||!this._data.canvas)return void console.warn("unable to initialise, missing canvas or content");this._$hoverPreviewTemplate=$('<div class="hover-preview"><div class="label"></div><div class="pointer"><span class="arrow"></span></div></div>'),this._$canvasContainer=$('<div class="canvas-container"></div>'),this._$optionsContainer=$('<div class="options-container"></div>'),this._$rangeTimelineContainer=$('<div class="range-timeline-container"></div>'),this._$canvasTimelineContainer=$('<div class="canvas-timeline-container"></div>'),this._$canvasHoverPreview=this._$hoverPreviewTemplate.clone(),this._$canvasHoverHighlight=$('<div class="hover-highlight"></div>'),this._$rangeHoverPreview=this._$hoverPreviewTemplate.clone(),this._$rangeHoverHighlight=$('<div class="hover-highlight"></div>'),this._$durationHighlight=$('<div class="duration-highlight"></div>'),this._$timelineItemContainer=$('<div class="timeline-item-container"></div>'),this._$controlsContainer=$('<div class="controls-container"></div>'),this._$prevButton=$('\n                                <button class="btn" title="'+this._data.content.previous+'">\n                                    <i class="av-icon-previous" aria-hidden="true"></i>'+this._data.content.previous+"\n                                </button>"),this._$playButton=$('\n                                <button class="btn" title="'+this._data.content.play+'">\n                                    <i class="av-icon-play play" aria-hidden="true"></i>'+this._data.content.play+"\n                                </button>"),this._$nextButton=$('\n                                <button class="btn" title="'+this._data.content.next+'">\n                                    <i class="av-icon-next" aria-hidden="true"></i>'+this._data.content.next+"\n                                </button>"),this._$timeDisplay=$('<div class="time-display"><span class="canvas-time"></span> / <span class="canvas-duration"></span></div>'),this._$canvasTime=this._$timeDisplay.find(".canvas-time"),this._$canvasDuration=this._$timeDisplay.find(".canvas-duration");var $volume=$('<div class="volume"></div>');if(this._volume=new IIIFComponents.AVVolumeControl({target:$volume[0],data:Object.assign({},this._data)}),this._volume.on(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,function(value){_this.fire(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,value)},!1),this._$controlsContainer.append(this._$prevButton,this._$playButton,this._$nextButton,this._$timeDisplay,$volume),this._$canvasTimelineContainer.append(this._$canvasHoverPreview,this._$canvasHoverHighlight,this._$durationHighlight),this._$rangeTimelineContainer.append(this._$rangeHoverPreview,this._$rangeHoverHighlight),this._$optionsContainer.append(this._$canvasTimelineContainer,this._$rangeTimelineContainer,this._$timelineItemContainer,this._$controlsContainer),this.$playerElement.append(this._$canvasContainer,this._$optionsContainer),this._$canvasHoverPreview.hide(),this._$rangeHoverPreview.hide(),this._data.helper&&this._data.canvas){var ranges=this._data.helper.getCanvasRanges(this._data.canvas);ranges.forEach(function(range){_this._ranges.push(new IIIFComponents.AVComponentObjects.CanvasRange(range))})}this._canvasClockDuration=this._data.canvas.getDuration();var canvasWidth=this._data.canvas.getWidth(),canvasHeight=this._data.canvas.getHeight();canvasWidth?this._canvasWidth=canvasWidth:this._canvasWidth=this.$playerElement.parent().width(),canvasHeight?this._canvasHeight=canvasHeight:this._canvasHeight=this._canvasWidth*this._data.defaultAspectRatio;var that=this,prevClicks=0,prevTimeout=0;this._$prevButton.on("click",function(){prevClicks++,1===prevClicks?(_this._previous(!1),prevTimeout=setTimeout(function(){prevClicks=0,prevTimeout=0},_this._data.doubleClickMS)):(_this._previous(!0),clearTimeout(prevTimeout),prevClicks=0,prevTimeout=0)}),this._$playButton.on("click",function(){_this._isPlaying?_this._pause():_this._play()}),this._$nextButton.on("click",function(){_this._next()}),this._$canvasTimelineContainer.slider({value:0,step:.01,orientation:"horizontal",range:"min",max:that._canvasClockDuration,animate:!1,create:function(evt,ui){},slide:function(evt,ui){that._setCurrentTime(ui.value)},stop:function(evt,ui){}}),this._$canvasTimelineContainer.mouseout(function(){that._$canvasHoverHighlight.width(0),that._$canvasHoverPreview.hide()}),this._$rangeTimelineContainer.mouseout(function(){that._$rangeHoverHighlight.width(0),that._$rangeHoverPreview.hide()}),this._$canvasTimelineContainer.on("mousemove",function(e){_this._updateHoverPreview(e,_this._$canvasTimelineContainer,_this._canvasClockDuration)}),this._$rangeTimelineContainer.on("mousemove",function(e){_this._data.range&&_this._updateHoverPreview(e,_this._$rangeTimelineContainer,_this._data.range.duration?_this._data.range.duration.getLength():0)}),this._contentAnnotations=[];var items=this._data.canvas.getContent();1===items.length&&this._$timelineItemContainer.hide();for(var i=0;i<items.length;i++){var item=items[i],mediaSource=void 0,bodies=item.getBody();if(!bodies.length)return void console.warn("item has no body");var body=bodies[0],type=body.getType(),format=body.getFormat();type&&"textualbody"===type.toString()||(mediaSource=body.id.split("#")[0]);var target=item.getTarget();if(!target)return void console.warn("item has no target");var spatial=/xywh=([^&]+)/g.exec(target),temporal=/t=([^&]+)/g.exec(target),xywh=void 0;xywh=spatial&&spatial[1]?spatial[1].split(","):[0,0,this._canvasWidth,this._canvasHeight];var t=void 0;t=temporal&&temporal[1]?temporal[1].split(","):[0,this._canvasClockDuration];var positionLeft=parseInt(xywh[0]),positionTop=parseInt(xywh[1]),mediaWidth=parseInt(xywh[2]),mediaHeight=parseInt(xywh[3]),startTime=parseInt(t[0]),endTime=parseInt(t[1]),percentageTop=this._convertToPercentage(positionTop,this._canvasHeight),percentageLeft=this._convertToPercentage(positionLeft,this._canvasWidth),percentageWidth=this._convertToPercentage(mediaWidth,this._canvasWidth),percentageHeight=this._convertToPercentage(mediaHeight,this._canvasHeight),temporalOffsets=/t=([^&]+)/g.exec(body.id),ot=void 0;ot=temporalOffsets&&temporalOffsets[1]?temporalOffsets[1].split(","):[null,null];var offsetStart=ot[0]?parseInt(ot[0]):ot[0],offsetEnd=ot[1]?parseInt(ot[1]):ot[1],itemData={type:type,source:mediaSource,start:startTime,end:endTime,top:percentageTop,left:percentageLeft,width:percentageWidth,height:percentageHeight,startOffset:offsetStart,endOffset:offsetEnd,active:!1,format:format};this._renderMediaElement(itemData)}},CanvasInstance.prototype.set=function(data){var oldData=Object.assign({},this._data);this._data=Object.assign(this._data,data);var diff=IIIFComponents.AVComponentUtils.Utils.diff(oldData,this._data);diff.includes("visible")&&this._data.canvas&&(this._data.visible?this.$playerElement.show():(this.$playerElement.hide(),this._pause()),this.resize()),diff.includes("range")&&this._data.helper&&(this._data.range?this._data.range.duration&&(this._data.range.spans(this._canvasClockTime)||this._setCurrentTime(this._data.range.duration.start),this._play(),this.fire(IIIFComponents.AVComponent.Events.RANGE_CHANGED,this._data.range.rangeId)):this.fire(IIIFComponents.AVComponent.Events.RANGE_CHANGED,null)),this._render()},CanvasInstance.prototype._render=function(){var _this=this;if(this._data.range&&this._data.range.duration){var totalLength=this._canvasClockDuration,timelineLength=this._$canvasTimelineContainer.width(),ratio=timelineLength/totalLength,start=this._data.range.duration.start*ratio,end=this._data.range.duration.end*ratio,width=end-start;this._$durationHighlight.show(),this._$durationHighlight.css({left:start,width:width});var that_1=this;this._$rangeTimelineContainer.slider("destroy"),this._$rangeTimelineContainer.slider({value:this._data.range.duration.start,step:.01,orientation:"horizontal",range:"min",min:this._data.range.duration.start,max:this._data.range.duration.end,animate:!1,create:function(evt,ui){},slide:function(evt,ui){that_1._setCurrentTime(ui.value)},stop:function(evt,ui){}})}else this._$durationHighlight.hide();this._contentAnnotations.forEach(function($mediaElement){$($mediaElement.element).prop("volume",_this._data.volume),_this._volume.set({volume:_this._data.volume})}),this._data.limitToRange&&this._data.range?(this._$canvasTimelineContainer.hide(),this._$rangeTimelineContainer.show()):(this._$canvasTimelineContainer.show(),this._$rangeTimelineContainer.hide()),this._updateCurrentTimeDisplay(),this._updateDurationDisplay()},CanvasInstance.prototype.getCanvasId=function(){return this._data&&this._data.canvas?this._data.canvas.id:null},CanvasInstance.prototype._updateHoverPreview=function(e,$container,duration){var offset=$container.offset(),x=e.pageX-offset.left,$hoverArrow=$container.find(".arrow"),$hoverHighlight=$container.find(".hover-highlight"),$hoverPreview=$container.find(".hover-preview");$hoverHighlight.width(x);var fullWidth=$container.width(),ratio=x/fullWidth,seconds=Math.min(duration*ratio);$hoverPreview.find(".label").text(IIIFComponents.AVComponentUtils.Utils.formatTime(seconds));var hoverPreviewWidth=$hoverPreview.outerWidth(),hoverPreviewHeight=$hoverPreview.outerHeight(),left=x-.5*hoverPreviewWidth,arrowLeft=.5*hoverPreviewWidth-6;left<0&&(left=0,arrowLeft=x-6),left+hoverPreviewWidth>fullWidth&&(left=fullWidth-hoverPreviewWidth,arrowLeft=hoverPreviewWidth-(fullWidth-x)-6),$hoverPreview.css({left:left,top:hoverPreviewHeight*-1+"px"}).show(),$hoverArrow.css({left:arrowLeft})},CanvasInstance.prototype._previous=function(isDouble){this._data.limitToRange?isDouble?this._isNavigationConstrainedToRange()?this._rewind():this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE):this._rewind():this._data.range?isDouble?(this.set({range:void 0}),this._rewind()):this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE):this._rewind()},CanvasInstance.prototype._next=function(){this._data.limitToRange&&this._isNavigationConstrainedToRange()?this._fastforward():this.fire(IIIFComponents.AVComponentCanvasInstance.Events.NEXT_RANGE)},CanvasInstance.prototype.destroy=function(){window.clearInterval(this._highPriorityInterval),window.clearInterval(this._lowPriorityInterval),window.clearInterval(this._canvasClockInterval)},CanvasInstance.prototype._convertToPercentage=function(pixelValue,maxValue){var percentage=pixelValue/maxValue*100;return percentage},CanvasInstance.prototype._renderMediaElement=function(data){var $mediaElement,_this=this,type=data.type.toString().toLowerCase();switch(type){case"image":$mediaElement=$('<img class="anno" src="'+data.source+'" />');break;case"video":$mediaElement=$('<video class="anno" />');break;case"audio":$mediaElement=$('<audio class="anno" />');break;case"textualbody":$mediaElement=$('<div class="anno">'+data.source+"</div>");break;default:return}var video=$mediaElement[0];if(data.format&&"application/dash+xml"===data.format.toString()){$mediaElement.attr("data-dashjs-player","");var player=dashjs.MediaPlayer().create();player.initialize(video,data.source)}else if(data.format&&"application/vnd.apple.mpegurl"===data.format.toString())if(Hls.isSupported()){var hls=new Hls;hls.loadSource(data.source),hls.attachMedia(video),hls.on(Hls.Events.MANIFEST_PARSED,function(){video.play()})}else video.canPlayType("application/vnd.apple.mpegurl")&&(video.src=data.source,video.addEventListener("canplay",function(){video.play()}));else $mediaElement.attr("src",data.source);if($mediaElement.css({top:data.top+"%",left:data.left+"%",width:data.width+"%",height:data.height+"%"}).hide(),data.element=$mediaElement,"video"===type||"audio"===type){data.timeout=null;var that_2=this;data.checkForStall=function(){var self=this;this.active?(that_2._checkMediaSynchronization(),this.element.get(0).readyState>0&&!this.outOfSync?that_2._playbackStalled(!1,self):(that_2._playbackStalled(!0,self),this.timeout&&window.clearTimeout(this.timeout),this.timeout=window.setTimeout(function(){self.checkForStall()},1e3))):that_2._playbackStalled(!1,self)}}this._contentAnnotations.push(data),this.$playerElement&&this._$canvasContainer.append($mediaElement),"video"!==type&&"audio"!==type||($mediaElement.on("loadstart",function(){data.checkForStall()}),$mediaElement.on("waiting",function(){data.checkForStall()}),$mediaElement.on("seeking",function(){}),$mediaElement.on("loadedmetadata",function(){_this._readyCanvasesCount++,_this._readyCanvasesCount===_this._contentAnnotations.length&&(_this._setCurrentTime(0),_this.options.data.autoPlay&&_this._play(),_this._updateDurationDisplay(),_this.fire(IIIFComponents.AVComponent.Events.CANVASREADY))}),$mediaElement.attr("preload","auto"),$mediaElement.get(0).load()),this._renderSyncIndicator(data)},CanvasInstance.prototype._hasRangeChanged=function(){var range=this._getRangeForCurrentTime();range===this._data.range||this._data.limitToRange||this.set({range:range})},CanvasInstance.prototype._getRangeForCurrentTime=function(){for(var i=0;i<this._ranges.length;i++){var range=this._ranges[i];if(!range.nonav&&range.spans(this._canvasClockTime))return range}},CanvasInstance.prototype._updateCurrentTimeDisplay=function(){if(this._data.limitToRange&&this._data.range&&this._data.range.duration){var rangeClockTime=this._canvasClockTime-this._data.range.duration.start;this._$canvasTime.text(IIIFComponents.AVComponentUtils.Utils.formatTime(rangeClockTime))}else this._$canvasTime.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._canvasClockTime))},CanvasInstance.prototype._updateDurationDisplay=function(){this._data.limitToRange&&this._data.range&&this._data.range.duration?this._$canvasDuration.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._data.range.duration.getLength())):this._$canvasDuration.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._canvasClockDuration))},CanvasInstance.prototype._renderSyncIndicator=function(mediaElementData){var leftPercent=this._convertToPercentage(mediaElementData.start,this._canvasClockDuration),widthPercent=this._convertToPercentage(mediaElementData.end-mediaElementData.start,this._canvasClockDuration),$timelineItem=$('<div class="timeline-item" title="'+mediaElementData.source+'" data-start="'+mediaElementData.start+'" data-end="'+mediaElementData.end+'"></div>');$timelineItem.css({left:leftPercent+"%",width:widthPercent+"%"});var $lineWrapper=$('<div class="line-wrapper"></div>');$timelineItem.appendTo($lineWrapper),mediaElementData.timelineElement=$timelineItem,this.$playerElement&&this._$timelineItemContainer.append($lineWrapper)},CanvasInstance.prototype._setCurrentTime=function(seconds){this._canvasClockTime=seconds,this._canvasClockStartDate=Date.now()-1e3*this._canvasClockTime,this.logMessage("SET CURRENT TIME to: "+this._canvasClockTime+" seconds."),this._canvasClockUpdater(),this._highPriorityUpdater(),this._lowPriorityUpdater(),this._synchronizeMedia()},CanvasInstance.prototype._rewind=function(withoutUpdate){this._pause(),this._data.limitToRange&&this._data.range&&this._data.range.duration?this._canvasClockTime=this._data.range.duration.start:this._canvasClockTime=0,this._data.limitToRange||this._data&&this._data.helper&&this.set({range:void 0}),this._play()},CanvasInstance.prototype._fastforward=function(){this._data.limitToRange&&this._data.range&&this._data.range.duration?this._canvasClockTime=this._data.range.duration.end:this._canvasClockTime=this._canvasClockDuration,this._pause()},CanvasInstance.prototype._play=function(withoutUpdate){var _this=this;this._isPlaying||(this._data.limitToRange&&this._data.range&&this._data.range.duration&&this._canvasClockTime>=this._data.range.duration.end&&(this._canvasClockTime=this._data.range.duration.start),this._canvasClockTime===this._canvasClockDuration&&(this._canvasClockTime=0),this._canvasClockStartDate=Date.now()-1e3*this._canvasClockTime,this._highPriorityInterval=window.setInterval(function(){_this._highPriorityUpdater()},this._highPriorityFrequency),this._lowPriorityInterval=window.setInterval(function(){_this._lowPriorityUpdater()},this._lowPriorityFrequency),this._canvasClockInterval=window.setInterval(function(){_this._canvasClockUpdater()},this._canvasClockFrequency),this._isPlaying=!0,withoutUpdate||this._synchronizeMedia(),this._$playButton.find("i").switchClass("play","pause"),this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PLAYCANVAS),this.logMessage("PLAY canvas"))},CanvasInstance.prototype._pause=function(withoutUpdate){window.clearInterval(this._highPriorityInterval),window.clearInterval(this._lowPriorityInterval),window.clearInterval(this._canvasClockInterval),this._isPlaying=!1,withoutUpdate||(this._highPriorityUpdater(),this._lowPriorityUpdater(),this._synchronizeMedia()),this._$playButton.find("i").switchClass("pause","play"),this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PAUSECANVAS),this.logMessage("PAUSE canvas")},CanvasInstance.prototype._isNavigationConstrainedToRange=function(){return this._data.constrainNavigationToRange},CanvasInstance.prototype._canvasClockUpdater=function(){this._canvasClockTime=(Date.now()-this._canvasClockStartDate)/1e3,this._data.limitToRange&&this._data.range&&this._data.range.duration&&this._canvasClockTime>=this._data.range.duration.end&&this._pause(),this._canvasClockTime>=this._canvasClockDuration&&(this._canvasClockTime=this._canvasClockDuration,this._pause())},CanvasInstance.prototype._highPriorityUpdater=function(){this._$rangeTimelineContainer.slider({value:this._canvasClockTime}),this._$canvasTimelineContainer.slider({value:this._canvasClockTime}),this._updateCurrentTimeDisplay(),this._updateDurationDisplay()},CanvasInstance.prototype._lowPriorityUpdater=function(){this._updateMediaActiveStates(),this._isPlaying&&this._data.autoSelectRange&&this._hasRangeChanged()},CanvasInstance.prototype._updateMediaActiveStates=function(){for(var contentAnnotation,i=0;i<this._contentAnnotations.length;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime?(this._checkMediaSynchronization(),contentAnnotation.active||(this._synchronizeMedia(),contentAnnotation.active=!0,contentAnnotation.element.show(),contentAnnotation.timelineElement.addClass("active")),"video"!==type&&"audio"!==type||contentAnnotation.element[0].currentTime>contentAnnotation.element[0].duration-contentAnnotation.endOffset&&this._pauseMedia(contentAnnotation.element[0])):contentAnnotation.active&&(contentAnnotation.active=!1,contentAnnotation.element.hide(),contentAnnotation.timelineElement.removeClass("active"),"video"!==type&&"audio"!==type||this._pauseMedia(contentAnnotation.element[0]))}},CanvasInstance.prototype._pauseMedia=function(media){var playPromise=media.play();void 0!==playPromise?playPromise.then(function(_){media.pause()}):media.pause()},CanvasInstance.prototype._setMediaCurrentTime=function(media,time){isNaN(media.duration)||(media.currentTime=time)},CanvasInstance.prototype._synchronizeMedia=function(){for(var contentAnnotation,i=0;i<this._contentAnnotations.length;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();if("video"===type||"audio"===type){if(this._setMediaCurrentTime(contentAnnotation.element[0],this._canvasClockTime-contentAnnotation.start+contentAnnotation.startOffset),contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime)if(this._isPlaying){if(contentAnnotation.element[0].paused){var promise=contentAnnotation.element[0].play();promise&&promise["catch"](function(){})}}else this._pauseMedia(contentAnnotation.element[0]);else this._pauseMedia(contentAnnotation.element[0]);contentAnnotation.element[0].currentTime>contentAnnotation.element[0].duration-contentAnnotation.endOffset&&this._pauseMedia(contentAnnotation.element[0])}}this.logMessage("SYNC MEDIA at: "+this._canvasClockTime+" seconds.")},CanvasInstance.prototype._checkMediaSynchronization=function(){for(var contentAnnotation,i=0,l=this._contentAnnotations.length;i<l;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();if(("video"===type||"audio"===type)&&contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime){var correctTime=this._canvasClockTime-contentAnnotation.start+contentAnnotation.startOffset,factualTime=contentAnnotation.element[0].currentTime;if(Math.abs(factualTime-correctTime)>.4){contentAnnotation.outOfSync=!0;
+var lag=Math.abs(factualTime-correctTime);this.logMessage("DETECTED synchronization lag: "+Math.abs(lag)),this._setMediaCurrentTime(contentAnnotation.element[0],correctTime)}else contentAnnotation.outOfSync=!1}}},CanvasInstance.prototype._playbackStalled=function(aBoolean,syncMediaRequestingStall){if(aBoolean)this._stallRequestedBy.indexOf(syncMediaRequestingStall)<0&&this._stallRequestedBy.push(syncMediaRequestingStall),this._isStalled||(this.$playerElement,this._wasPlaying=this._isPlaying,this._pause(!0),this._isStalled=aBoolean);else{var idx=this._stallRequestedBy.indexOf(syncMediaRequestingStall);idx>=0&&this._stallRequestedBy.splice(idx,1),0===this._stallRequestedBy.length&&(this._isStalled&&this._wasPlaying&&this._play(!0),this._isStalled=aBoolean)}},CanvasInstance.prototype.resize=function(){if(this.$playerElement){var containerWidth=this._$canvasContainer.width();if(containerWidth){this._$canvasTimelineContainer.width(containerWidth);var $options=this.$playerElement.find(".options-container");this._$canvasContainer.height(this.$playerElement.parent().height()-$options.height())}this._render()}},CanvasInstance}(_Components.BaseComponent);IIIFComponents.CanvasInstance=CanvasInstance}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponentCanvasInstance;!function(AVComponentCanvasInstance){var Events=function(){function Events(){}return Events.NEXT_RANGE="nextrange",Events.PAUSECANVAS="pause",Events.PLAYCANVAS="play",Events.PREVIOUS_RANGE="previousrange",Events}();AVComponentCanvasInstance.Events=Events}(AVComponentCanvasInstance=IIIFComponents.AVComponentCanvasInstance||(IIIFComponents.AVComponentCanvasInstance={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var CanvasRange=function(){function CanvasRange(range){if(this.rangeId=null,this.duration=null,this.nonav=!1,range.canvases&&range.canvases.length){this.rangeId=range.id;var canvasId=range.canvases[0],temporal=/t=([^&]+)/g.exec(canvasId);if(temporal&&temporal.length>1){var rangeTiming=temporal[1].split(",");this.duration=new AVComponentObjects.Duration(Number(rangeTiming[0]),Number(rangeTiming[1]))}this.nonav="no-nav"===range.getProperty("behavior")}}return CanvasRange.prototype.spans=function(time){return!!(this.duration&&time>=this.duration.start&&time<=this.duration.end)},CanvasRange}();AVComponentObjects.CanvasRange=CanvasRange}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var Duration=function(){function Duration(start,end){this.start=start,this.end=end}return Duration.prototype.getLength=function(){return this.end-this.start},Duration}();AVComponentObjects.Duration=Duration}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentUtils;!function(AVComponentUtils){var Utils=function(){function Utils(){}return Utils._compare=function(a,b){var changed=[];return Object.keys(a).forEach(function(p){Object.is(b[p],a[p])||changed.push(p)}),changed},Utils.diff=function(a,b){return Array.from(new Set(Utils._compare(a,b).concat(Utils._compare(b,a))))},Utils.formatTime=function(aNumber){var hours,minutes,seconds,hourValue;return seconds=Math.ceil(aNumber),hours=Math.floor(seconds/3600),hours=hours>=10?hours:"0"+hours,minutes=Math.floor(seconds%3600/60),minutes=minutes>=10?minutes:"0"+minutes,seconds=Math.floor(seconds%3600%60),seconds=seconds>=10?seconds:"0"+seconds,hourValue=hours>=1?hours+":":"",hourValue+minutes+":"+seconds},Utils}();AVComponentUtils.Utils=Utils}(AVComponentUtils=IIIFComponents.AVComponentUtils||(IIIFComponents.AVComponentUtils={}))}(IIIFComponents||(IIIFComponents={}))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
\ No newline at end of file
diff --git a/dist/iiif-av-component.d.ts b/dist/iiif-av-component.d.ts
index 9f906d0..7df0678 100644
--- a/dist/iiif-av-component.d.ts
+++ b/dist/iiif-av-component.d.ts
@@ -135,6 +135,8 @@ declare namespace IIIFComponents {
         private _highPriorityUpdater();
         private _lowPriorityUpdater();
         private _updateMediaActiveStates();
+        private _pauseMedia(media);
+        private _setMediaCurrentTime(media, time);
         private _synchronizeMedia();
         private _checkMediaSynchronization();
         private _playbackStalled(aBoolean, syncMediaRequestingStall);
diff --git a/dist/iiif-av-component.js b/dist/iiif-av-component.js
index 54576de..a7cfb05 100644
--- a/dist/iiif-av-component.js
+++ b/dist/iiif-av-component.js
@@ -1159,7 +1159,7 @@ var IIIFComponents;
                     }
                     if (type === 'video' || type === 'audio') {
                         if (contentAnnotation.element[0].currentTime > contentAnnotation.element[0].duration - contentAnnotation.endOffset) {
-                            contentAnnotation.element[0].pause();
+                            this._pauseMedia(contentAnnotation.element[0]);
                         }
                     }
                 }
@@ -1169,20 +1169,37 @@ var IIIFComponents;
                         contentAnnotation.element.hide();
                         contentAnnotation.timelineElement.removeClass('active');
                         if (type === 'video' || type === 'audio') {
-                            contentAnnotation.element[0].pause();
+                            this._pauseMedia(contentAnnotation.element[0]);
                         }
                     }
                 }
             }
             //this.logMessage('UPDATE MEDIA ACTIVE STATES at: '+ this._canvasClockTime + ' seconds.');
         };
+        CanvasInstance.prototype._pauseMedia = function (media) {
+            var playPromise = media.play();
+            if (playPromise !== undefined) {
+                playPromise.then(function (_) {
+                    // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
+                    media.pause();
+                });
+            }
+            else {
+                media.pause();
+            }
+        };
+        CanvasInstance.prototype._setMediaCurrentTime = function (media, time) {
+            if (!isNaN(media.duration)) {
+                media.currentTime = time;
+            }
+        };
         CanvasInstance.prototype._synchronizeMedia = function () {
             var contentAnnotation;
             for (var i = 0; i < this._contentAnnotations.length; i++) {
                 contentAnnotation = this._contentAnnotations[i];
                 var type = contentAnnotation.type.toString().toLowerCase();
                 if (type === 'video' || type === 'audio') {
-                    contentAnnotation.element[0].currentTime = this._canvasClockTime - contentAnnotation.start + contentAnnotation.startOffset;
+                    this._setMediaCurrentTime(contentAnnotation.element[0], this._canvasClockTime - contentAnnotation.start + contentAnnotation.startOffset);
                     if (contentAnnotation.start <= this._canvasClockTime && contentAnnotation.end >= this._canvasClockTime) {
                         if (this._isPlaying) {
                             if (contentAnnotation.element[0].paused) {
@@ -1193,14 +1210,14 @@ var IIIFComponents;
                             }
                         }
                         else {
-                            contentAnnotation.element[0].pause();
+                            this._pauseMedia(contentAnnotation.element[0]);
                         }
                     }
                     else {
-                        contentAnnotation.element[0].pause();
+                        this._pauseMedia(contentAnnotation.element[0]);
                     }
                     if (contentAnnotation.element[0].currentTime > contentAnnotation.element[0].duration - contentAnnotation.endOffset) {
-                        contentAnnotation.element[0].pause();
+                        this._pauseMedia(contentAnnotation.element[0]);
                     }
                 }
             }
@@ -1221,7 +1238,7 @@ var IIIFComponents;
                         //this.playbackStalled(true, contentAnnotation);
                         var lag = Math.abs(factualTime - correctTime);
                         this.logMessage('DETECTED synchronization lag: ' + Math.abs(lag));
-                        contentAnnotation.element[0].currentTime = correctTime;
+                        this._setMediaCurrentTime(contentAnnotation.element[0], correctTime);
                         //this.synchronizeMedia();
                     }
                     else {
diff --git a/dist/iiif-av-component.min.js b/dist/iiif-av-component.min.js
index 4112b6e..5e657f1 100644
--- a/dist/iiif-av-component.min.js
+++ b/dist/iiif-av-component.min.js
@@ -1,3 +1,3 @@
 // iiif-av-component v0.0.36 https://github.com/iiif-commons/iiif-av-component#readme
-!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.iiifAvComponent=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVComponent=function(_super){function AVComponent(options){var _this=_super.call(this,options)||this;return _this._data=_this.data(),_this.canvasInstances=[],_this._init(),_this._resize(),_this}return __extends(AVComponent,_super),AVComponent.prototype._init=function(){var success=_super.prototype._init.call(this);return success||console.error("Component failed to initialise"),success},AVComponent.prototype.data=function(){return{autoPlay:!1,constrainNavigationToRange:!1,defaultAspectRatio:.56,doubleClickMS:350,limitToRange:!1,content:{currentTime:"Current Time",duration:"Duration",mute:"Mute",next:"Next",pause:"Pause",play:"Play",previous:"Previous"}}},AVComponent.prototype.set=function(data){var _this=this,oldData=Object.assign({},this._data);this._data=Object.assign(this._data,data);var diff=IIIFComponents.AVComponentUtils.Utils.diff(oldData,this._data);if(diff.includes("helper")&&this._reset(),!this._data.helper)return void console.warn("must pass a helper object");if(diff.includes("limitToRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({limitToRange:_this._data.limitToRange})}),diff.includes("constrainNavigationToRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({constrainNavigationToRange:_this._data.constrainNavigationToRange})}),diff.includes("autoSelectRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({autoSelectRange:_this._data.autoSelectRange})}),diff.includes("canvasId")&&this._data.canvasId){var currentCanvasInstance_1=this._getCanvasInstanceById(this._data.canvasId);this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance!==currentCanvasInstance_1?canvasInstance.set({visible:!1}):canvasInstance.set({visible:!0})})}if(diff.includes("range")&&this._data.range){var range=this._data.helper.getRangeById(this._data.range.rangeId);if(range){if(range.canvases){var canvasId=Manifesto.Utils.normaliseUrl(range.canvases[0]),canvasInstance=this._getCanvasInstanceById(canvasId);if(canvasInstance){var canvasRange=new IIIFComponents.AVComponentObjects.CanvasRange(range);this._data.canvasId&&Manifesto.Utils.normaliseUrl(this._data.canvasId)!==canvasId?this.set({canvasId:canvasId,range:canvasRange}):canvasInstance.set({range:canvasRange})}}}else console.warn("range not found")}this._render(),this._resize()},AVComponent.prototype._render=function(){},AVComponent.prototype._reset=function(){var _this=this;this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.destroy()}),this.canvasInstances=[],this._$element.empty();var canvases=this._getCanvases();canvases.forEach(function(canvas){_this._initCanvas(canvas)}),this.canvasInstances.length>0&&(this._data.canvasId=this.canvasInstances[0].getCanvasId())},AVComponent.prototype._getCanvases=function(){return this._data.helper?this._data.helper.getCanvases():[]},AVComponent.prototype._initCanvas=function(canvas){var _this=this,canvasInstance=new IIIFComponents.CanvasInstance({target:document.createElement("div"),data:Object.assign({},{canvas:canvas},this._data)});canvasInstance.logMessage=this._logMessage.bind(this),this._$element.append(canvasInstance.$playerElement),canvasInstance.init(),this.canvasInstances.push(canvasInstance),canvasInstance.on(AVComponent.Events.CANVASREADY,function(){_this.fire(AVComponent.Events.CANVASREADY)},!1),canvasInstance.on(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE,function(){_this._prevRange()},!1),canvasInstance.on(IIIFComponents.AVComponentCanvasInstance.Events.NEXT_RANGE,function(){_this._nextRange()},!1),canvasInstance.on(AVComponent.Events.RANGE_CHANGED,function(rangeId){_this.fire(AVComponent.Events.RANGE_CHANGED,rangeId)},!1),canvasInstance.on(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,function(volume){_this._setCanvasInstanceVolumes(volume),_this.fire(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,volume)},!1)},AVComponent.prototype._prevRange=function(){if(this._data&&this._data.helper){var prevRange=this._data.helper.getPreviousRange();prevRange?this.playRange(prevRange.id):this._rewind()}},AVComponent.prototype._nextRange=function(){if(this._data&&this._data.helper){var nextRange=this._data.helper.getNextRange();nextRange&&this.playRange(nextRange.id)}},AVComponent.prototype._setCanvasInstanceVolumes=function(volume){this.canvasInstances.forEach(function(canvasInstance){canvasInstance.set({volume:volume})})},AVComponent.prototype._getCanvasInstanceById=function(canvasId){canvasId=Manifesto.Utils.normaliseUrl(canvasId);for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i],id=canvasInstance.getCanvasId();if(id){var canvasInstanceId=Manifesto.Utils.normaliseUrl(id);if(canvasInstanceId===canvasId)return canvasInstance}}return null},AVComponent.prototype._getCurrentCanvas=function(){return this._data.canvasId?this._getCanvasInstanceById(this._data.canvasId):null},AVComponent.prototype._rewind=function(){if(!this._data.limitToRange){var canvasInstance=this._getCurrentCanvas();canvasInstance&&canvasInstance.set({range:void 0})}},AVComponent.prototype.playRange=function(rangeId){if(this._data.helper){var range=this._data.helper.getRangeById(rangeId);if(range){var canvasRange=new IIIFComponents.AVComponentObjects.CanvasRange(range);this.set({range:canvasRange})}}},AVComponent.prototype.showCanvas=function(canvasId){this.set({canvasId:canvasId})},AVComponent.prototype._logMessage=function(message){this.fire(AVComponent.Events.LOG,message)},AVComponent.prototype.resize=function(){this.canvasInstances.forEach(function(canvasInstance){canvasInstance.resize()})},AVComponent}(_Components.BaseComponent);IIIFComponents.AVComponent=AVComponent}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponent;!function(AVComponent){var Events=function(){function Events(){}return Events.CANVASREADY="canvasready",Events.LOG="log",Events.RANGE_CHANGED="rangechanged",Events}();AVComponent.Events=Events}(AVComponent=IIIFComponents.AVComponent||(IIIFComponents.AVComponent={}))}(IIIFComponents||(IIIFComponents={})),function(g){g.IIIFComponents?g.IIIFComponents.AVComponent=IIIFComponents.AVComponent:g.IIIFComponents=IIIFComponents}(global);var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVVolumeControl=function(_super){function AVVolumeControl(options){var _this=_super.call(this,options)||this;return _this._lastVolume=1,_this._data={volume:1},_this._init(),_this._resize(),_this}return __extends(AVVolumeControl,_super),AVVolumeControl.prototype._init=function(){var _this=this,success=_super.prototype._init.call(this);success||console.error("Component failed to initialise"),this._$volumeMute=$('\n                                <button class="btn volume-mute" title="'+this.options.data.content.mute+'">\n                                    <i class="av-icon-mute on" aria-hidden="true"></i>'+this.options.data.content.mute+"\n                                </button>"),this._$volumeSlider=$('<input type="range" class="volume-slider" min="0" max="1" step="0.01" value="1">'),this._$element.append(this._$volumeMute,this._$volumeSlider);var that=this;return this._$volumeMute.on("click",function(){0!==_this._data.volume?(_this._lastVolume=_this._data.volume,_this._data.volume=0):_this._data.volume=_this._lastVolume,_this._render(),_this.fire(AVVolumeControl.Events.VOLUME_CHANGED,_this._data.volume)}),this._$volumeSlider.on("input",function(){that._data.volume=Number(this.value),0===that._data.volume&&(that._lastVolume=0),that._render(),that.fire(AVVolumeControl.Events.VOLUME_CHANGED,that._data.volume)}),this._$volumeSlider.on("change",function(){that._data.volume=Number(this.value),0===that._data.volume&&(that._lastVolume=0),that._render(),that.fire(AVVolumeControl.Events.VOLUME_CHANGED,that._data.volume)}),success},AVVolumeControl.prototype.set=function(data){this._data=Object.assign(this._data,data),this._render()},AVVolumeControl.prototype._render=function(){this._$volumeSlider.val(this._data.volume),0===this._data.volume?this._$volumeMute.find("i").switchClass("on","off"):this._$volumeMute.find("i").switchClass("off","on")},AVVolumeControl.prototype._resize=function(){},AVVolumeControl}(_Components.BaseComponent);IIIFComponents.AVVolumeControl=AVVolumeControl}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVVolumeControl;!function(AVVolumeControl){var Events=function(){function Events(){}return Events.VOLUME_CHANGED="volumechanged",Events}();AVVolumeControl.Events=Events}(AVVolumeControl=IIIFComponents.AVVolumeControl||(IIIFComponents.AVVolumeControl={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var CanvasInstance=function(_super){function CanvasInstance(options){var _this=_super.call(this,options)||this;return _this._canvasClockDuration=0,_this._canvasClockFrequency=25,_this._canvasClockStartDate=0,_this._canvasClockTime=0,_this._canvasHeight=0,_this._canvasWidth=0,_this._data=_this.data(),_this._highPriorityFrequency=25,_this._isPlaying=!1,_this._isStalled=!1,_this._lowPriorityFrequency=250,_this._ranges=[],_this._readyCanvasesCount=0,_this._stallRequestedBy=[],_this._wasPlaying=!1,_this._data=_this.options.data,_this.$playerElement=$('<div class="player"></div>'),_this}return __extends(CanvasInstance,_super),CanvasInstance.prototype.init=function(){var _this=this;if(!this._data||!this._data.content||!this._data.canvas)return void console.warn("unable to initialise, missing canvas or content");this._$hoverPreviewTemplate=$('<div class="hover-preview"><div class="label"></div><div class="pointer"><span class="arrow"></span></div></div>'),this._$canvasContainer=$('<div class="canvas-container"></div>'),this._$optionsContainer=$('<div class="options-container"></div>'),this._$rangeTimelineContainer=$('<div class="range-timeline-container"></div>'),this._$canvasTimelineContainer=$('<div class="canvas-timeline-container"></div>'),this._$canvasHoverPreview=this._$hoverPreviewTemplate.clone(),this._$canvasHoverHighlight=$('<div class="hover-highlight"></div>'),this._$rangeHoverPreview=this._$hoverPreviewTemplate.clone(),this._$rangeHoverHighlight=$('<div class="hover-highlight"></div>'),this._$durationHighlight=$('<div class="duration-highlight"></div>'),this._$timelineItemContainer=$('<div class="timeline-item-container"></div>'),this._$controlsContainer=$('<div class="controls-container"></div>'),this._$prevButton=$('\n                                <button class="btn" title="'+this._data.content.previous+'">\n                                    <i class="av-icon-previous" aria-hidden="true"></i>'+this._data.content.previous+"\n                                </button>"),this._$playButton=$('\n                                <button class="btn" title="'+this._data.content.play+'">\n                                    <i class="av-icon-play play" aria-hidden="true"></i>'+this._data.content.play+"\n                                </button>"),this._$nextButton=$('\n                                <button class="btn" title="'+this._data.content.next+'">\n                                    <i class="av-icon-next" aria-hidden="true"></i>'+this._data.content.next+"\n                                </button>"),this._$timeDisplay=$('<div class="time-display"><span class="canvas-time"></span> / <span class="canvas-duration"></span></div>'),this._$canvasTime=this._$timeDisplay.find(".canvas-time"),this._$canvasDuration=this._$timeDisplay.find(".canvas-duration");var $volume=$('<div class="volume"></div>');if(this._volume=new IIIFComponents.AVVolumeControl({target:$volume[0],data:Object.assign({},this._data)}),this._volume.on(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,function(value){_this.fire(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,value)},!1),this._$controlsContainer.append(this._$prevButton,this._$playButton,this._$nextButton,this._$timeDisplay,$volume),this._$canvasTimelineContainer.append(this._$canvasHoverPreview,this._$canvasHoverHighlight,this._$durationHighlight),this._$rangeTimelineContainer.append(this._$rangeHoverPreview,this._$rangeHoverHighlight),this._$optionsContainer.append(this._$canvasTimelineContainer,this._$rangeTimelineContainer,this._$timelineItemContainer,this._$controlsContainer),this.$playerElement.append(this._$canvasContainer,this._$optionsContainer),this._$canvasHoverPreview.hide(),this._$rangeHoverPreview.hide(),this._data.helper&&this._data.canvas){var ranges=this._data.helper.getCanvasRanges(this._data.canvas);ranges.forEach(function(range){_this._ranges.push(new IIIFComponents.AVComponentObjects.CanvasRange(range))})}this._canvasClockDuration=this._data.canvas.getDuration();var canvasWidth=this._data.canvas.getWidth(),canvasHeight=this._data.canvas.getHeight();canvasWidth?this._canvasWidth=canvasWidth:this._canvasWidth=this.$playerElement.parent().width(),canvasHeight?this._canvasHeight=canvasHeight:this._canvasHeight=this._canvasWidth*this._data.defaultAspectRatio;var that=this,prevClicks=0,prevTimeout=0;this._$prevButton.on("click",function(){prevClicks++,1===prevClicks?(_this._previous(!1),prevTimeout=setTimeout(function(){prevClicks=0,prevTimeout=0},_this._data.doubleClickMS)):(_this._previous(!0),clearTimeout(prevTimeout),prevClicks=0,prevTimeout=0)}),this._$playButton.on("click",function(){_this._isPlaying?_this._pause():_this._play()}),this._$nextButton.on("click",function(){_this._next()}),this._$canvasTimelineContainer.slider({value:0,step:.01,orientation:"horizontal",range:"min",max:that._canvasClockDuration,animate:!1,create:function(evt,ui){},slide:function(evt,ui){that._setCurrentTime(ui.value)},stop:function(evt,ui){}}),this._$canvasTimelineContainer.mouseout(function(){that._$canvasHoverHighlight.width(0),that._$canvasHoverPreview.hide()}),this._$rangeTimelineContainer.mouseout(function(){that._$rangeHoverHighlight.width(0),that._$rangeHoverPreview.hide()}),this._$canvasTimelineContainer.on("mousemove",function(e){_this._updateHoverPreview(e,_this._$canvasTimelineContainer,_this._canvasClockDuration)}),this._$rangeTimelineContainer.on("mousemove",function(e){_this._data.range&&_this._updateHoverPreview(e,_this._$rangeTimelineContainer,_this._data.range.duration?_this._data.range.duration.getLength():0)}),this._contentAnnotations=[];var items=this._data.canvas.getContent();1===items.length&&this._$timelineItemContainer.hide();for(var i=0;i<items.length;i++){var item=items[i],mediaSource=void 0,bodies=item.getBody();if(!bodies.length)return void console.warn("item has no body");var body=bodies[0],type=body.getType(),format=body.getFormat();type&&"textualbody"===type.toString()||(mediaSource=body.id.split("#")[0]);var target=item.getTarget();if(!target)return void console.warn("item has no target");var spatial=/xywh=([^&]+)/g.exec(target),temporal=/t=([^&]+)/g.exec(target),xywh=void 0;xywh=spatial&&spatial[1]?spatial[1].split(","):[0,0,this._canvasWidth,this._canvasHeight];var t=void 0;t=temporal&&temporal[1]?temporal[1].split(","):[0,this._canvasClockDuration];var positionLeft=parseInt(xywh[0]),positionTop=parseInt(xywh[1]),mediaWidth=parseInt(xywh[2]),mediaHeight=parseInt(xywh[3]),startTime=parseInt(t[0]),endTime=parseInt(t[1]),percentageTop=this._convertToPercentage(positionTop,this._canvasHeight),percentageLeft=this._convertToPercentage(positionLeft,this._canvasWidth),percentageWidth=this._convertToPercentage(mediaWidth,this._canvasWidth),percentageHeight=this._convertToPercentage(mediaHeight,this._canvasHeight),temporalOffsets=/t=([^&]+)/g.exec(body.id),ot=void 0;ot=temporalOffsets&&temporalOffsets[1]?temporalOffsets[1].split(","):[null,null];var offsetStart=ot[0]?parseInt(ot[0]):ot[0],offsetEnd=ot[1]?parseInt(ot[1]):ot[1],itemData={type:type,source:mediaSource,start:startTime,end:endTime,top:percentageTop,left:percentageLeft,width:percentageWidth,height:percentageHeight,startOffset:offsetStart,endOffset:offsetEnd,active:!1,format:format};this._renderMediaElement(itemData)}},CanvasInstance.prototype.set=function(data){var oldData=Object.assign({},this._data);this._data=Object.assign(this._data,data);var diff=IIIFComponents.AVComponentUtils.Utils.diff(oldData,this._data);diff.includes("visible")&&this._data.canvas&&(this._data.visible?this.$playerElement.show():(this.$playerElement.hide(),this._pause()),this.resize()),diff.includes("range")&&this._data.helper&&(this._data.range?this._data.range.duration&&(this._data.range.spans(this._canvasClockTime)||this._setCurrentTime(this._data.range.duration.start),this._play(),this.fire(IIIFComponents.AVComponent.Events.RANGE_CHANGED,this._data.range.rangeId)):this.fire(IIIFComponents.AVComponent.Events.RANGE_CHANGED,null)),this._render()},CanvasInstance.prototype._render=function(){var _this=this;if(this._data.range&&this._data.range.duration){var totalLength=this._canvasClockDuration,timelineLength=this._$canvasTimelineContainer.width(),ratio=timelineLength/totalLength,start=this._data.range.duration.start*ratio,end=this._data.range.duration.end*ratio,width=end-start;this._$durationHighlight.show(),this._$durationHighlight.css({left:start,width:width});var that_1=this;this._$rangeTimelineContainer.slider("destroy"),this._$rangeTimelineContainer.slider({value:this._data.range.duration.start,step:.01,orientation:"horizontal",range:"min",min:this._data.range.duration.start,max:this._data.range.duration.end,animate:!1,create:function(evt,ui){},slide:function(evt,ui){that_1._setCurrentTime(ui.value)},stop:function(evt,ui){}})}else this._$durationHighlight.hide();this._contentAnnotations.forEach(function($mediaElement){$($mediaElement.element).prop("volume",_this._data.volume),_this._volume.set({volume:_this._data.volume})}),this._data.limitToRange&&this._data.range?(this._$canvasTimelineContainer.hide(),this._$rangeTimelineContainer.show()):(this._$canvasTimelineContainer.show(),this._$rangeTimelineContainer.hide()),this._updateCurrentTimeDisplay(),this._updateDurationDisplay()},CanvasInstance.prototype.getCanvasId=function(){return this._data&&this._data.canvas?this._data.canvas.id:null},CanvasInstance.prototype._updateHoverPreview=function(e,$container,duration){var offset=$container.offset(),x=e.pageX-offset.left,$hoverArrow=$container.find(".arrow"),$hoverHighlight=$container.find(".hover-highlight"),$hoverPreview=$container.find(".hover-preview");$hoverHighlight.width(x);var fullWidth=$container.width(),ratio=x/fullWidth,seconds=Math.min(duration*ratio);$hoverPreview.find(".label").text(IIIFComponents.AVComponentUtils.Utils.formatTime(seconds));var hoverPreviewWidth=$hoverPreview.outerWidth(),hoverPreviewHeight=$hoverPreview.outerHeight(),left=x-.5*hoverPreviewWidth,arrowLeft=.5*hoverPreviewWidth-6;left<0&&(left=0,arrowLeft=x-6),left+hoverPreviewWidth>fullWidth&&(left=fullWidth-hoverPreviewWidth,arrowLeft=hoverPreviewWidth-(fullWidth-x)-6),$hoverPreview.css({left:left,top:hoverPreviewHeight*-1+"px"}).show(),$hoverArrow.css({left:arrowLeft})},CanvasInstance.prototype._previous=function(isDouble){this._data.limitToRange?isDouble?this._isNavigationConstrainedToRange()?this._rewind():this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE):this._rewind():this._data.range?isDouble?(this.set({range:void 0}),this._rewind()):this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE):this._rewind()},CanvasInstance.prototype._next=function(){this._data.limitToRange&&this._isNavigationConstrainedToRange()?this._fastforward():this.fire(IIIFComponents.AVComponentCanvasInstance.Events.NEXT_RANGE)},CanvasInstance.prototype.destroy=function(){window.clearInterval(this._highPriorityInterval),window.clearInterval(this._lowPriorityInterval),window.clearInterval(this._canvasClockInterval)},CanvasInstance.prototype._convertToPercentage=function(pixelValue,maxValue){var percentage=pixelValue/maxValue*100;return percentage},CanvasInstance.prototype._renderMediaElement=function(data){var $mediaElement,_this=this,type=data.type.toString().toLowerCase();switch(type){case"image":$mediaElement=$('<img class="anno" src="'+data.source+'" />');break;case"video":$mediaElement=$('<video class="anno" />');break;case"audio":$mediaElement=$('<audio class="anno" />');break;case"textualbody":$mediaElement=$('<div class="anno">'+data.source+"</div>");break;default:return}var video=$mediaElement[0];if(data.format&&"application/dash+xml"===data.format.toString()){$mediaElement.attr("data-dashjs-player","");var player=dashjs.MediaPlayer().create();player.initialize(video,data.source)}else if(data.format&&"application/vnd.apple.mpegurl"===data.format.toString())if(Hls.isSupported()){var hls=new Hls;hls.loadSource(data.source),hls.attachMedia(video),hls.on(Hls.Events.MANIFEST_PARSED,function(){video.play()})}else video.canPlayType("application/vnd.apple.mpegurl")&&(video.src=data.source,video.addEventListener("canplay",function(){video.play()}));else $mediaElement.attr("src",data.source);if($mediaElement.css({top:data.top+"%",left:data.left+"%",width:data.width+"%",height:data.height+"%"}).hide(),data.element=$mediaElement,"video"===type||"audio"===type){data.timeout=null;var that_2=this;data.checkForStall=function(){var self=this;this.active?(that_2._checkMediaSynchronization(),this.element.get(0).readyState>0&&!this.outOfSync?that_2._playbackStalled(!1,self):(that_2._playbackStalled(!0,self),this.timeout&&window.clearTimeout(this.timeout),this.timeout=window.setTimeout(function(){self.checkForStall()},1e3))):that_2._playbackStalled(!1,self)}}this._contentAnnotations.push(data),this.$playerElement&&this._$canvasContainer.append($mediaElement),"video"!==type&&"audio"!==type||($mediaElement.on("loadstart",function(){data.checkForStall()}),$mediaElement.on("waiting",function(){data.checkForStall()}),$mediaElement.on("seeking",function(){}),$mediaElement.on("loadedmetadata",function(){_this._readyCanvasesCount++,_this._readyCanvasesCount===_this._contentAnnotations.length&&(_this._setCurrentTime(0),_this.options.data.autoPlay&&_this._play(),_this._updateDurationDisplay(),_this.fire(IIIFComponents.AVComponent.Events.CANVASREADY))}),$mediaElement.attr("preload","auto"),$mediaElement.get(0).load()),this._renderSyncIndicator(data)},CanvasInstance.prototype._hasRangeChanged=function(){var range=this._getRangeForCurrentTime();range===this._data.range||this._data.limitToRange||this.set({range:range})},CanvasInstance.prototype._getRangeForCurrentTime=function(){for(var i=0;i<this._ranges.length;i++){var range=this._ranges[i];if(!range.nonav&&range.spans(this._canvasClockTime))return range}},CanvasInstance.prototype._updateCurrentTimeDisplay=function(){if(this._data.limitToRange&&this._data.range&&this._data.range.duration){var rangeClockTime=this._canvasClockTime-this._data.range.duration.start;this._$canvasTime.text(IIIFComponents.AVComponentUtils.Utils.formatTime(rangeClockTime))}else this._$canvasTime.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._canvasClockTime))},CanvasInstance.prototype._updateDurationDisplay=function(){this._data.limitToRange&&this._data.range&&this._data.range.duration?this._$canvasDuration.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._data.range.duration.getLength())):this._$canvasDuration.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._canvasClockDuration))},CanvasInstance.prototype._renderSyncIndicator=function(mediaElementData){var leftPercent=this._convertToPercentage(mediaElementData.start,this._canvasClockDuration),widthPercent=this._convertToPercentage(mediaElementData.end-mediaElementData.start,this._canvasClockDuration),$timelineItem=$('<div class="timeline-item" title="'+mediaElementData.source+'" data-start="'+mediaElementData.start+'" data-end="'+mediaElementData.end+'"></div>');$timelineItem.css({left:leftPercent+"%",width:widthPercent+"%"});var $lineWrapper=$('<div class="line-wrapper"></div>');$timelineItem.appendTo($lineWrapper),mediaElementData.timelineElement=$timelineItem,this.$playerElement&&this._$timelineItemContainer.append($lineWrapper)},CanvasInstance.prototype._setCurrentTime=function(seconds){this._canvasClockTime=seconds,this._canvasClockStartDate=Date.now()-1e3*this._canvasClockTime,this.logMessage("SET CURRENT TIME to: "+this._canvasClockTime+" seconds."),this._canvasClockUpdater(),this._highPriorityUpdater(),this._lowPriorityUpdater(),this._synchronizeMedia()},CanvasInstance.prototype._rewind=function(withoutUpdate){this._pause(),this._data.limitToRange&&this._data.range&&this._data.range.duration?this._canvasClockTime=this._data.range.duration.start:this._canvasClockTime=0,this._data.limitToRange||this._data&&this._data.helper&&this.set({range:void 0}),this._play()},CanvasInstance.prototype._fastforward=function(){this._data.limitToRange&&this._data.range&&this._data.range.duration?this._canvasClockTime=this._data.range.duration.end:this._canvasClockTime=this._canvasClockDuration,this._pause()},CanvasInstance.prototype._play=function(withoutUpdate){var _this=this;this._isPlaying||(this._data.limitToRange&&this._data.range&&this._data.range.duration&&this._canvasClockTime>=this._data.range.duration.end&&(this._canvasClockTime=this._data.range.duration.start),this._canvasClockTime===this._canvasClockDuration&&(this._canvasClockTime=0),this._canvasClockStartDate=Date.now()-1e3*this._canvasClockTime,this._highPriorityInterval=window.setInterval(function(){_this._highPriorityUpdater()},this._highPriorityFrequency),this._lowPriorityInterval=window.setInterval(function(){_this._lowPriorityUpdater()},this._lowPriorityFrequency),this._canvasClockInterval=window.setInterval(function(){_this._canvasClockUpdater()},this._canvasClockFrequency),this._isPlaying=!0,withoutUpdate||this._synchronizeMedia(),this._$playButton.find("i").switchClass("play","pause"),this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PLAYCANVAS),this.logMessage("PLAY canvas"))},CanvasInstance.prototype._pause=function(withoutUpdate){window.clearInterval(this._highPriorityInterval),window.clearInterval(this._lowPriorityInterval),window.clearInterval(this._canvasClockInterval),this._isPlaying=!1,withoutUpdate||(this._highPriorityUpdater(),this._lowPriorityUpdater(),this._synchronizeMedia()),this._$playButton.find("i").switchClass("pause","play"),this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PAUSECANVAS),this.logMessage("PAUSE canvas")},CanvasInstance.prototype._isNavigationConstrainedToRange=function(){return this._data.constrainNavigationToRange},CanvasInstance.prototype._canvasClockUpdater=function(){this._canvasClockTime=(Date.now()-this._canvasClockStartDate)/1e3,this._data.limitToRange&&this._data.range&&this._data.range.duration&&this._canvasClockTime>=this._data.range.duration.end&&this._pause(),this._canvasClockTime>=this._canvasClockDuration&&(this._canvasClockTime=this._canvasClockDuration,this._pause())},CanvasInstance.prototype._highPriorityUpdater=function(){this._$rangeTimelineContainer.slider({value:this._canvasClockTime}),this._$canvasTimelineContainer.slider({value:this._canvasClockTime}),this._updateCurrentTimeDisplay(),this._updateDurationDisplay()},CanvasInstance.prototype._lowPriorityUpdater=function(){this._updateMediaActiveStates(),this._isPlaying&&this._data.autoSelectRange&&this._hasRangeChanged()},CanvasInstance.prototype._updateMediaActiveStates=function(){for(var contentAnnotation,i=0;i<this._contentAnnotations.length;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime?(this._checkMediaSynchronization(),contentAnnotation.active||(this._synchronizeMedia(),contentAnnotation.active=!0,contentAnnotation.element.show(),contentAnnotation.timelineElement.addClass("active")),"video"!==type&&"audio"!==type||contentAnnotation.element[0].currentTime>contentAnnotation.element[0].duration-contentAnnotation.endOffset&&contentAnnotation.element[0].pause()):contentAnnotation.active&&(contentAnnotation.active=!1,contentAnnotation.element.hide(),contentAnnotation.timelineElement.removeClass("active"),"video"!==type&&"audio"!==type||contentAnnotation.element[0].pause())}},CanvasInstance.prototype._synchronizeMedia=function(){for(var contentAnnotation,i=0;i<this._contentAnnotations.length;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();if("video"===type||"audio"===type){if(contentAnnotation.element[0].currentTime=this._canvasClockTime-contentAnnotation.start+contentAnnotation.startOffset,contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime)if(this._isPlaying){if(contentAnnotation.element[0].paused){var promise=contentAnnotation.element[0].play();promise&&promise["catch"](function(){})}}else contentAnnotation.element[0].pause();else contentAnnotation.element[0].pause();contentAnnotation.element[0].currentTime>contentAnnotation.element[0].duration-contentAnnotation.endOffset&&contentAnnotation.element[0].pause()}}this.logMessage("SYNC MEDIA at: "+this._canvasClockTime+" seconds.")},CanvasInstance.prototype._checkMediaSynchronization=function(){for(var contentAnnotation,i=0,l=this._contentAnnotations.length;i<l;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();if(("video"===type||"audio"===type)&&contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime){var correctTime=this._canvasClockTime-contentAnnotation.start+contentAnnotation.startOffset,factualTime=contentAnnotation.element[0].currentTime;if(Math.abs(factualTime-correctTime)>.4){contentAnnotation.outOfSync=!0;var lag=Math.abs(factualTime-correctTime);this.logMessage("DETECTED synchronization lag: "+Math.abs(lag)),contentAnnotation.element[0].currentTime=correctTime}else contentAnnotation.outOfSync=!1}}},CanvasInstance.prototype._playbackStalled=function(aBoolean,syncMediaRequestingStall){if(aBoolean)this._stallRequestedBy.indexOf(syncMediaRequestingStall)<0&&this._stallRequestedBy.push(syncMediaRequestingStall),
-this._isStalled||(this.$playerElement,this._wasPlaying=this._isPlaying,this._pause(!0),this._isStalled=aBoolean);else{var idx=this._stallRequestedBy.indexOf(syncMediaRequestingStall);idx>=0&&this._stallRequestedBy.splice(idx,1),0===this._stallRequestedBy.length&&(this._isStalled&&this._wasPlaying&&this._play(!0),this._isStalled=aBoolean)}},CanvasInstance.prototype.resize=function(){if(this.$playerElement){var containerWidth=this._$canvasContainer.width();if(containerWidth){this._$canvasTimelineContainer.width(containerWidth);var $options=this.$playerElement.find(".options-container");this._$canvasContainer.height(this.$playerElement.parent().height()-$options.height())}this._render()}},CanvasInstance}(_Components.BaseComponent);IIIFComponents.CanvasInstance=CanvasInstance}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponentCanvasInstance;!function(AVComponentCanvasInstance){var Events=function(){function Events(){}return Events.NEXT_RANGE="nextrange",Events.PAUSECANVAS="pause",Events.PLAYCANVAS="play",Events.PREVIOUS_RANGE="previousrange",Events}();AVComponentCanvasInstance.Events=Events}(AVComponentCanvasInstance=IIIFComponents.AVComponentCanvasInstance||(IIIFComponents.AVComponentCanvasInstance={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var CanvasRange=function(){function CanvasRange(range){if(this.rangeId=null,this.duration=null,this.nonav=!1,range.canvases&&range.canvases.length){this.rangeId=range.id;var canvasId=range.canvases[0],temporal=/t=([^&]+)/g.exec(canvasId);if(temporal&&temporal.length>1){var rangeTiming=temporal[1].split(",");this.duration=new AVComponentObjects.Duration(Number(rangeTiming[0]),Number(rangeTiming[1]))}this.nonav="no-nav"===range.getProperty("behavior")}}return CanvasRange.prototype.spans=function(time){return!!(this.duration&&time>=this.duration.start&&time<=this.duration.end)},CanvasRange}();AVComponentObjects.CanvasRange=CanvasRange}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var Duration=function(){function Duration(start,end){this.start=start,this.end=end}return Duration.prototype.getLength=function(){return this.end-this.start},Duration}();AVComponentObjects.Duration=Duration}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentUtils;!function(AVComponentUtils){var Utils=function(){function Utils(){}return Utils._compare=function(a,b){var changed=[];return Object.keys(a).forEach(function(p){Object.is(b[p],a[p])||changed.push(p)}),changed},Utils.diff=function(a,b){return Array.from(new Set(Utils._compare(a,b).concat(Utils._compare(b,a))))},Utils.formatTime=function(aNumber){var hours,minutes,seconds,hourValue;return seconds=Math.ceil(aNumber),hours=Math.floor(seconds/3600),hours=hours>=10?hours:"0"+hours,minutes=Math.floor(seconds%3600/60),minutes=minutes>=10?minutes:"0"+minutes,seconds=Math.floor(seconds%3600%60),seconds=seconds>=10?seconds:"0"+seconds,hourValue=hours>=1?hours+":":"",hourValue+minutes+":"+seconds},Utils}();AVComponentUtils.Utils=Utils}(AVComponentUtils=IIIFComponents.AVComponentUtils||(IIIFComponents.AVComponentUtils={}))}(IIIFComponents||(IIIFComponents={}))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
\ No newline at end of file
+!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{var g;g="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,g.iiifAvComponent=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){(function(global){var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVComponent=function(_super){function AVComponent(options){var _this=_super.call(this,options)||this;return _this._data=_this.data(),_this.canvasInstances=[],_this._init(),_this._resize(),_this}return __extends(AVComponent,_super),AVComponent.prototype._init=function(){var success=_super.prototype._init.call(this);return success||console.error("Component failed to initialise"),success},AVComponent.prototype.data=function(){return{autoPlay:!1,constrainNavigationToRange:!1,defaultAspectRatio:.56,doubleClickMS:350,limitToRange:!1,content:{currentTime:"Current Time",duration:"Duration",mute:"Mute",next:"Next",pause:"Pause",play:"Play",previous:"Previous"}}},AVComponent.prototype.set=function(data){var _this=this,oldData=Object.assign({},this._data);this._data=Object.assign(this._data,data);var diff=IIIFComponents.AVComponentUtils.Utils.diff(oldData,this._data);if(diff.includes("helper")&&this._reset(),!this._data.helper)return void console.warn("must pass a helper object");if(diff.includes("limitToRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({limitToRange:_this._data.limitToRange})}),diff.includes("constrainNavigationToRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({constrainNavigationToRange:_this._data.constrainNavigationToRange})}),diff.includes("autoSelectRange")&&this._data.canvasId&&this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.set({autoSelectRange:_this._data.autoSelectRange})}),diff.includes("canvasId")&&this._data.canvasId){var currentCanvasInstance_1=this._getCanvasInstanceById(this._data.canvasId);this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance!==currentCanvasInstance_1?canvasInstance.set({visible:!1}):canvasInstance.set({visible:!0})})}if(diff.includes("range")&&this._data.range){var range=this._data.helper.getRangeById(this._data.range.rangeId);if(range){if(range.canvases){var canvasId=Manifesto.Utils.normaliseUrl(range.canvases[0]),canvasInstance=this._getCanvasInstanceById(canvasId);if(canvasInstance){var canvasRange=new IIIFComponents.AVComponentObjects.CanvasRange(range);this._data.canvasId&&Manifesto.Utils.normaliseUrl(this._data.canvasId)!==canvasId?this.set({canvasId:canvasId,range:canvasRange}):canvasInstance.set({range:canvasRange})}}}else console.warn("range not found")}this._render(),this._resize()},AVComponent.prototype._render=function(){},AVComponent.prototype._reset=function(){var _this=this;this.canvasInstances.forEach(function(canvasInstance,index){canvasInstance.destroy()}),this.canvasInstances=[],this._$element.empty();var canvases=this._getCanvases();canvases.forEach(function(canvas){_this._initCanvas(canvas)}),this.canvasInstances.length>0&&(this._data.canvasId=this.canvasInstances[0].getCanvasId())},AVComponent.prototype._getCanvases=function(){return this._data.helper?this._data.helper.getCanvases():[]},AVComponent.prototype._initCanvas=function(canvas){var _this=this,canvasInstance=new IIIFComponents.CanvasInstance({target:document.createElement("div"),data:Object.assign({},{canvas:canvas},this._data)});canvasInstance.logMessage=this._logMessage.bind(this),this._$element.append(canvasInstance.$playerElement),canvasInstance.init(),this.canvasInstances.push(canvasInstance),canvasInstance.on(AVComponent.Events.CANVASREADY,function(){_this.fire(AVComponent.Events.CANVASREADY)},!1),canvasInstance.on(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE,function(){_this._prevRange()},!1),canvasInstance.on(IIIFComponents.AVComponentCanvasInstance.Events.NEXT_RANGE,function(){_this._nextRange()},!1),canvasInstance.on(AVComponent.Events.RANGE_CHANGED,function(rangeId){_this.fire(AVComponent.Events.RANGE_CHANGED,rangeId)},!1),canvasInstance.on(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,function(volume){_this._setCanvasInstanceVolumes(volume),_this.fire(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,volume)},!1)},AVComponent.prototype._prevRange=function(){if(this._data&&this._data.helper){var prevRange=this._data.helper.getPreviousRange();prevRange?this.playRange(prevRange.id):this._rewind()}},AVComponent.prototype._nextRange=function(){if(this._data&&this._data.helper){var nextRange=this._data.helper.getNextRange();nextRange&&this.playRange(nextRange.id)}},AVComponent.prototype._setCanvasInstanceVolumes=function(volume){this.canvasInstances.forEach(function(canvasInstance){canvasInstance.set({volume:volume})})},AVComponent.prototype._getCanvasInstanceById=function(canvasId){canvasId=Manifesto.Utils.normaliseUrl(canvasId);for(var i=0;i<this.canvasInstances.length;i++){var canvasInstance=this.canvasInstances[i],id=canvasInstance.getCanvasId();if(id){var canvasInstanceId=Manifesto.Utils.normaliseUrl(id);if(canvasInstanceId===canvasId)return canvasInstance}}return null},AVComponent.prototype._getCurrentCanvas=function(){return this._data.canvasId?this._getCanvasInstanceById(this._data.canvasId):null},AVComponent.prototype._rewind=function(){if(!this._data.limitToRange){var canvasInstance=this._getCurrentCanvas();canvasInstance&&canvasInstance.set({range:void 0})}},AVComponent.prototype.playRange=function(rangeId){if(this._data.helper){var range=this._data.helper.getRangeById(rangeId);if(range){var canvasRange=new IIIFComponents.AVComponentObjects.CanvasRange(range);this.set({range:canvasRange})}}},AVComponent.prototype.showCanvas=function(canvasId){this.set({canvasId:canvasId})},AVComponent.prototype._logMessage=function(message){this.fire(AVComponent.Events.LOG,message)},AVComponent.prototype.resize=function(){this.canvasInstances.forEach(function(canvasInstance){canvasInstance.resize()})},AVComponent}(_Components.BaseComponent);IIIFComponents.AVComponent=AVComponent}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponent;!function(AVComponent){var Events=function(){function Events(){}return Events.CANVASREADY="canvasready",Events.LOG="log",Events.RANGE_CHANGED="rangechanged",Events}();AVComponent.Events=Events}(AVComponent=IIIFComponents.AVComponent||(IIIFComponents.AVComponent={}))}(IIIFComponents||(IIIFComponents={})),function(g){g.IIIFComponents?g.IIIFComponents.AVComponent=IIIFComponents.AVComponent:g.IIIFComponents=IIIFComponents}(global);var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var AVVolumeControl=function(_super){function AVVolumeControl(options){var _this=_super.call(this,options)||this;return _this._lastVolume=1,_this._data={volume:1},_this._init(),_this._resize(),_this}return __extends(AVVolumeControl,_super),AVVolumeControl.prototype._init=function(){var _this=this,success=_super.prototype._init.call(this);success||console.error("Component failed to initialise"),this._$volumeMute=$('\n                                <button class="btn volume-mute" title="'+this.options.data.content.mute+'">\n                                    <i class="av-icon-mute on" aria-hidden="true"></i>'+this.options.data.content.mute+"\n                                </button>"),this._$volumeSlider=$('<input type="range" class="volume-slider" min="0" max="1" step="0.01" value="1">'),this._$element.append(this._$volumeMute,this._$volumeSlider);var that=this;return this._$volumeMute.on("click",function(){0!==_this._data.volume?(_this._lastVolume=_this._data.volume,_this._data.volume=0):_this._data.volume=_this._lastVolume,_this._render(),_this.fire(AVVolumeControl.Events.VOLUME_CHANGED,_this._data.volume)}),this._$volumeSlider.on("input",function(){that._data.volume=Number(this.value),0===that._data.volume&&(that._lastVolume=0),that._render(),that.fire(AVVolumeControl.Events.VOLUME_CHANGED,that._data.volume)}),this._$volumeSlider.on("change",function(){that._data.volume=Number(this.value),0===that._data.volume&&(that._lastVolume=0),that._render(),that.fire(AVVolumeControl.Events.VOLUME_CHANGED,that._data.volume)}),success},AVVolumeControl.prototype.set=function(data){this._data=Object.assign(this._data,data),this._render()},AVVolumeControl.prototype._render=function(){this._$volumeSlider.val(this._data.volume),0===this._data.volume?this._$volumeMute.find("i").switchClass("on","off"):this._$volumeMute.find("i").switchClass("off","on")},AVVolumeControl.prototype._resize=function(){},AVVolumeControl}(_Components.BaseComponent);IIIFComponents.AVVolumeControl=AVVolumeControl}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVVolumeControl;!function(AVVolumeControl){var Events=function(){function Events(){}return Events.VOLUME_CHANGED="volumechanged",Events}();AVVolumeControl.Events=Events}(AVVolumeControl=IIIFComponents.AVVolumeControl||(IIIFComponents.AVVolumeControl={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents,__extends=this&&this.__extends||function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}();!function(IIIFComponents){var CanvasInstance=function(_super){function CanvasInstance(options){var _this=_super.call(this,options)||this;return _this._canvasClockDuration=0,_this._canvasClockFrequency=25,_this._canvasClockStartDate=0,_this._canvasClockTime=0,_this._canvasHeight=0,_this._canvasWidth=0,_this._data=_this.data(),_this._highPriorityFrequency=25,_this._isPlaying=!1,_this._isStalled=!1,_this._lowPriorityFrequency=250,_this._ranges=[],_this._readyCanvasesCount=0,_this._stallRequestedBy=[],_this._wasPlaying=!1,_this._data=_this.options.data,_this.$playerElement=$('<div class="player"></div>'),_this}return __extends(CanvasInstance,_super),CanvasInstance.prototype.init=function(){var _this=this;if(!this._data||!this._data.content||!this._data.canvas)return void console.warn("unable to initialise, missing canvas or content");this._$hoverPreviewTemplate=$('<div class="hover-preview"><div class="label"></div><div class="pointer"><span class="arrow"></span></div></div>'),this._$canvasContainer=$('<div class="canvas-container"></div>'),this._$optionsContainer=$('<div class="options-container"></div>'),this._$rangeTimelineContainer=$('<div class="range-timeline-container"></div>'),this._$canvasTimelineContainer=$('<div class="canvas-timeline-container"></div>'),this._$canvasHoverPreview=this._$hoverPreviewTemplate.clone(),this._$canvasHoverHighlight=$('<div class="hover-highlight"></div>'),this._$rangeHoverPreview=this._$hoverPreviewTemplate.clone(),this._$rangeHoverHighlight=$('<div class="hover-highlight"></div>'),this._$durationHighlight=$('<div class="duration-highlight"></div>'),this._$timelineItemContainer=$('<div class="timeline-item-container"></div>'),this._$controlsContainer=$('<div class="controls-container"></div>'),this._$prevButton=$('\n                                <button class="btn" title="'+this._data.content.previous+'">\n                                    <i class="av-icon-previous" aria-hidden="true"></i>'+this._data.content.previous+"\n                                </button>"),this._$playButton=$('\n                                <button class="btn" title="'+this._data.content.play+'">\n                                    <i class="av-icon-play play" aria-hidden="true"></i>'+this._data.content.play+"\n                                </button>"),this._$nextButton=$('\n                                <button class="btn" title="'+this._data.content.next+'">\n                                    <i class="av-icon-next" aria-hidden="true"></i>'+this._data.content.next+"\n                                </button>"),this._$timeDisplay=$('<div class="time-display"><span class="canvas-time"></span> / <span class="canvas-duration"></span></div>'),this._$canvasTime=this._$timeDisplay.find(".canvas-time"),this._$canvasDuration=this._$timeDisplay.find(".canvas-duration");var $volume=$('<div class="volume"></div>');if(this._volume=new IIIFComponents.AVVolumeControl({target:$volume[0],data:Object.assign({},this._data)}),this._volume.on(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,function(value){_this.fire(IIIFComponents.AVVolumeControl.Events.VOLUME_CHANGED,value)},!1),this._$controlsContainer.append(this._$prevButton,this._$playButton,this._$nextButton,this._$timeDisplay,$volume),this._$canvasTimelineContainer.append(this._$canvasHoverPreview,this._$canvasHoverHighlight,this._$durationHighlight),this._$rangeTimelineContainer.append(this._$rangeHoverPreview,this._$rangeHoverHighlight),this._$optionsContainer.append(this._$canvasTimelineContainer,this._$rangeTimelineContainer,this._$timelineItemContainer,this._$controlsContainer),this.$playerElement.append(this._$canvasContainer,this._$optionsContainer),this._$canvasHoverPreview.hide(),this._$rangeHoverPreview.hide(),this._data.helper&&this._data.canvas){var ranges=this._data.helper.getCanvasRanges(this._data.canvas);ranges.forEach(function(range){_this._ranges.push(new IIIFComponents.AVComponentObjects.CanvasRange(range))})}this._canvasClockDuration=this._data.canvas.getDuration();var canvasWidth=this._data.canvas.getWidth(),canvasHeight=this._data.canvas.getHeight();canvasWidth?this._canvasWidth=canvasWidth:this._canvasWidth=this.$playerElement.parent().width(),canvasHeight?this._canvasHeight=canvasHeight:this._canvasHeight=this._canvasWidth*this._data.defaultAspectRatio;var that=this,prevClicks=0,prevTimeout=0;this._$prevButton.on("click",function(){prevClicks++,1===prevClicks?(_this._previous(!1),prevTimeout=setTimeout(function(){prevClicks=0,prevTimeout=0},_this._data.doubleClickMS)):(_this._previous(!0),clearTimeout(prevTimeout),prevClicks=0,prevTimeout=0)}),this._$playButton.on("click",function(){_this._isPlaying?_this._pause():_this._play()}),this._$nextButton.on("click",function(){_this._next()}),this._$canvasTimelineContainer.slider({value:0,step:.01,orientation:"horizontal",range:"min",max:that._canvasClockDuration,animate:!1,create:function(evt,ui){},slide:function(evt,ui){that._setCurrentTime(ui.value)},stop:function(evt,ui){}}),this._$canvasTimelineContainer.mouseout(function(){that._$canvasHoverHighlight.width(0),that._$canvasHoverPreview.hide()}),this._$rangeTimelineContainer.mouseout(function(){that._$rangeHoverHighlight.width(0),that._$rangeHoverPreview.hide()}),this._$canvasTimelineContainer.on("mousemove",function(e){_this._updateHoverPreview(e,_this._$canvasTimelineContainer,_this._canvasClockDuration)}),this._$rangeTimelineContainer.on("mousemove",function(e){_this._data.range&&_this._updateHoverPreview(e,_this._$rangeTimelineContainer,_this._data.range.duration?_this._data.range.duration.getLength():0)}),this._contentAnnotations=[];var items=this._data.canvas.getContent();1===items.length&&this._$timelineItemContainer.hide();for(var i=0;i<items.length;i++){var item=items[i],mediaSource=void 0,bodies=item.getBody();if(!bodies.length)return void console.warn("item has no body");var body=bodies[0],type=body.getType(),format=body.getFormat();type&&"textualbody"===type.toString()||(mediaSource=body.id.split("#")[0]);var target=item.getTarget();if(!target)return void console.warn("item has no target");var spatial=/xywh=([^&]+)/g.exec(target),temporal=/t=([^&]+)/g.exec(target),xywh=void 0;xywh=spatial&&spatial[1]?spatial[1].split(","):[0,0,this._canvasWidth,this._canvasHeight];var t=void 0;t=temporal&&temporal[1]?temporal[1].split(","):[0,this._canvasClockDuration];var positionLeft=parseInt(xywh[0]),positionTop=parseInt(xywh[1]),mediaWidth=parseInt(xywh[2]),mediaHeight=parseInt(xywh[3]),startTime=parseInt(t[0]),endTime=parseInt(t[1]),percentageTop=this._convertToPercentage(positionTop,this._canvasHeight),percentageLeft=this._convertToPercentage(positionLeft,this._canvasWidth),percentageWidth=this._convertToPercentage(mediaWidth,this._canvasWidth),percentageHeight=this._convertToPercentage(mediaHeight,this._canvasHeight),temporalOffsets=/t=([^&]+)/g.exec(body.id),ot=void 0;ot=temporalOffsets&&temporalOffsets[1]?temporalOffsets[1].split(","):[null,null];var offsetStart=ot[0]?parseInt(ot[0]):ot[0],offsetEnd=ot[1]?parseInt(ot[1]):ot[1],itemData={type:type,source:mediaSource,start:startTime,end:endTime,top:percentageTop,left:percentageLeft,width:percentageWidth,height:percentageHeight,startOffset:offsetStart,endOffset:offsetEnd,active:!1,format:format};this._renderMediaElement(itemData)}},CanvasInstance.prototype.set=function(data){var oldData=Object.assign({},this._data);this._data=Object.assign(this._data,data);var diff=IIIFComponents.AVComponentUtils.Utils.diff(oldData,this._data);diff.includes("visible")&&this._data.canvas&&(this._data.visible?this.$playerElement.show():(this.$playerElement.hide(),this._pause()),this.resize()),diff.includes("range")&&this._data.helper&&(this._data.range?this._data.range.duration&&(this._data.range.spans(this._canvasClockTime)||this._setCurrentTime(this._data.range.duration.start),this._play(),this.fire(IIIFComponents.AVComponent.Events.RANGE_CHANGED,this._data.range.rangeId)):this.fire(IIIFComponents.AVComponent.Events.RANGE_CHANGED,null)),this._render()},CanvasInstance.prototype._render=function(){var _this=this;if(this._data.range&&this._data.range.duration){var totalLength=this._canvasClockDuration,timelineLength=this._$canvasTimelineContainer.width(),ratio=timelineLength/totalLength,start=this._data.range.duration.start*ratio,end=this._data.range.duration.end*ratio,width=end-start;this._$durationHighlight.show(),this._$durationHighlight.css({left:start,width:width});var that_1=this;this._$rangeTimelineContainer.slider("destroy"),this._$rangeTimelineContainer.slider({value:this._data.range.duration.start,step:.01,orientation:"horizontal",range:"min",min:this._data.range.duration.start,max:this._data.range.duration.end,animate:!1,create:function(evt,ui){},slide:function(evt,ui){that_1._setCurrentTime(ui.value)},stop:function(evt,ui){}})}else this._$durationHighlight.hide();this._contentAnnotations.forEach(function($mediaElement){$($mediaElement.element).prop("volume",_this._data.volume),_this._volume.set({volume:_this._data.volume})}),this._data.limitToRange&&this._data.range?(this._$canvasTimelineContainer.hide(),this._$rangeTimelineContainer.show()):(this._$canvasTimelineContainer.show(),this._$rangeTimelineContainer.hide()),this._updateCurrentTimeDisplay(),this._updateDurationDisplay()},CanvasInstance.prototype.getCanvasId=function(){return this._data&&this._data.canvas?this._data.canvas.id:null},CanvasInstance.prototype._updateHoverPreview=function(e,$container,duration){var offset=$container.offset(),x=e.pageX-offset.left,$hoverArrow=$container.find(".arrow"),$hoverHighlight=$container.find(".hover-highlight"),$hoverPreview=$container.find(".hover-preview");$hoverHighlight.width(x);var fullWidth=$container.width(),ratio=x/fullWidth,seconds=Math.min(duration*ratio);$hoverPreview.find(".label").text(IIIFComponents.AVComponentUtils.Utils.formatTime(seconds));var hoverPreviewWidth=$hoverPreview.outerWidth(),hoverPreviewHeight=$hoverPreview.outerHeight(),left=x-.5*hoverPreviewWidth,arrowLeft=.5*hoverPreviewWidth-6;left<0&&(left=0,arrowLeft=x-6),left+hoverPreviewWidth>fullWidth&&(left=fullWidth-hoverPreviewWidth,arrowLeft=hoverPreviewWidth-(fullWidth-x)-6),$hoverPreview.css({left:left,top:hoverPreviewHeight*-1+"px"}).show(),$hoverArrow.css({left:arrowLeft})},CanvasInstance.prototype._previous=function(isDouble){this._data.limitToRange?isDouble?this._isNavigationConstrainedToRange()?this._rewind():this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE):this._rewind():this._data.range?isDouble?(this.set({range:void 0}),this._rewind()):this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PREVIOUS_RANGE):this._rewind()},CanvasInstance.prototype._next=function(){this._data.limitToRange&&this._isNavigationConstrainedToRange()?this._fastforward():this.fire(IIIFComponents.AVComponentCanvasInstance.Events.NEXT_RANGE)},CanvasInstance.prototype.destroy=function(){window.clearInterval(this._highPriorityInterval),window.clearInterval(this._lowPriorityInterval),window.clearInterval(this._canvasClockInterval)},CanvasInstance.prototype._convertToPercentage=function(pixelValue,maxValue){var percentage=pixelValue/maxValue*100;return percentage},CanvasInstance.prototype._renderMediaElement=function(data){var $mediaElement,_this=this,type=data.type.toString().toLowerCase();switch(type){case"image":$mediaElement=$('<img class="anno" src="'+data.source+'" />');break;case"video":$mediaElement=$('<video class="anno" />');break;case"audio":$mediaElement=$('<audio class="anno" />');break;case"textualbody":$mediaElement=$('<div class="anno">'+data.source+"</div>");break;default:return}var video=$mediaElement[0];if(data.format&&"application/dash+xml"===data.format.toString()){$mediaElement.attr("data-dashjs-player","");var player=dashjs.MediaPlayer().create();player.initialize(video,data.source)}else if(data.format&&"application/vnd.apple.mpegurl"===data.format.toString())if(Hls.isSupported()){var hls=new Hls;hls.loadSource(data.source),hls.attachMedia(video),hls.on(Hls.Events.MANIFEST_PARSED,function(){video.play()})}else video.canPlayType("application/vnd.apple.mpegurl")&&(video.src=data.source,video.addEventListener("canplay",function(){video.play()}));else $mediaElement.attr("src",data.source);if($mediaElement.css({top:data.top+"%",left:data.left+"%",width:data.width+"%",height:data.height+"%"}).hide(),data.element=$mediaElement,"video"===type||"audio"===type){data.timeout=null;var that_2=this;data.checkForStall=function(){var self=this;this.active?(that_2._checkMediaSynchronization(),this.element.get(0).readyState>0&&!this.outOfSync?that_2._playbackStalled(!1,self):(that_2._playbackStalled(!0,self),this.timeout&&window.clearTimeout(this.timeout),this.timeout=window.setTimeout(function(){self.checkForStall()},1e3))):that_2._playbackStalled(!1,self)}}this._contentAnnotations.push(data),this.$playerElement&&this._$canvasContainer.append($mediaElement),"video"!==type&&"audio"!==type||($mediaElement.on("loadstart",function(){data.checkForStall()}),$mediaElement.on("waiting",function(){data.checkForStall()}),$mediaElement.on("seeking",function(){}),$mediaElement.on("loadedmetadata",function(){_this._readyCanvasesCount++,_this._readyCanvasesCount===_this._contentAnnotations.length&&(_this._setCurrentTime(0),_this.options.data.autoPlay&&_this._play(),_this._updateDurationDisplay(),_this.fire(IIIFComponents.AVComponent.Events.CANVASREADY))}),$mediaElement.attr("preload","auto"),$mediaElement.get(0).load()),this._renderSyncIndicator(data)},CanvasInstance.prototype._hasRangeChanged=function(){var range=this._getRangeForCurrentTime();range===this._data.range||this._data.limitToRange||this.set({range:range})},CanvasInstance.prototype._getRangeForCurrentTime=function(){for(var i=0;i<this._ranges.length;i++){var range=this._ranges[i];if(!range.nonav&&range.spans(this._canvasClockTime))return range}},CanvasInstance.prototype._updateCurrentTimeDisplay=function(){if(this._data.limitToRange&&this._data.range&&this._data.range.duration){var rangeClockTime=this._canvasClockTime-this._data.range.duration.start;this._$canvasTime.text(IIIFComponents.AVComponentUtils.Utils.formatTime(rangeClockTime))}else this._$canvasTime.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._canvasClockTime))},CanvasInstance.prototype._updateDurationDisplay=function(){this._data.limitToRange&&this._data.range&&this._data.range.duration?this._$canvasDuration.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._data.range.duration.getLength())):this._$canvasDuration.text(IIIFComponents.AVComponentUtils.Utils.formatTime(this._canvasClockDuration))},CanvasInstance.prototype._renderSyncIndicator=function(mediaElementData){var leftPercent=this._convertToPercentage(mediaElementData.start,this._canvasClockDuration),widthPercent=this._convertToPercentage(mediaElementData.end-mediaElementData.start,this._canvasClockDuration),$timelineItem=$('<div class="timeline-item" title="'+mediaElementData.source+'" data-start="'+mediaElementData.start+'" data-end="'+mediaElementData.end+'"></div>');$timelineItem.css({left:leftPercent+"%",width:widthPercent+"%"});var $lineWrapper=$('<div class="line-wrapper"></div>');$timelineItem.appendTo($lineWrapper),mediaElementData.timelineElement=$timelineItem,this.$playerElement&&this._$timelineItemContainer.append($lineWrapper)},CanvasInstance.prototype._setCurrentTime=function(seconds){this._canvasClockTime=seconds,this._canvasClockStartDate=Date.now()-1e3*this._canvasClockTime,this.logMessage("SET CURRENT TIME to: "+this._canvasClockTime+" seconds."),this._canvasClockUpdater(),this._highPriorityUpdater(),this._lowPriorityUpdater(),this._synchronizeMedia()},CanvasInstance.prototype._rewind=function(withoutUpdate){this._pause(),this._data.limitToRange&&this._data.range&&this._data.range.duration?this._canvasClockTime=this._data.range.duration.start:this._canvasClockTime=0,this._data.limitToRange||this._data&&this._data.helper&&this.set({range:void 0}),this._play()},CanvasInstance.prototype._fastforward=function(){this._data.limitToRange&&this._data.range&&this._data.range.duration?this._canvasClockTime=this._data.range.duration.end:this._canvasClockTime=this._canvasClockDuration,this._pause()},CanvasInstance.prototype._play=function(withoutUpdate){var _this=this;this._isPlaying||(this._data.limitToRange&&this._data.range&&this._data.range.duration&&this._canvasClockTime>=this._data.range.duration.end&&(this._canvasClockTime=this._data.range.duration.start),this._canvasClockTime===this._canvasClockDuration&&(this._canvasClockTime=0),this._canvasClockStartDate=Date.now()-1e3*this._canvasClockTime,this._highPriorityInterval=window.setInterval(function(){_this._highPriorityUpdater()},this._highPriorityFrequency),this._lowPriorityInterval=window.setInterval(function(){_this._lowPriorityUpdater()},this._lowPriorityFrequency),this._canvasClockInterval=window.setInterval(function(){_this._canvasClockUpdater()},this._canvasClockFrequency),this._isPlaying=!0,withoutUpdate||this._synchronizeMedia(),this._$playButton.find("i").switchClass("play","pause"),this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PLAYCANVAS),this.logMessage("PLAY canvas"))},CanvasInstance.prototype._pause=function(withoutUpdate){window.clearInterval(this._highPriorityInterval),window.clearInterval(this._lowPriorityInterval),window.clearInterval(this._canvasClockInterval),this._isPlaying=!1,withoutUpdate||(this._highPriorityUpdater(),this._lowPriorityUpdater(),this._synchronizeMedia()),this._$playButton.find("i").switchClass("pause","play"),this.fire(IIIFComponents.AVComponentCanvasInstance.Events.PAUSECANVAS),this.logMessage("PAUSE canvas")},CanvasInstance.prototype._isNavigationConstrainedToRange=function(){return this._data.constrainNavigationToRange},CanvasInstance.prototype._canvasClockUpdater=function(){this._canvasClockTime=(Date.now()-this._canvasClockStartDate)/1e3,this._data.limitToRange&&this._data.range&&this._data.range.duration&&this._canvasClockTime>=this._data.range.duration.end&&this._pause(),this._canvasClockTime>=this._canvasClockDuration&&(this._canvasClockTime=this._canvasClockDuration,this._pause())},CanvasInstance.prototype._highPriorityUpdater=function(){this._$rangeTimelineContainer.slider({value:this._canvasClockTime}),this._$canvasTimelineContainer.slider({value:this._canvasClockTime}),this._updateCurrentTimeDisplay(),this._updateDurationDisplay()},CanvasInstance.prototype._lowPriorityUpdater=function(){this._updateMediaActiveStates(),this._isPlaying&&this._data.autoSelectRange&&this._hasRangeChanged()},CanvasInstance.prototype._updateMediaActiveStates=function(){for(var contentAnnotation,i=0;i<this._contentAnnotations.length;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime?(this._checkMediaSynchronization(),contentAnnotation.active||(this._synchronizeMedia(),contentAnnotation.active=!0,contentAnnotation.element.show(),contentAnnotation.timelineElement.addClass("active")),"video"!==type&&"audio"!==type||contentAnnotation.element[0].currentTime>contentAnnotation.element[0].duration-contentAnnotation.endOffset&&this._pauseMedia(contentAnnotation.element[0])):contentAnnotation.active&&(contentAnnotation.active=!1,contentAnnotation.element.hide(),contentAnnotation.timelineElement.removeClass("active"),"video"!==type&&"audio"!==type||this._pauseMedia(contentAnnotation.element[0]))}},CanvasInstance.prototype._pauseMedia=function(media){var playPromise=media.play();void 0!==playPromise?playPromise.then(function(_){media.pause()}):media.pause()},CanvasInstance.prototype._setMediaCurrentTime=function(media,time){isNaN(media.duration)||(media.currentTime=time)},CanvasInstance.prototype._synchronizeMedia=function(){for(var contentAnnotation,i=0;i<this._contentAnnotations.length;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();if("video"===type||"audio"===type){if(this._setMediaCurrentTime(contentAnnotation.element[0],this._canvasClockTime-contentAnnotation.start+contentAnnotation.startOffset),contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime)if(this._isPlaying){if(contentAnnotation.element[0].paused){var promise=contentAnnotation.element[0].play();promise&&promise["catch"](function(){})}}else this._pauseMedia(contentAnnotation.element[0]);else this._pauseMedia(contentAnnotation.element[0]);contentAnnotation.element[0].currentTime>contentAnnotation.element[0].duration-contentAnnotation.endOffset&&this._pauseMedia(contentAnnotation.element[0])}}this.logMessage("SYNC MEDIA at: "+this._canvasClockTime+" seconds.")},CanvasInstance.prototype._checkMediaSynchronization=function(){for(var contentAnnotation,i=0,l=this._contentAnnotations.length;i<l;i++){contentAnnotation=this._contentAnnotations[i];var type=contentAnnotation.type.toString().toLowerCase();if(("video"===type||"audio"===type)&&contentAnnotation.start<=this._canvasClockTime&&contentAnnotation.end>=this._canvasClockTime){var correctTime=this._canvasClockTime-contentAnnotation.start+contentAnnotation.startOffset,factualTime=contentAnnotation.element[0].currentTime;if(Math.abs(factualTime-correctTime)>.4){contentAnnotation.outOfSync=!0;
+var lag=Math.abs(factualTime-correctTime);this.logMessage("DETECTED synchronization lag: "+Math.abs(lag)),this._setMediaCurrentTime(contentAnnotation.element[0],correctTime)}else contentAnnotation.outOfSync=!1}}},CanvasInstance.prototype._playbackStalled=function(aBoolean,syncMediaRequestingStall){if(aBoolean)this._stallRequestedBy.indexOf(syncMediaRequestingStall)<0&&this._stallRequestedBy.push(syncMediaRequestingStall),this._isStalled||(this.$playerElement,this._wasPlaying=this._isPlaying,this._pause(!0),this._isStalled=aBoolean);else{var idx=this._stallRequestedBy.indexOf(syncMediaRequestingStall);idx>=0&&this._stallRequestedBy.splice(idx,1),0===this._stallRequestedBy.length&&(this._isStalled&&this._wasPlaying&&this._play(!0),this._isStalled=aBoolean)}},CanvasInstance.prototype.resize=function(){if(this.$playerElement){var containerWidth=this._$canvasContainer.width();if(containerWidth){this._$canvasTimelineContainer.width(containerWidth);var $options=this.$playerElement.find(".options-container");this._$canvasContainer.height(this.$playerElement.parent().height()-$options.height())}this._render()}},CanvasInstance}(_Components.BaseComponent);IIIFComponents.CanvasInstance=CanvasInstance}(IIIFComponents||(IIIFComponents={})),function(IIIFComponents){var AVComponentCanvasInstance;!function(AVComponentCanvasInstance){var Events=function(){function Events(){}return Events.NEXT_RANGE="nextrange",Events.PAUSECANVAS="pause",Events.PLAYCANVAS="play",Events.PREVIOUS_RANGE="previousrange",Events}();AVComponentCanvasInstance.Events=Events}(AVComponentCanvasInstance=IIIFComponents.AVComponentCanvasInstance||(IIIFComponents.AVComponentCanvasInstance={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var CanvasRange=function(){function CanvasRange(range){if(this.rangeId=null,this.duration=null,this.nonav=!1,range.canvases&&range.canvases.length){this.rangeId=range.id;var canvasId=range.canvases[0],temporal=/t=([^&]+)/g.exec(canvasId);if(temporal&&temporal.length>1){var rangeTiming=temporal[1].split(",");this.duration=new AVComponentObjects.Duration(Number(rangeTiming[0]),Number(rangeTiming[1]))}this.nonav="no-nav"===range.getProperty("behavior")}}return CanvasRange.prototype.spans=function(time){return!!(this.duration&&time>=this.duration.start&&time<=this.duration.end)},CanvasRange}();AVComponentObjects.CanvasRange=CanvasRange}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentObjects;!function(AVComponentObjects){var Duration=function(){function Duration(start,end){this.start=start,this.end=end}return Duration.prototype.getLength=function(){return this.end-this.start},Duration}();AVComponentObjects.Duration=Duration}(AVComponentObjects=IIIFComponents.AVComponentObjects||(IIIFComponents.AVComponentObjects={}))}(IIIFComponents||(IIIFComponents={}));var IIIFComponents;!function(IIIFComponents){var AVComponentUtils;!function(AVComponentUtils){var Utils=function(){function Utils(){}return Utils._compare=function(a,b){var changed=[];return Object.keys(a).forEach(function(p){Object.is(b[p],a[p])||changed.push(p)}),changed},Utils.diff=function(a,b){return Array.from(new Set(Utils._compare(a,b).concat(Utils._compare(b,a))))},Utils.formatTime=function(aNumber){var hours,minutes,seconds,hourValue;return seconds=Math.ceil(aNumber),hours=Math.floor(seconds/3600),hours=hours>=10?hours:"0"+hours,minutes=Math.floor(seconds%3600/60),minutes=minutes>=10?minutes:"0"+minutes,seconds=Math.floor(seconds%3600%60),seconds=seconds>=10?seconds:"0"+seconds,hourValue=hours>=1?hours+":":"",hourValue+minutes+":"+seconds},Utils}();AVComponentUtils.Utils=Utils}(AVComponentUtils=IIIFComponents.AVComponentUtils||(IIIFComponents.AVComponentUtils={}))}(IIIFComponents||(IIIFComponents={}))}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
\ No newline at end of file
diff --git a/examples/js/iiif-av-component.js b/examples/js/iiif-av-component.js
index 54576de..a7cfb05 100644
--- a/examples/js/iiif-av-component.js
+++ b/examples/js/iiif-av-component.js
@@ -1159,7 +1159,7 @@ var IIIFComponents;
                     }
                     if (type === 'video' || type === 'audio') {
                         if (contentAnnotation.element[0].currentTime > contentAnnotation.element[0].duration - contentAnnotation.endOffset) {
-                            contentAnnotation.element[0].pause();
+                            this._pauseMedia(contentAnnotation.element[0]);
                         }
                     }
                 }
@@ -1169,20 +1169,37 @@ var IIIFComponents;
                         contentAnnotation.element.hide();
                         contentAnnotation.timelineElement.removeClass('active');
                         if (type === 'video' || type === 'audio') {
-                            contentAnnotation.element[0].pause();
+                            this._pauseMedia(contentAnnotation.element[0]);
                         }
                     }
                 }
             }
             //this.logMessage('UPDATE MEDIA ACTIVE STATES at: '+ this._canvasClockTime + ' seconds.');
         };
+        CanvasInstance.prototype._pauseMedia = function (media) {
+            var playPromise = media.play();
+            if (playPromise !== undefined) {
+                playPromise.then(function (_) {
+                    // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
+                    media.pause();
+                });
+            }
+            else {
+                media.pause();
+            }
+        };
+        CanvasInstance.prototype._setMediaCurrentTime = function (media, time) {
+            if (!isNaN(media.duration)) {
+                media.currentTime = time;
+            }
+        };
         CanvasInstance.prototype._synchronizeMedia = function () {
             var contentAnnotation;
             for (var i = 0; i < this._contentAnnotations.length; i++) {
                 contentAnnotation = this._contentAnnotations[i];
                 var type = contentAnnotation.type.toString().toLowerCase();
                 if (type === 'video' || type === 'audio') {
-                    contentAnnotation.element[0].currentTime = this._canvasClockTime - contentAnnotation.start + contentAnnotation.startOffset;
+                    this._setMediaCurrentTime(contentAnnotation.element[0], this._canvasClockTime - contentAnnotation.start + contentAnnotation.startOffset);
                     if (contentAnnotation.start <= this._canvasClockTime && contentAnnotation.end >= this._canvasClockTime) {
                         if (this._isPlaying) {
                             if (contentAnnotation.element[0].paused) {
@@ -1193,14 +1210,14 @@ var IIIFComponents;
                             }
                         }
                         else {
-                            contentAnnotation.element[0].pause();
+                            this._pauseMedia(contentAnnotation.element[0]);
                         }
                     }
                     else {
-                        contentAnnotation.element[0].pause();
+                        this._pauseMedia(contentAnnotation.element[0]);
                     }
                     if (contentAnnotation.element[0].currentTime > contentAnnotation.element[0].duration - contentAnnotation.endOffset) {
-                        contentAnnotation.element[0].pause();
+                        this._pauseMedia(contentAnnotation.element[0]);
                     }
                 }
             }
@@ -1221,7 +1238,7 @@ var IIIFComponents;
                         //this.playbackStalled(true, contentAnnotation);
                         var lag = Math.abs(factualTime - correctTime);
                         this.logMessage('DETECTED synchronization lag: ' + Math.abs(lag));
-                        contentAnnotation.element[0].currentTime = correctTime;
+                        this._setMediaCurrentTime(contentAnnotation.element[0], correctTime);
                         //this.synchronizeMedia();
                     }
                     else {
diff --git a/package.json b/package.json
index 42f27a2..8b97c21 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iiif-av-component",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "",
   "main": "index.js",
   "types": "./dist/iiif-av-component.d.ts",
diff --git a/src/CanvasInstance.ts b/src/CanvasInstance.ts
index 763f625..a86106d 100644
--- a/src/CanvasInstance.ts
+++ b/src/CanvasInstance.ts
@@ -92,7 +92,7 @@ namespace IIIFComponents {
             });
 
             this._volume.on(AVVolumeControl.Events.VOLUME_CHANGED, (value: number) => {
-                 this.fire(AVVolumeControl.Events.VOLUME_CHANGED, value);
+                this.fire(AVVolumeControl.Events.VOLUME_CHANGED, value);
             }, false);
 
             this._$controlsContainer.append(this._$prevButton, this._$playButton, this._$nextButton, this._$timeDisplay, $volume);
@@ -105,13 +105,13 @@ namespace IIIFComponents {
             this._$rangeHoverPreview.hide();
 
             if (this._data.helper && this._data.canvas) {
-                const ranges: Manifesto.IRange[] =  this._data.helper.getCanvasRanges(this._data.canvas);
+                const ranges: Manifesto.IRange[] = this._data.helper.getCanvasRanges(this._data.canvas);
 
                 ranges.forEach((range: Manifesto.IRange) => {
                     this._ranges.push(new AVComponentObjects.CanvasRange(range));
                 });
             }
-            
+
             this._canvasClockDuration = <number>this._data.canvas.getDuration();
 
             const canvasWidth: number = this._data.canvas.getWidth();
@@ -365,16 +365,16 @@ namespace IIIFComponents {
                     if (!this._data.range) {
                         this.fire(AVComponent.Events.RANGE_CHANGED, null);
                     } else if (this._data.range.duration) {
-                        
+
                         // if the range has changed, update the time if not already within the duration span
                         if (!this._data.range.spans(this._canvasClockTime)) {
                             this._setCurrentTime(this._data.range.duration.start);
                         }
-    
+
                         this._play();
 
                         this.fire(AVComponent.Events.RANGE_CHANGED, this._data.range.rangeId);
-                    } 
+                    }
                 }
 
             }
@@ -587,20 +587,20 @@ namespace IIIFComponents {
                 player.initialize(video, data.source);
             } else if (data.format && data.format.toString() === 'application/vnd.apple.mpegurl') {
                 // hls
-                if(Hls.isSupported()) {
+                if (Hls.isSupported()) {
                     var hls = new Hls();
                     hls.loadSource(data.source);
                     hls.attachMedia(video);
-                    hls.on(Hls.Events.MANIFEST_PARSED, function() {
+                    hls.on(Hls.Events.MANIFEST_PARSED, function () {
                         video.play();
                     });
                 }
-                 // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
-                 // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
-                 // This is using the built-in support of the plain video element, without using hls.js.
+                // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
+                // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
+                // This is using the built-in support of the plain video element, without using hls.js.
                 else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                     video.src = data.source;
-                    video.addEventListener('canplay', function() {
+                    video.addEventListener('canplay', function () {
                         video.play();
                     });
                 }
@@ -675,9 +675,9 @@ namespace IIIFComponents {
                     this._readyCanvasesCount++;
 
                     if (this._readyCanvasesCount === this._contentAnnotations.length) {
-                        
+
                         //if (!this._data.range) {
-                            this._setCurrentTime(0);
+                        this._setCurrentTime(0);
                         //}                        
 
                         if (this.options.data.autoPlay) {
@@ -951,7 +951,7 @@ namespace IIIFComponents {
                     if (type === 'video' || type === 'audio') {
 
                         if (contentAnnotation.element[0].currentTime > contentAnnotation.element[0].duration - contentAnnotation.endOffset) {
-                            contentAnnotation.element[0].pause();
+                            this._pauseMedia(contentAnnotation.element[0]);
                         }
 
                     }
@@ -963,7 +963,7 @@ namespace IIIFComponents {
                         contentAnnotation.element.hide();
                         contentAnnotation.timelineElement.removeClass('active');
                         if (type === 'video' || type === 'audio') {
-                            contentAnnotation.element[0].pause();
+                            this._pauseMedia(contentAnnotation.element[0]);
                         }
                     }
 
@@ -974,6 +974,25 @@ namespace IIIFComponents {
             //this.logMessage('UPDATE MEDIA ACTIVE STATES at: '+ this._canvasClockTime + ' seconds.');
         }
 
+        private _pauseMedia(media: HTMLMediaElement): void {
+            const playPromise = media.play();
+
+            if (playPromise !== undefined) {
+                playPromise.then(_ => {
+                    // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
+                    media.pause();
+                });
+            } else {
+                media.pause();
+            }
+        }
+
+        private _setMediaCurrentTime(media: HTMLMediaElement, time: number): void {
+            if (!isNaN(media.duration)) {
+                media.currentTime = time;
+            }
+        }
+
         private _synchronizeMedia(): void {
 
             let contentAnnotation;
@@ -985,7 +1004,7 @@ namespace IIIFComponents {
 
                 if (type === 'video' || type === 'audio') {
 
-                    contentAnnotation.element[0].currentTime = this._canvasClockTime - contentAnnotation.start + contentAnnotation.startOffset;
+                    this._setMediaCurrentTime(contentAnnotation.element[0], this._canvasClockTime - contentAnnotation.start + contentAnnotation.startOffset);
 
                     if (contentAnnotation.start <= this._canvasClockTime && contentAnnotation.end >= this._canvasClockTime) {
                         if (this._isPlaying) {
@@ -996,14 +1015,14 @@ namespace IIIFComponents {
                                 }
                             }
                         } else {
-                            contentAnnotation.element[0].pause();
+                            this._pauseMedia(contentAnnotation.element[0]);
                         }
                     } else {
-                        contentAnnotation.element[0].pause();
+                        this._pauseMedia(contentAnnotation.element[0]);
                     }
 
                     if (contentAnnotation.element[0].currentTime > contentAnnotation.element[0].duration - contentAnnotation.endOffset) {
-                        contentAnnotation.element[0].pause();
+                        this._pauseMedia(contentAnnotation.element[0]);
                     }
                 }
             }
@@ -1036,7 +1055,7 @@ namespace IIIFComponents {
 
                         const lag: number = Math.abs(factualTime - correctTime);
                         this.logMessage('DETECTED synchronization lag: ' + Math.abs(lag));
-                        contentAnnotation.element[0].currentTime = correctTime;
+                        this._setMediaCurrentTime(contentAnnotation.element[0], correctTime);
                         //this.synchronizeMedia();
 
                     } else {