Highlighted

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

Community Beginner ,
Oct 09, 2020

Copy link to clipboard

Copied

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?

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>

 

TOPICS
Bootstrap, Browser, Code, How to, Other, Publish

Views

98

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
Oct 09, 2020

Copy link to clipboard

Copied

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?

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>

 

TOPICS
Bootstrap, Browser, Code, How to, Other, Publish

Views

99

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 09, 2020 0
LEGEND ,
Oct 10, 2020

Copy link to clipboard

Copied

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>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2020 1
Community Beginner ,
Oct 10, 2020

Copy link to clipboard

Copied

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

 

Thank you!

Dominique

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2020 0
Adobe Community Professional ,
Oct 10, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2020 1
Community Beginner ,
Oct 10, 2020

Copy link to clipboard

Copied

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;
}

@Media all screen (max-width: 400px);{body{video:videoClip.mp4;}}
@Media all screen (min-width: 401px);{body{video:videoClip.mp4;}}
@Media 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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2020 0
LEGEND ,
Oct 11, 2020

Copy link to clipboard

Copied

Try the below css:

 

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

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

left: 50%;
top: 50%;
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
LEGEND ,
Oct 11, 2020

Copy link to clipboard

Copied

This is a better solution, then you won't get any ugly browser scroll bars:

 

video {

width: 100vw;
height: 100vh;

position: fixed;
top: 0;
left: 0;

object-fit: cover;
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
Adobe Community Professional ,
Oct 11, 2020

Copy link to clipboard

Copied

#1 My first reply is responsive.

#2 You don't need OGG or WEBM fallbacks as ALL modern browsers natively support MP4 video.

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
LEGEND ,
Oct 11, 2020

Copy link to clipboard

Copied

'#1 My first reply is responsive'

 

OP requires a 'fullscreen' video which centers horizontally, not one that just keeps its ratio.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
Adobe Community Professional ,
Oct 11, 2020

Copy link to clipboard

Copied

Just between you, me and the fence post, this is probably an exercise in futility as autoplay will not work in all devices unless accompanied by muted.  And Mobile devices in particular block autoplay to prevent unwanted data consumption. 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
LEGEND ,
Oct 11, 2020

Copy link to clipboard

Copied

I dont know whether it's futile or not. I think developers should just give up trying to satisfy every device 100%. If it auto-plays in some devices and only shows a 'cover image' in others, so be it. Personally I would reserve videos for desktop devices and replace them on mobile for something else, a static image, to lessen the download time/wasted bandwidth consumption. Videos to me are just 'eye candy' and that's ok in situations where your connection is super fast.  I rarely if ever connect to the internet outside of my office environment, so would not be able to tell you what the preformance, of any website is like, regardless if it contains videos, on a slow connection. However judging by the performance of a lot of wbesites these days on a fast connection they are not likely to perform well on anything other than a fast connection. ..........too many external scripts and heavy frameworks to download, coupled with usually giant images is sure to have a detrimental effect.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
Adobe Community Professional ,
Oct 11, 2020

Copy link to clipboard

Copied

I have autoplay blocked by default as do most people these days because it's annoying. That's why there are so many autoplay blocking add-ons.  So unless the media is muted or contains controls (volume, play button, etc..), I can't experience it. 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
LEGEND ,
Oct 11, 2020

Copy link to clipboard

Copied

Well I always think videos should be 'muted', there's no question about that. Effective fullscreen short 'eye candy' videos dont really need sound to achieve impact.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 1
Adobe Community Professional ,
Oct 11, 2020

Copy link to clipboard

Copied

Full screen video is passe.   A muted video in the header can be every bit as dramatic without taking up precious content real estate on the page.  

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
LEGEND ,
Oct 11, 2020

Copy link to clipboard

Copied

I don't agree, full screen creates a more sophisticated and dramatic solution, just as a full page image in a publication, with a bit of overlaying text, does. But dont let me inform you of that - I've only been in visual communications for over 40 years.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2020 0
Adobe Community Professional ,
Oct 12, 2020

Copy link to clipboard

Copied

I'm no freshman either. 

 

In the pre-Covid days, everyone wanted full screen videos.  But now, not so much. 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0
LEGEND ,
Oct 12, 2020

Copy link to clipboard

Copied

What does Covid have to do with making the decision of whether or not to use a fullscreen background video? I'm not aware that videos spread the Covid virus?

 

I tell you something though, you could be onto something - since Covid the whole worlds become slightly more crazy, including Adobe and their non-sensical decision making.

 

It's ******* hilarious, sitting back and watching it unfold, quite entertaining really.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0
Adobe Community Professional ,
Oct 12, 2020

Copy link to clipboard

Copied

The way we think about things has shifted since Covid.  If someone had told me 8 months ago that the next hot trends would be designer face masks, friend/family "parties" over Zoom, and streaming on a small screen instead of the "movie theater" experience, I would have said "you're nuts!"  But there you have our new world.

 

Stock video houses & full feature movie trailers don't consume the full screen. Unless you're the next Cecil B. DeMill, your video commercial doesn't deserve full screen status either. The site owner who thinks it does is just being pretentious and gaudy.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0
LEGEND ,
Oct 12, 2020

Copy link to clipboard

Copied

Now I know you've been affected........I really don't have a clue why you are associating Covid with web-development at all, unless mad-man Trump has mandatory issued instrutions that web-developers must NOT under any circumstances deploy full background videos, I dont follow US politics that much.

 

They can be used to good effect, many examples can be found if you search for then. The below are just a few - personally I think they rather bring something to the party in terms of being evocative and impactful - as they say 'a picture is worth a thousand words', so a video must be worth  a lot more.

 

https://www.bluhomes.com/

 

Almost full screen:

https://www.storyandheart.com/

 

https://www.couleecreative.com/

 

https://cobblehilldigital.com/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 1
Adobe Community Professional ,
Oct 12, 2020

Copy link to clipboard

Copied

You've actually proved my point.  99% of the time, a dramatic presentation can be achieved with a muted header video (as in your last 4 examples).  Your 1st example is taking an SEO hit. They could have easily added some real content below the fold.  Now they must lavishly toss cash at Google & Bing ads to make up for it.  Most small site owners don't have deep pockets like that.  Every bit of real estate on the home page is precious. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0
LEGEND ,
Oct 12, 2020

Copy link to clipboard

Copied

What do you think I've been talking about in this thread - exactly the kind of videos shown in my examples, which you now seem to agree can provide a dramatic presentation. I'm sure if the dramatic presentation sells the product they can toss some money at SEO, even some of the small companies I work for do that. It's swings and roundabouts - either bore users s**tless or do something which just might be beneficial and make you stand out from your competitors. What is precious is catching the eye of the audience you need to and you arent going to do that with a boring website containing a lot of text on page load or pretty dull static images, even slideshows are past their sell-by-date BUT we all use them because we generally arent creative enough to deploy anything else or the money is not available to do so, if it were or we were working for a good creative company with better clients we would.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0
Adobe Community Professional ,
Oct 12, 2020

Copy link to clipboard

Copied

My first example is what I'm talking about -- full width header video, not full screen.

A muted video in the header

And because the page contains plenty of descriptive content, there is no SEO penalty.

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0
Community Beginner ,
Oct 12, 2020

Copy link to clipboard

Copied

Hi --

 

Actually neither script that either Nancy or Osgood initially given above seems to work for me.  I am not sure why.  I started out creating the HTML5 and CSS in Muse (which is now apparenty a dead Adobe program) so maybe I need to get rid of the assets folder it created and just start from scratch? 

 

I will say that 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.  My Javascript book doesn't recommend doing this, maybe my book is wrong?

 

I am just really amazed there aren't more code options specifically for video and mp4 files?  There are lots of commericials online as well as animations, Youtube videos, Vimeo, slieshows, news footage, etc.  Just very odd.

 

Dominique

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0
Community Beginner ,
Oct 12, 2020

Copy link to clipboard

Copied

The link to cobblehilldigital.com is nice, that is very similar to what I am trying to go for.  I was thinking that maybe I need to put the video in the background.  Maybe I should give that a shot?  There's a weird invisible <div></div> that is showing up when I review the page in Dreamweaver Live mode and it stretches way off into infinity towards the right.  The outline of the box is gray, but the <div> does not actually exist in my code.  So perhaps I put the video in the background and anchor it?  Although the video that is playing in the background on CobbleHillDigital is in the <body> and in a <div class> as follows:

 

<div class="body-wrapper">

    <div class="hero fullpage=section">

        <div class="videoWrapper'>

            <video data-keepplaying="" data-autoplay="" autoplay="" loop"true" preload="auto" muted="" playinline="">

 

Again, thank you both very much for the tips!

Dominique

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0
LEGEND ,
Oct 13, 2020

Copy link to clipboard

Copied

Well that is exactly what I was talking about (full-screen to me, regardless of if its in a 'header' or not, whatever that is these days, a 'header' could be in the footer) but you somehow went off tangent and started talking about Covid and face-masks, zoom etc.........hummmm. Any way we have now established a video 'full-screen/header' could have benefits.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2020 0
LEGEND ,
Oct 13, 2020

Copy link to clipboard

Copied

Replying to the post below (duplicated because this darn forum dosesn't always exactly put the reply post where it needs to be!

 

'My first example is what I'm talking about -- full width header video, not full screen.

A muted video in the header

And because the page contains plenty of descriptive content, there is no SEO penalty.'

 

 

Well that is exactly what I was talking about (full-screen to me, regardless of if its in a 'header' or not, whatever that is these days, a 'header' could be in the footer) but you somehow went off tangent and started talking about Covid and face-masks, zoom etc.........hummmm. Any way we have now established a video 'full-screen/header' could have benefits.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2020 0
LEGEND ,
Oct 13, 2020

Copy link to clipboard

Copied

'I will say that 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. My Javascript book doesn't recommend doing this, maybe my book is wrong?'

 

No, what you are seeing in Nancys code is the css styling for the video tag, which is in the <head> section of the code. The actual <video></video> tags are in the <body></body>

 

Could you upload your page to a server so we can see what code you are using otherwise it just becomes a guessing game?

 

Both javascript solutions to re-direct to another page should work IF implemented correctly HOWEVER I do agree with Nancy that the video should not be the only component on the page as that will impact on SEO. It can be full-screen or as Nancys terminology in the header but there should be content below the video, in my opinion, so something is searchable by engines.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2020 0
Adobe Community Professional ,
Oct 13, 2020

Copy link to clipboard

Copied

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/

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2020 0
Community Beginner ,
Oct 13, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2020 0
LEGEND ,
Oct 14, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2020 0