Форум

S3inc · #1 (**permalink**) 29.04.2016, 18:04

Доброго времени суток. Есть html код который воиспроизводит видео, как сделать так что бы по окончанию видео оно скрывалось и на заднем воне была другая информация к примеру кторая находиться в <div id="opencontent">здесь то что находиться за видео по окончанию показа. </div>

<video autoplay loop poster="pictures.jpg" id="bgvid">
			<source src="video.mp4" type="video/mp4">
		</video>

Спасибо.

destus · #2 (**permalink**) 29.04.2016, 18:11

$('#bgvid').on('ended',function(){
$(this).hide();
$('#opencontent').show()
    });

S3inc · #3 (**permalink**) 29.04.2016, 18:34

Не работает((

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$('#bgvid').on('ended',function(){
$(this).hide();
$('#opencontent').show()
});
  </script>

<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="video.mp4" type="video/mp4">
</video>

<div id="opencontent">
ssssssssss
</div>

destus · #4 (**permalink**) 29.04.2016, 18:36

S3inc,
https://learn.jquery.com/using-jquer...ocument-ready/

S3inc · #5 (**permalink**) 29.04.2016, 18:39

Полный код страницы

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$('#bgvid').on('ended',function(){
$(this).hide();
$('#opencontent').show()
});

</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cuprum&amp;subset=latin,cyrillic,latin-ext" type="text/css" />	 
<style>
body {font-family:Cuprum;font-size: 13px;line-height: 18px;background: url(bg.jpg) repeat-y center;margin: 0;padding: 0;}
.hdbody {margin: 0; padding: 1; background: url(logo.jpg) no-repeat center top; }
a {	color: #08c;text-decoration: none;}
a:hover,
a:focus {color: #005580; text-decoration: underline;}
#wrap {width: 1001px; margin: 0 auto;}
.header {overflow: hidden; margin: 35px 0 0 0; padding-top: 250px;}
.header .h_in {overflow: hidden;height: 45px;background: url("h_in.png") no-repeat 0 0;}
.header .h_bg {overflow: hidden;height: 718px;background: #eceeeb;}
ul, li, dt { display:block; padding:0; margin:0; list-style:none;}
.left {float:left;}
.right {float:right;}
.center {text-align:center;}
.hidden {overflow:hidden;}
.header .h_button {float:right; margin:6px 5px 0 0;}
.header .h_button a.button1 {display:block; text-decoration:none; float:left; width:150px; height:35px; margin:0 6px 0 3px; line-height:36px; text-align:center; color:#fff; text-transform:uppercase; text-shadow:1px 1px #326622; background:url(h_button.png) no-repeat 0 0;}
.header .h_button a.button2 {display:block; text-decoration:none; float:left; width:129px; height:35px; line-height:36px; text-align:center; color:#fff; text-transform:uppercase; text-shadow:1px 1px #8c5f00; background:url(h_button.png) no-repeat -156px 0;}
.header .h_button a.button1:hover {background-position:0 -35px;}
.header .h_button a.button2:hover {background-position:-156px -35px;}
#bgvid { top: 100%;left: 100%;width: auto;height: auto;z-index: -100;background: url(bgfonvid.jpg) no-repeat;background-size: cover; }
</style>
</head>
<body>
<div class="hdbody">
	<div id="wrap">
		<div class="header">
			<div class="h_in">
			<div class="h_button"><a href="/user/registratsiya" class="button1" title="">Зарегистрироваться</a><a href="/user/index.php?view=login" class="button2" title="">Войти в профиль</a></div>
			</div>
			<div class="h_bg">			
		<video autoplay loop poster="polina.jpg" id="bgvid">
			<source src="video.mp4" type="video/mp4">
		</video>		
		<div id="opencontent">
		ssssssssss
		</div>		
</div>
		</div>
	</div>
</div>
</body>
</html>

S3inc · #6 (**permalink**) 29.04.2016, 19:13

Не работает(( Если код подставить с низу тоже результат 0... помогите.

S3inc · #7 (**permalink**) 30.04.2016, 07:21

Кто нибудь еще может помоч?

Форум

Справочник

Discord чат

Курсы javascript