Automatically redirect the user after video ends (NEED HELP)

Authoring Twine
1

Twine Version: 2

Hello I have been working on this story for a couple of months and I wanted to make this intro to the game and everything works but I want to make this code automatically redirect the user to the passage start menu instead of making them click onto the button after the video ends.

<!-- Button initially hidden, will show in JavaScript -->
<div id="nextButton" style="display: none; font-size: large; margin-top: 10px;">
 
 
 <!-- Harlowe Button (Initially hidden) -->
(text-style:"shudder")[(button: "===><===")[(text-colour:white)+(bg:gray)[(link: "Start")[(redirect: "Start")]]]]</div>

<style>
  #videoPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  #videoElement {
    width: 100%;
    height: 100%;
  }
</style>

<div id="videoPopup">
  <video id="videoElement" autoplay>
    <source src="https://www.dropbox.com/scl/fi/ukbn4uax5jv5lqbh0ccim/Game-intro-1.mp4?rlkey=wdfdryhz8u1t7x9vk4d4rywgy&st=a5wqcoui&dl=1" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

<script>
  (function() {
    document.getElementById('videoPopup').style.display = 'flex';
    document.getElementById('videoElement').onended = function() {
      document.getElementById('videoPopup').style.display = 'none';
      document.getElementById('nextButton').style.display = 'block';
    };
  })();
</script>
2

This may not work at all, I’m just making suggestions in the dark.

Can you put the user on a page with the video but no interaction options except a “skip” link, then run a separate timer on the page that is set to the same length as the video and navigates to a new page when it runs out?

3

I tried that but the video sometimes takes a couple of seconds to load and sometimes it doesn’t

4

image
image1364Ă—649 56.7 KB

5

Can you pad the timer with a couple of seconds for loading?

Worst case scenario, the video ends and the player clicks continue.

A video should have a skip/continue link for friendliness anyway.

6

I was trying to make the video for the game intro, have you ever played games from warner bro’s games?

7

I haven’t dealt with video in HTML before, but if your code for making the button appear (when the video concludes) works then you should be able to accomplish what you want to do.

I don’t believe Harlowe exposes any of it’s macro functionality in JavaScript so what I’ve done in the past is use a simulated click on a hidden Harlowe link from JavaScript. This is how I run Harlowe code from JavaScript.

Setup the hidden Harlowe link within a named hook:

(css: "display:none;")[ |triggerhook>[ (link: "Start")[(redirect: "Start")] ]

In your JavaScript, try targeting the Harlowe link through the DOM with:

document.getElementsByName( "triggerhook" )[0].getElementsByTagName( "tw-link" )[0].click();

Using display: none; will hide the link from the user, but still allows JavaScript to “see it” and interact with it in the page.

1 Like
8

Thanks

1 Like