Show at the end of watching a video clip

I have an HTML page which embedded a video. I want my user to watch the video and at the end of the video, I want to show a form whereby the user can input some words.
And these words I want to store in an array so that I can show them on another page for the user to use.
I want to do this with some images so that the images will show at the end of the video and the user can drag the image to a page.
Has anyone done this before, show me how?

It’s going to depend on how you are embedding the video. Where I work we use the Brightcove video player to embed our videos and it comes with an extensive API that allows us to listen for events (such as when the video ends). It looks like YouTube has a similar set-up using its IFrame Player API.

1 Like

The normal video element also has the ended event.

1 Like

Ahh, cool, I’ve never used the native video element on its own because it has so many accessibility issues, but that’s nice to know.

By the way, here’s a good list of accessible video players you can use if you aren’t using one.

Thank you all. I got that.
Look at my code,
I want to turn that input, whatever the user input into an array and display the array in h1 element
it is not working

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="root">
        <form>
            <input id="inputMe">
        </form>
        <button id="save"onclick="save()"> Save</button>

        <h3 id="enterword"> </h3>

    </div>
    <script>
        let wordlist = document.getElementById("inputMe")
        let wordsplit = wordlist.split(" ")
        let wordArray = []
        wordArray = wordsplit
        
       
        // let word = document.getElementById("inputMe")
        // let wordsplit = word.split(",")
        // wordArray.push(wordsplit)
       
        function save(){
            console.log(wordArray)
           let enterWord = document.getElementById("enterword").innerText 
            enterWord= wordArray
         }

    </script>
</body>

</html>
type or paste code here

This isn’t quite how you get the user input. It is stored in the value property. So it should be:

let wordlist = document.getElementById("inputMe").value;

Also, you need to put all of the variable declarations inside of the save() function. You should be getting some reference errors in the console when you click on the button.

Once you do the above then the console log in the save() function should be showing you an array.

let enterWord = document.getElementById("enterword").innerText
enterWord= wordArray

It doesn’t quite work like this. You need to set the value of innerText to a string:

document.getElementById("enterword").innerText = "String you want to put in the element";
1 Like

Thank you for your reply.
But look at this, it does not output in

<div>
    <div>
        <h2>You are to write your thought here in this test box and click save</h2>
        <label for="heiku" class="label">Your Heiku</label>
        <br />

        <textarea class="textarea" id="heiku" name="heiku" rows="4" cols="50">
            Write your Heiku here
        </textarea>
        <button class="button" id="submit" onclick="Save()">Save</button>

        <p class="p" id="heiku_input"></p>


    </div>
</div>

<script>
    let heiku = document.getElementById("heiku").value;
    let heiku_input = heiku

    function save(){
        
        document.getElementById("heiku_input").innerText = heiku_input;
        console.log(heiku_input);
    }
</script>

I have this error on console

Uncaught ReferenceError: Save is not defined
at HTMLButtonElement.onclick

You are capitalizing in one instance and using lowercase in the other.

1 Like

Could you take a look at this please?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.