Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Implementing Background Video

Hi,

I'd like to have background videos that preferably can change through the course of the story. I'd also like my finished Twine to be playable via Github and not just locally after downloading a zip.

I've searched around but have yet to find one that works... I'm very new to coding in general, so I may just be implementing them incorrectly. Here is what I've discovered so far:

https://gist.github.com/jonathan3/5647936 //I can't get this to work, even after putting "requires jQuery" in my passage. perhaps outdated.

https://codepen.io/dudleystorey/pen/knqyK //this was made for a plain webpage, but perhaps could be translated to Twine?

https://gist.github.com/nickg33/52e83017b80ee159d4d0 //only works in local browser


If any of these work, could someone explain where to put each bit of code? Thanks a bunch in advance! It would really mean a lot to me.

Comments

  • I'm pretty new to twine, but I think the first link you posted won't work with Harlowe, the format that the web app uses. It's written for SugarCube instead.

    In general, I've found that some bits of javascript work in a twine passage and some bits don't, even if they work in a normal webpage.

    But, good news! I managed to get the second link you posted working. Paste the HTML straight into your passage, and the CSS into your story's stylesheet, and it "just works!". Pretty cool, huh?
  • In general, I've found that some bits of javascript work in a twine passage and some bits don't, even if they work in a normal webpage.
    The issue you may be having with your Javascript is probably due to Variable Scope, which can effect a normal webpage as well.

    Things defined in one local Scope like the Story Javascript area are not automatically available in another local Scope like a script element within a Passage. The same is true for Javascript defined in one Passage not being available within a different Passage.

    To get around this issue the thing you want to be available everywhere has to be made Global, how you do this can be different in each story format but one common method used (although it may not be the best way) is to add the thing you want to be Global to the web-browser's window object.
  • Having a few minutes to really look at this….


    https://gist.github.com/jonathan3/5647936
    Basics: YouTube-based, so your videos would need to be on YouTube. Additionally, the macros are in Twine 1 vanilla story format style, so they would only be usable in a compatible story format (i.e. any of the Twine 1 vanilla story formats or SugarCube (any version, in Twine 1 or 2, since it supports the legacy macro style).
    Issues: Has some scope issues and a syntax error. Both likely hidden due to the author of the original module not either testing it in strict mode or using a linter (e.g. ESLint or JSLint). How that failed to trip up the second author, who used the module as the basis for their Twine macros, I don't know.
    Outlook: Fixing its major issues would be fairly trivial.


    https://codepen.io/dudleystorey/pen/knqyK
    Basics: HTML5 <video> element based, so your videos would need to be hosted someplace which allows hot linking.
    Issues: Several minor things, but nothing major. Pretty bare bones, however, and not originally intended for use within story formats, so it would require a little work to fully utilize.
    Outlook: Fixing its minor issues would be fairly trivial. It would require a little work to fully utilize, however.


    https://gist.github.com/nickg33/52e83017b80ee159d4d0
    Basics: HTML5 <video> element based, so your videos would need to be hosted someplace which allows hot linking. Additionally, the macros are in SugarCube v2 macro format style, so they would only be usable in SugarCube v2. Curiously, they also include audio macros which are inferior to SugarCube's built-in audio macros (I'm unsure why). Furthermore, contrary to the author's note, they should work over a network—you simply need to be cognizant of the size of your video files.
    Issues: Nothing major, though they do show that the author has a questionable grasp of the HTML5 media elements (in particular, no caching of video data is done at all until each video needs to be played, which is a bizarre decision). Additionally, they are not completely generic, having some minor design decisions baked in.
    Outlook: Could be used as-is, but would require the use of SugarCube v2.

    I'm pretty new to twine, but I think the first link you posted won't work with Harlowe, the format that the web app uses. It's written for SugarCube instead.
    Harlowe is merely the default story format in Twine 2, not the only one (Snowman and SugarCube v1 are also included). Also, as I noted above, it's not written for SugarCube (though it would work in SugarCube, if fixed).
  • Thanks for the replies everyone!
    But, good news! I managed to get the second link you posted working. Paste the HTML straight into your passage, and the CSS into your story's stylesheet, and it "just works!". Pretty cool, huh?

    Yes! Kind of. Here's a breakdown of the results I've got with the HTML and CSS:
    Online Test/Debug Mode:
    -Harlowe: video stops after a second or so.
    -Snowman and Sugarcube: works!
    -Sugarcube: works!
    Published file, run from my browser (chrome):
    -Snowman and Sugarcube: I get an error that says my browser lacks/blocks certain capabilities, and the video does not play (just shows poster image). :(

    Twine Application Test/Debug Mode:
    -All: No error message. The video does not play (just shows poster image).

    Is it possible the video size is too large? I feel like using the Youtube-based method would be more reliable.

    https://gist.github.com/jonathan3/5647936
    Basics: YouTube-based, so your videos would need to be on YouTube. Additionally, the macros are in Twine 1 vanilla story format style, so they would only be usable in a compatible story format (i.e. any of the Twine 1 vanilla story formats or SugarCube (any version, in Twine 1 or 2, since it supports the legacy macro style).
    Issues: Has some scope issues and a syntax error. Both likely hidden due to the author of the original module not either testing it in strict mode or using a linter (e.g. ESLint or JSLint). How that failed to trip up the second author, who used the module as the basis for their Twine macros, I don't know.
    Outlook: Fixing its major issues would be fairly trivial.

    Thanks especially for the nice breakdown of each code. Would you happen to know exactly what needs to be fixed in this one? The code looks like gibberish but if you point me in the right direction maybe I can get it to work :) .

  • edited February 2016
    I think I found a method that works, from a similar discussion:

    http://twinery.org/forum/discussion/5550/youtube-video-embettet-error#latest

    This goes into the story passage:
    <html>
    <div id="video_bg" style="position: fixed; z-index: -98; width: 100%; height: 100%;">
    <div id="video" style="position: fixed; z-index: -99; width: 100%; height: 100%;">
    <iframe frameborder="0" height="100%" width="100%" src="
    </iframe>
    </div>
    </div>
    </html>
    

    Add this into the CSS:
    #video_bg {pointer-events: none;}
    

    The first <div> prevents people from clicking on the video to pause it, and the second <div> is the actual video. The z-index ensures text appears in front of the videos. The parameters at the end of the video url hide the controls. A youtube branding does appear at the bottom right of the video but eventually disappears. To loop the video, it must be in a playlist of its same video ID.

    The formatting is not perfect - there's black space on the left and right - but I think it's something a little CSS can fix! Thanks again for your help guys. I'll post here again to update with any helpful CSS or if I have any more questions.
  • mnstrviola wrote: »
    Would you happen to know exactly what needs to be fixed in this one? The code looks like gibberish but if you point me in the right direction maybe I can get it to work :) .
    There are two basic issues.

    FIND: (around line 99)
                    var options = $.extend({}, defaults, options),
                        $body = $('body') // cache body node
                        $node = $(node); // cache wrapper node
    
    REPLACE WITH:
                    var options = $.extend({}, defaults, options),
                        $body = $('body'), // cache body node
                        $node = $(node); // cache wrapper node
    
    Note the added comma on the second line.

    FIND: (around line 111)
                    // set up iframe player, use global scope so YT api can talk
                    window.player;
    
    REPLACE WITH:
                    // set up iframe player, use global scope so YT api can talk
                    window.player = null;
    
    Note the added null assignment on the second line.

    Additionally, the code to load jQuery is unnecessary (since SugarCube already includes jQuery), so it can be safely deleted.
    FIND & DELETE: (around line 36)
    window.jquery_url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/';
    
    var s = document.createElement('script');
    s.src = jquery_url + 'jquery.min.js';
    s.onload = function f(){
      if (jQuery) {
        jQuery.noConflict();
      }
    }
    document.getElementsByTagName("head")[0].appendChild(s);
    
Sign In or Register to comment.