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
  • 1518 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>

    O
    osgood_
    Legend
    October 11, 2020

    Try the below css:

     

    video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;

    transform: translate(-50%, -50%);

    left: 50%;
    top: 50%;
    }

    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