Twine2 Sugarcube2 Macros for HTML5 video and audio-files in local browser
/* 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*/ | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment