Is there a way to determine when an HTML video has finished playing?

Question

Is there a way to determine when an HTML video has finished playing?

I'm working on a webpage that features multiple videos. I want to capture a specific value from an input field and display it once a video finishes playing. Below is my current setup:

HTML

<input type='text' name='profileUsername' value='<?php echo $username; ?>' hidden>
<video width="320" height="240" id='video' controls>
   <source src="videos/<?php echo $row['video'] ?>" type="video/mp4">
    Your browser does not support the video tag.
</video>

The above code snippet uses a PHP while Loop.

JS

document.getElementById('video')[0].addEventListener('ended', myHandler, false);

function myHandler(e) {
    alert("Hello");
    // Perform actions after the event
}

javascript

Answer 1

Answer №1

To extract the data from a DOM element using javascript:

document.getElementById('textbox_id').value

You can access the element by its className, tagName (like input), or Name.

An addEventListener needs to be attached to each video.

So, here's how you can do it:

    var videos= document.getElementsByTagName("videos");
     for (var i = 0; i < videos.length; i++) {
       videos[i].addEventListener("ended", function(event) {
          var target = event.target;
          var parent = target.parentElement; // make sure to select the element above the video (such as the input)
       });
     }

For further clarification on locating elements, visit: https://www.w3schools.com/js/js_htmldom_elements.asp

Answer 2

To extract the data from a DOM element using javascript:

document.getElementById('textbox_id').value

You can access the element by its className, tagName (like input), or Name.

An addEventListener needs to be attached to each video.

So, here's how you can do it:

    var videos= document.getElementsByTagName("videos");
     for (var i = 0; i < videos.length; i++) {
       videos[i].addEventListener("ended", function(event) {
          var target = event.target;
          var parent = target.parentElement; // make sure to select the element above the video (such as the input)
       });
     }

For further clarification on locating elements, visit: https://www.w3schools.com/js/js_htmldom_elements.asp

Is there a way to determine when an HTML video has finished playing?

Answer №1

Similar questions

Fire an event in JavaScript from a different script file

Is there a way to eliminate an object from a multidimensional nested array in JavaScript and retrieve the parent array?

Kendo UI Scheduler: The system encountered an overflow while converting to a date and time format

Create an HTML and CSS code that allows you to split paragraph text into columns within a

Updating tag content dynamically using jQuery

What could be causing the Contact anchor element to not function properly?

What could be causing me difficulty in integrating NProgress into my Next.js application?

Surprising message found within a pug file containing javascript code

Error: Jasmine cannot access a property of undefined value

The issue with the left border color not functioning in JavaScript

Uncertainty arises from the information transmitted from the controller to the Ajax function

how to change class on vue function result

Issue arose following implementation of the function that waits for the event to conclude

Is it possible to use a link's URL as the action for a modal form submission?

Having trouble running the d3js example on Ionic 2

Updating ngModel using the value retrieved from a service call

What is the best way to determine if a checkbox has been selected in ExtJS?

Is there a way to preserve EXIF data when converting an image to base64?

When implementing AngularJS in a situation where the page layout is created by the user, what is the best

JavaScript: Obtaining the month based on the week number and year