Automatically forward to next page when video finishes

On my website's landing page, I have a fullscreen video that plays. I attempted to use javascript's timeout function to automatically redirect users to another link once the video finishes playing. However, I encountered issues with inconsistency across different browsers. Sometimes the redirection would occur before the video ended, and other times there was a slight delay.

Is there a more reliable method to redirect the page once the video has finished playing without relying on the timeout function?

javascripthtmlcssshopify

Answer №1

If you want to check whether an html5 video has completed playing, you can use the ended event listener. (This query provides a good explanation).

Here is an example of how your code might look:

document.getElementById('myVideo').addEventListener('ended',myFunction,false);
function myFunction(event) {
    window.location.href = "your-link-here";
}

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

Obtain the coordinates automatically when loading a page using ASP.NET

I'm facing a dilemma. Currently, I am utilizing an ASP.NET web application on Windows. Upon loading the page, dynamically generated ImageButtons are displayed. I am in need of finding the X and Y coordinates or TOP and LEFT positions of each ImageButt ...

c#javascriptasp.net

I am unable to show a list in a sequential manner on a Flask webpage

Here is the function I implemented to return the list line by line: def listing(table): x=0 tab=[] for item in range(0,len(table)): x+=1 result= f'{x}- {table[item]}' tab.append(result) final = '&bsol ...

pythonhtmlflaskjinja2

Ways to verify the occurrence of a successful event following the execution of a save() operation on a model

Below is the snippet of code I am using to store extra properties in a model (specifically, the answer model) selectMedia: => # Post media to server @options.answer.id = @options.answer.get('_id') @options.answer.url = "/v1/answers/#{@o ...

javascriptajaxbackbone.jscoffeescript

Vanishing ShareThis Link After Postback in JavaScript

On my webpage at , I have included a ShareThis link in the footer that is generated via Javascript. However, whenever there is an AJAX postback after entering an email on the site, the link disappears. Is there a way to prevent this from happening and ensu ...

asp.netjavascriptajax

Every time I make a change to the code, Laravel's css/app.css file mysteriously vanishes from the mix-manifest.json

Whenever I make a change in my code, the line css/app.css in mix-manifest.json disappears. The only solution is to execute npm run watch or npm run dev, but the problem reoccurs each time I modify the code. Here is how my mix-manifest.json looks when eve ...

csslaravelnpmmodulemanifest

JavaScript: Passing the "this" object in an AJAX request situation

Here is the code snippet I am working with: $(function(){ $("#CASA").click(function(){ rsExecute("rs/rs_luci.php","premi",1,function(cc){}); var col=$( this ).css( "background-color" ); se ...

javascriptjqueryajax

The website is not optimized for mobile viewing

I have recently made an existing website responsive using Twitter Bootstrap. Everything seemed to work fine when I tested it by resizing the browser window, as it perfectly fit in the viewport. However, upon checking the site on mobile and tablet devices, ...

csstwitter-bootstrapresponsive-design

This issue arises when attempting to display a Facebook like box within an iframe using Fancybox

As a newcomer to JavaScript, I've been trying to display a fancybox iframe containing my Facebook fan page like box when my website first loads, but have been unsuccessful so far. I've included all the necessary calls to the js files in fancybox ...

phpjavascriptjqueryajaxfancybox

When attempting to add an image to a table, I struggle to do so without disrupting the alignment of the surrounding cells

I'm having an issue with adding an image to my table. Whenever I place the img tag between the <td> tags, the content in the neighboring cell behaves as if there are <br> tags above it. I attempted to use display:inline-block, but it had ...

htmlcss

What causes the inconsistency in width distribution among flex children when the flex grow property is set to 1 alongside text content?

Why do the elements one, two, and damn not take up equal space, as they all have flex: 1? I want them to have equal widths based on the parent's width. How can I adjust it so that the element with class damn takes up less space than the other two? .w ...

htmlcss

"Prior to executing the sort function, the JavaScript array undergoes a

Update: It seems like the issue is related to how the chrome console handles object evaluation, as pointed out by jsN00b. original source I am currently sorting an array by name and then by age, and logging the array three times: First right after initia ...

javascriptarrays

Troubleshooting jQuery click event listeners and AJAX requests: Issue with second listener not functioning properly

There are two click listeners implemented on a page, one for a sub-navigation menu (which dynamically changes the list items in the menu) and another for a main menu (which dynamically changes the content in another section). <nav class="sub-nav"> ...

jqueryhtmlajaxclicklistener

Utilizing tag keys for inserting text and adjusting text sizes within a Web application

Creating an online editing interface for coursework where keyboard events are used. The goal is to have the tab key insert text, while also reducing the size of the text on that line. However, upon using getElementById, an error message pops up stating: ...

javascripthtmlcssevents

What is the process for invoking an MVC Api controller's Post action with a HttpResponseMessage using JavaScript as the client

Currently, I am making an API call from the client side. Below is the code snippet for both the client and server sides: API Action in C#: public class StudentTestController : ApiController { [HttpPost] public HttpResponseMessage GetL ...

javascriptajax

Node.js refusing to acknowledge the get request handler for the homepage of the website

My Node.js server setup is quite simple: const express = require('express'); const app = express(); const http = require("http"); const path = require('path'); const favicon = require('serve-favicon'); // Public fil ...

javascriptnode.jsexpress

Utilize the text box feature for manipulating the data field in Angular4

Within my grid view, there exists a column labeled remark. This specific field contains various values, one of which is absence. My objective is to modify the remark value exclusively when it is equal to absence, followed by clicking the corresponding icon ...

htmlangulartypescript

Exploring the information within a subject

What is the process to access the id of a model nested within another model? model.py class Topic(models.Model): """ A topic that the user is learning about """ text = models.CharField(max_length=200) date_added = models.DateTimeField(auto ...

pythonhtmlcssdjangoview

Is there a way to enable hover functionality on mobile devices? I wish for the hover effect seen on desktop to be triggered automatically on mobile devices

I attempted to implement @media (hover: hover) without success. In my design, I have three images in a row that reveal a text overlay when hovered over with a mouse. However, the issue arises when I try to switch to a mobile view, as the images remain un ...

javascripthtmljquerycssbootstrap-5

CSS: Create a form with two input fields where the left field is adjustable in width and the right field fills up

------------- -------------------------------------------------- | some unique text | | some more original content, varying length | ------------- -------------------------------------------------- |<---------------------- 100% width ------------------ ...

css

Is there a way to spin these hexagons around?

Hey there, I need some assistance with a problem. I have to rotate these three hexagons slightly, about 15 degrees or so. The catch is, it needs to work in Internet Explorer only. I've been struggling with this all day and it's getting ...

htmlcss