Skip to main content
D
DominiqueSJSU
Known Participant
October 10, 2020
Answered

How to transition from video to opening a new webpage after video ends?

  • October 10, 2020
  • 2 replies
  • 1543 views

Hello --

 

In older versions of Adobe Suite products there were different ways to go about doing this but that now involves obsolete software.  The newer versions of Photoshop, Dreamweaver, etc. don't seem to offer this option or I may be wrong.

 

I am just trying to autoplay a video fullscreen and then have a webpage launch (in the same browser) after the video finishes playing.  That's all. 

 

Suggestions?

This topic has been closed for replies.
Correct answer osgood_

Are you using the video tag?

 

<video>

</video>

 

If you are then give it an id:

 

<video id="myVideo">

</video>

 

 

Then add the script below, just before the closing </body> tag, to the page which contains the video and change the href to the page which you want to go to, after the video has stopped playing.

 

<script>
const myVideo = document.querySelector("#myVideo");

myVideo.onended = function() {
window.location.href = 'goToMyPage.html';
}
</script>

 

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 10, 2020

URL forwarding has never been supported in HTML5 video.  You need a script for that.  Video containing an audio track cannot be autoplayed unless the MUTE attribute is invoked. And some people who detest autoplaying media have browser add-ons to kill it.  For this reason, you should always have player controls just in case.

 

Try this:

 

<!doctype html>
<html lang="en">
<head>
<title>Responsive HTML5 Video with URL Forwarding</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
video {height:auto; width:100%;}
</style>
</head>

<body>
<video id="myvid" playsinline muted autoplay controls>
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<script>
//URL forwarding
video = document.getElementById('myvid');
video.addEventListener('ended',function() {alert('End of video, you will be taken to Google now.');       
window.location.href = 'https://www.google.com';})
</script>
</body>
</html>

 

 

Nancy O'Shea— Product User & Community Expert
    D
    DominiqueSJSUAuthor
    Known Participant
    October 11, 2020

    Thank you very much for the responses.  I figured it would have to be hand coded in script.  It seems like such a simple thing and yet none of the new Adobe products like Lightroom, Portfolio or Rush seem to offer this option which is odd because if you are putting together a presentation and you want to avoid having to manually click through after playing a video clip there should be this option to better automate.

     

    It seems the action is dependent upon time as well.   Yet, even if the video clip is say 20 seconds long you can't set the timer on first page to redirect to a second webpage after 20 seconds because the video may take longer due to buffering or other loading issues.   So basically it is an event that has to occur (i.e. the video finished playing) in order to trigger or execute the transition to another page.

     

    I have a follow up question that I could use some help with if possible?  I am having trouble with keeping the video responsive and getting it to resize to fit whatever screen it is being displayed in.  It is 1920px by 1080px and it high definition.  It keeps displaying much larger than the screen and when I resize in the web browser it does not stay centered or keep maintain cohesion with the browser window.

     

    I am using CSS and have the following code:

     

    index {background-color:#FFFFFF;
    white-space: nowrap;}

    video {
    position: relative;
    margins: 0px;
    initial-scale: 100%;
    min-width: 10%;
    max-width:1000%;
    z-index: 1000%;
    height: auto;
    overflow: auto;
    user-scalable:"yes";}

    body {margin:0px;
    overflow: auto;
    }

    @217338 all screen (max-width: 400px);{body{video:videoClip.mp4;}}
    @217338 all screen (min-width: 401px);{body{video:videoClip.mp4;}}
    @217338 all screen (min-width: 769px);{body{video:videoClip.mp4;}}

     

     

    I am also using the following in the source code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>

    <title>Index</title>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="css/video.css" id="pagesheet"/>
    </head>
    <body>
    <container>
    <sandbox>
    <seamless>
    <video autoplay>
    <source src="videoClip.mp4" type="video/mp4">
    <source src="videoClip.ogv" type="video/ogg">
    <source src="videoClip.webm" type="video/webm">
    Your web browser does not meet the minimum requirements to view this page.
    </video>
    </seamless>
    </sandbox>
    </container>
    </body>
    </html>

    D
    DominiqueSJSUAuthor
    Known Participant
    October 15, 2020

    Again, I am not sure why some people are opposed to video content, especially now when there are so many streaming services out there.

     

    I think there was an initial mis-understanding about full-screen video content between myself and Nancy. As long as its processed in a sympathetic way, ie is 'muted' on page load, is short and swift, there is other content below the full screen video, which spiders can source,  I dont see them as being negative. You'd maybe want to consider excluding them for mobile devices as they suck up the users bandwidth but that's up to the individual developer to make a decision about. These full screen videos are generally viewed as being purely for 'eye candy' to provide impact, they are not supposed to be informational, like youtube etc, where you would naturally expected them to be non-muted. Having said that they have been around for a few years and everything goes in cycles.


    Dude, I was wrong, your script does work!  First of all, I apologize for my typos.  Second, I think the problem was where I put the video ID in relation to autoplay.  It works with the following:  <video id="myVideo"; autoplay>    

     

    I replaced the original video tag <video> with that.

     

    Thank you again, problem solved!

    Dominique

    O
    osgood_Correct answer
    Legend
    October 10, 2020

    Are you using the video tag?

     

    <video>

    </video>

     

    If you are then give it an id:

     

    <video id="myVideo">

    </video>

     

     

    Then add the script below, just before the closing </body> tag, to the page which contains the video and change the href to the page which you want to go to, after the video has stopped playing.

     

    <script>
    const myVideo = document.querySelector("#myVideo");

    myVideo.onended = function() {
    window.location.href = 'goToMyPage.html';
    }
    </script>

     

      D
      DominiqueSJSUAuthor
      Known Participant
      October 11, 2020

      Much appreciated, I will give this a shot.  I posted a follow up question below in this same thread.

       

      Thank you!

      Dominique

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices