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 14, 2020

    I guarantee the code I posted works as expected.

    1. Muse generated code is cow dung.  Get rid of it.

    2. Start over with a new, blank document with Ctrl+N > Doc type: HTML, Framework: None, hit Create Button.

    3. Copy & paste the entire code I gave you (without any changes) directly into the empty document. 

    4. SaveAs test.html and preview it in browsers. 

     

    "I think part of the issue with Nancy's code is that the <video> tag is in the head and the </video> end part of the tag is in the body."

    Untrue.  The code between <style> tags is CSS, not HTML.   More importantly, if you don't understand code, you should NOT be using Dreamweaver to create sites because  you won't know how to fix errors when you encounter them. 

     

    HTML

    https://www.w3schools.com/html/

     

    CSS

    https://www.w3schools.com/css/

     


    Muse is cow dung, check!   Yeah, I would prefer to not upload what I am working on to this forum.  It's also just a temporary thing that I am doing in part for a class I am taking.   It's not an assignment, per se, (I don't want anyone to think I am cheating...), I deciding to make this commercial that then would automatically redirect to another webpage. 

     

    The exmaples you gave were helpful.  There does appear to be some fairly extensive CSS already out there for playing video online according to the libraries some of those websites are using.  It looks like I can also create an event with javascript for when the video stops playing.

     

    Again, I am not sure why some people are opposed to video content, especially now when there are so many streaming services out there.  So it isn't just about making sure the video and the site are responsive for mobile devices they have to be responsive for large screen tvs too.

     

    Regards,

    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