тег video autoplay loop с последующим скрытием по концу видео
Доброго времени суток. Есть html код который воиспроизводит видео, как сделать так что бы по окончанию видео оно скрывалось и на заднем воне была другая информация к примеру кторая находиться в <div id="opencontent">здесь то что находиться за видео по окончанию показа. </div>
<video autoplay loop poster="pictures.jpg" id="bgvid"> <source src="video.mp4" type="video/mp4"> </video> Спасибо. |
$('#bgvid').on('ended',function(){
$(this).hide();
$('#opencontent').show()
});
|
Не работает((
<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> |
|
Полный код страницы
<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&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>
|
Не работает(( Если код подставить с низу тоже результат 0... помогите.
|
Кто нибудь еще может помоч?
|
| Часовой пояс GMT +3, время: 12:01. |