Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.