Switch Places Once the Video is Complete

Is there a way to make a video play automatically and then redirect to another page once it's finished, without any user interaction?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>eve_</title>
<link rel="icon" rel="preload" href="images/evecircle.png" />
<style>

#video {
    margin-left:-10px;
    margin-top:-10px;
}

</style>

</head>

<body>
<script src="text/javascript">

function playVideo(){
    var video = document.getElementById('video');
    video.play();
    video.addEventListener('ended',function(){
       location.replace('https://example.com/redirect'),
    });
}
</script>

<video controls id="video"  width="1300px" height="auto" preload="auto" autoplay="autoplay">
    <source src="images/shorteve.mp4" type="video/mp4"/>
</video>

</body>
</html>
javascripthttp-redirectvideoreplacelocation

Answer №1

To make your function run when triggered, you can add an event listener.

<script type = 'text/javascript' >
  var video = document.getElementById('video');
  video.play();
  video.addEventListener('ended', onVideoFinished, false);

function onVideoFinished() {
  window.location.replace('...');
} </script>

Answer №2

Ensure that you are calling the addEventListener function after your HTML content has fully loaded (within the DOMContentLoaded event).

If you attempt to call document.getElementById('video') outside of the DOMContentLoaded event, it is likely to return null.

The DOMContentLoaded event is triggered when the initial HTML document has been completely loaded and parsed.

document.addEventListener('DOMContentLoaded', function() {
  
  console.log("DOM fully loaded and parsed");
  var video = document.getElementById('video');

  video.addEventListener('ended', function() {
    console.log("The video has ended");
    alert("The video has ended");
    //location.replace('https://stackoverflow.com/questions/49582133/no-idea-where-to-put-settimeout/49582203?noredirect=1#comment86172507_49582203');
  });
});
<video controls id="video" width="200px" height="auto" preload="auto" autoplay="autoplay">
        <source src="https://www.w3schools.com/tags/movie.ogg" type="video/mp4" />
    </video>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript: The power of nested array manipulation

I'm having trouble extracting data from a parsed JSON array obtained from a shipping company. Specifically, I am attempting to retrieve the short_name of Cleveland, OH, but all my attempts to access this information have been unsuccessful. When I use: ...

javascriptarrays

What is the best way to sort through this complex array of nested objects in Typescript/Angular?

tableData consists of an array containing PDO objects. Each PDO object may have zero or more advocacy (pdo_advocacies), and each advocacy can contain zero or more programs (pdo_programs). For example: // Array of PDO object [ { id: 1, ...

javascriptangulartypescript

Starting the selection process using AngularJS and ng-repeat

My challenge is to have a pre-filled option in a select-box using ng-repeat with AngularJS 1.1.5. However, the select box always starts off with nothing selected and an empty option, which I don't want. It seems to be a side effect of not having anyth ...

javascriptangularjs

What is the process for using express and Postman to send a PUT request and modify a specific field in MongoDB?

I'm struggling to figure out how to use a MongoDB document's id in the route and manipulate the 'balance' field using Postman. Here's what my code currently looks like: My route: router.put('/:id', async (req, res) =&g ...

javascriptmongodbexpresspostman

What is the best way to retrieve the name of a dynamic form in a Controller

How can I retrieve the dynamic form name in my controller? See below for the code snippet: HTML <form name="{{myForm}}" novalidate> <input type="text" ng-model="username" name="username" required/> <span ng-show="(submit & ...

javascriptangularjshtml

What's the best way to remove all &#160; siblings from a JSON string using JavaScript?

Is there a way to remove all instances of "&#160;" in a JSON string? { "Cat": "laps&#160;milk", "Dog": "Woofs&#160;at&#160;Postman", "Bird": "Jumps&#160;over&#160;the&#160;river", "I": "Want&#160;to&#160;learn&a ...

javascriptregexjson

Ensure that a JavaScript prompt appears when a form is selected in a dynamic HTML field

My PHP script generates a table form with results from a database query for users to edit records. The form can display up to 30 records. If the VoidTag checkbox is checked when the form is submitted, I want the user to confirm this action. If it is not ...

javascripthtmlformsdynamicconfirm

Reversing the sequence of code in JavaScript - react native

I'm currently working on tracking the number of times a button is pressed within one second. For the most part, it's functioning correctly as it tracks and displays the count. The issue arises when it displays the button press count from the pr ...

javascriptreactjsreact-native

Deploying and operating passport express node on azure: A comprehensive guide

I am currently developing an express node service for Single Sign-On (SSO) using the passport OAuth2 strategy. Here is the structure of my express node application code: AUTH - certs server.cert server.key -index.html -index.js (creates app as expr ...

javascriptnode.jsazurepassport.jspassport-local

The technique of using Javascript x to escape characters is

I've come across a handful of other software programs that feature a similar construct: let str = '\x32\x20\x60\x78\x6e\x7a\x9c\x89'; As I experimented with the sequence of numbers and letters within ...

javascriptstringescapingasciiprocessing

Displaying JSON data using Vue.js

fetching JSON data save movieData: {} ...... retrieveMovieData (context, parameter) { axios.get(API.movieData + parameter.id) .then(response => { context.commit('MOVIE_DATA', response.data) }) .catch(error => ...

javascriptjsonvue.js

Unique title: "Curved Blocks with Unusual Shapes in SVG Path

Hey there, I'm new to working with SVG and Highcharts. I found a jsfiddle online that I would like to customize for my project, but I've encountered an issue with the rounded corner blocks of lines in the Result panel. Here is the link to the js ...

javascriptjquerysvghighcharts

Supporting multiple types for matching object structures is a feature in Jest

I'm currently working on a test using jest to verify if an object key is either a string or a number. It seems like a basic task, but surprisingly there isn't much guidance in the documentation. Test Example: test('Checking asset structure ...

javascriptjestjs

Expanding the functionality of Promise to include progress updates

I had the idea to expand Promise by adding a 'progress' feature in order to track progress while using Promise for my asynchronous tasks. So, I created an extended version of Promise like this: class promisePro extends Promise { constructor ...

javascriptnode.jspromise

Setting a default year in a React datepicker: A step-by-step guide

I'm currently working with the react datepicker and I want to specify a default year (1990) when the calendar is opened. I've tried using the 'date' and 'initialDate' props, but they don't seem to be working. Below is th ...

javascriptreactjs

Leverage the power of JavaScript by combining it with the .on and .editableselect methods

I am facing an issue with a select input that I am trying to make both editable and trigger an ajax request using the on change JS function. However, only one of the functions is working as expected because I have used the same id for the select input twic ...

javascripthtmllaravelbootstrap-4

Is there a way to set up a local npm module directory without using symlinks

Here is a breakdown of the file structure in a simple way. /my-module ..package.json /my-app ..package.json I am trying to have my-app install my-module locally. This is what I have attempted: "dependencies": { "myModule": "../my-module" } The opti ...

javascriptnode.jsnpminstallationpackage.json

Postponed attaching event listeners to a Vue 3 instance within an iframe

Due to a specific requirement, I find myself in need of running a Vue instance inside an iframe. After some research and adjustments based on this thread from the Vue forum, I was able to achieve this goal while adapting the code for Vue 3 and removing unn ...

javascriptvue.jsiframedom-eventsvuejs3

I'm having trouble with the routing of a Node.js REST API built with Express and Mongoose

I am currently in the process of constructing a RESTful webservice by following a tutorial that can be found at: However, I have encountered an issue where it is returning a CANNOT GET/ reports error. Despite my efforts to troubleshoot and rectify the pro ...

javascriptnode.jsrestapiexpress

apply a course to the designated element

Alright, I have this piece of code that deals with session and page requests. // Let's start our session session_start(); // Now let's check if there is a page request if (isset($_GET['page'])) { // If there is a requested page, we ...

phpjavascriptjquery