The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> need assist with closing intro video, code help
lisas
post Feb 27 2017, 10:59 AM
Post #1





Group: Members
Posts: 6
Joined: 27-February 17
Member No.: 26,328



Hi - I'm new to this and I am building a website for a company. I created an opening video with their logo and a cool graphic mp4 file in Adobe After Effects. I edited the index.htm file with the following code:

<embed src="G:\~~~JB WORKING TEMP\video.mp4" width="1080" Height="720" autoplay="true">

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>landingpage</title>
ect..........

the page opens and plays the video perfectly, when the video is done playing there is a big black place on the landing page where the video was. I want that to close.
I tried google but every link refers to youtube videos. I want this embedded in the website to play as an intro, then close, leaving the landing page open.
Can you help me please?


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lisas
post Feb 27 2017, 10:54 PM
Post #2





Group: Members
Posts: 6
Joined: 27-February 17
Member No.: 26,328



Isn't there anyone around this site to assist? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 28 2017, 08:20 AM
Post #3


.
********

Group: WDG Moderators
Posts: 7,633
Joined: 10-August 06
Member No.: 7



There's a javascript "ended" event that seems to fire when e.g. a video has stopped playing, which you might use to remove the space used by the video. I have no idea about browser support.

See also
https://www.w3schools.com/tags/av_event_ended.asp (simple example)
https://developer.mozilla.org/en-US/docs/Web/Events/ended (more details)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 28 2017, 11:01 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,633
Joined: 10-August 06
Member No.: 7



This worked in my IE9, Firefox and Chrome:

CODE
<video onended="this.style.display='none';">

Note that the page layout will reflow when the VIDEO element disappears, which might be more annoying than a black space.

Maybe it's possible to make the video show a static image once it's finished? One way to do this is by stopping the video at the last second (before it turns black). So if the video is two minutes long you might specify this in the URL:

CODE
src="foo.mp4#t=0,00:01:59"

to make it run from 0 to 00:01:59.

Or you could display the video positioned in front of other content, which avoids reflowing when it's removed.

But I must say that autoplaying videos are quite annoying in most cases, even more so if they block other content while playing (like an ad).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lisas
post Feb 28 2017, 03:07 PM
Post #5





Group: Members
Posts: 6
Joined: 27-February 17
Member No.: 26,328



Thank you for the assist, it is greatly appreciated! I will give your suggestions a try and post back in case someone else has the same issue.
Thx again
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd September 2017 - 07:06 PM