Twine2 Sugarcube2 Macros for HTML5 video and audio-files in local browser

story_javascript.js

/* I used this in my interactive video textadventure: http://matthias-andrasch.de/2015/ela-twine-textadventure-mit-html5-video
Right now it only works in local browser because of preloading issues in realtime with big video files (maybe you have an idea for improving the preload)

Videos will be in the background in fullsize.

Initialize video/audio in "StoryInit" passage (important!):
<<html5loadvideo "riot" "media/video/riot.mp4">>

Example usage in twine passage:
<<html5playvideo "riot">>

Video file path must be relative to your export(!) html file.

Example for skip video link: https://gist.github.com/programmieraffe/77c2c38dcf664de430b3

*/

Macro.add("html5loadaudio",{
	handler:function(){
		if ($("#"+this.args[0]).length == 0){
		$("body").append('<audio id="'+this.args[0]+'" src="'+this.args[1]+'" preload="true"></audio>');
		}
	}
});

Macro.add("html5playaudio", {
    handler: function () {
      document.getElementById(this.args[0]).play();
    }
});

Macro.add("html5stopaudio", {
    handler: function () {
      document.getElementById(this.args[0]).pause();
			
			if(this.args[0] === 1){
				$('#'+this.args[0]+'').remove(); /* remove from dom*/
			}
		}
});

Macro.add("html5loopaudio", {
    handler: function () {
			document.getElementById(this.args[0]).loop=true;
      document.getElementById(this.args[0]).play();
		}
});

Macro.add("html5loadvideo",{	handler:function(){
	
	console.log('Load video', this.args, SugarCube.state.active.variables.videoQuality);
	
	/* video qualitaty settings */
	var fileName = this.args[1];
	var vQ = SugarCube.state.active.variables.videoQuality;
	var src = fileName.replace(".mp4", '_'+vQ+'.mp4');
	src = src.replace(".ogg", '_'+vQ+'.ogg');
	
	/* removed preload, set it from metadata to none (needs to be because playvideo event */
	if ($("#"+this.args[0]).length == 0){
		$("body").append('<video id="'+this.args[0]+'" class="html5backgroundvideo" poster="'+this.args[2]+'"  style="display:none;" preload="none"><source src="'+src+'"></video>');
	}
	}
});

Macro.add("html5playvideo", {
    handler: function () {
			$(".html5backgroundvideo").hide(); /* stop all videos */
			$(".html5backgroundvideo").hide(); /*hide all videos*/
			$('#'+this.args[0]+'').show();
			
			var video = document.getElementById(this.args[0]);
			
			/* if there is no preload="metadata", we need to wait for the event 
				alternative: let user wait to load all metadata videos (online / offline difference?)
			*/
			
			var currentTime = this.args[1]; 
			var volume = this.args[2];
			
			video.addEventListener("loadedmetadata", function() {
				 if(typeof currentTime != 'undefined'){			
							this.currentTime = currentTime;
					}
					if(typeof volume != 'undefined'){
							this.volume = volume;
					}
			}, false); /* eo loaded metadata event */
			
			video.play();
    }
});

Macro.add("html5loopvideo", {
    handler: function () {
			$(".html5backgroundvideo").hide(); /*hide all videos*/
			$('#'+this.args[0]+'').show();
			var video = document.getElementById(this.args[0]);
			/*video.currentTime = this.args[1];*/
			video.loop=true;
			if(typeof this.args[2] != 'undefined'){
					video.volume = this.args[2];
			}
      video.play();
		}
});

Macro.add("html5stopvideo", {
    handler: function () {
			document.getElementById(this.args[0]).pause();
			$('#'+this.args[0]+'').hide();
			
			if(this.args[0] === 1){
				$('#'+this.args[0]+'').remove(); /* remove from dom*/
			}
			
		}
});