Witam,
Mam problem niedawno stworzyłem odtwarzacz video za pomocą HTML CSS i JAVASCRIPT. Problemem jest to że jak dodaje odtwarzacz na stronę 2-3 razy i klikam play na drugim to odtwarza się film na pierwszym a nie na drugim. Bardzo proszę o pomoc.
Mój kod html:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>SevenShow - Myszoskoczki</title>
<link rel="shortcut icon" type="image/ico" href="/img/fav.ico">
<meta name="description" content="Strona z Myszoskoczkami" />
<meta name="keywords" content="Myszoskoczki, Myszoskoczek, Mysz, SevenShow Myszoskoczki, Myszoskoczki, Myszoskoczek, Mysz, SevenShow Myszoskoczki " />
<link rel="stylesheet" href="/main.css" type="text/css" />
<link rel="stylesheet" href="/menu/css/all.css">
<link rel="stylesheet" href="/css/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div class="header">
<img width="80px" class="logo-img" height="60px" src="logo.png">
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-ellipsis-h"></i>
</label>
<ul class="menu">
<a href="index.html">Strona głowna</a>
<a href="Windows7.html">Windows 7</a>
<a href="Myszoskoczki.html">Myszoskoczki</a>
<a href="Poradniki.html">Poradniki</a>
<a href="Centrumpobierania.html">Centrum pobierania</a>
<a href="https://www.youtube.com/channel/UCUAQQcJ6lfqpimPUMBbYQSA"target="_blank">Youtube</a>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<div id="container">
<div class="title">
Moje <span style="color: #2CBFA4">Myszoskoczki</span>
</div>
<div class="text">
Oto najładniejsze zdjęcia i filmy z moimi Myszoskoczkami. Zobacz je wszystkie.
</div>
<div class="images">
<img width="280" height="200" src="img/unnamed (2).jpg" class="mysz-1"</img>
<img width="280" height="200" src="img/unnamed (3).jpg" class="mysz-2"></img>
<div class="mysz-3"><img src="img/unnamed (24).jpg" alt="Baticzki"></div>
<div class="mysz-4"><img width="280" height="200" src="img/unnamed (24).jpg"></div>
<img width="280" height="200" src="img/unnamed (25).jpg" class="mysz-5"</img>
<img width="280" height="200" src="img/unnamed (4).jpg" class="mysz-2"</img>
<img width="280" height="200" src="img/unnamed (5).jpg" class="mysz-5"</img>
<img width="280" height="200" src="img/unnamed (6).jpg" class="mysz-1"</img>
<div class="mysz-3"><img width="280" height="200" src="img/unnamed (7).jpg" class="mysz-"</img></div>
<img width="280" height="200" src="img/unnamed (8).jpg" class="mysz-1"</img>
<div class="mysz-4"><img width="280" height="200" src="img/unnamed (9).jpg" class="mysz-2"</img></div>
<img width="280" height="200" src="img/unnamed (10).jpg" class="mysz-2"</img>
<img width="280" height="200" src="img/unnamed (11).jpg" class="mysz-5"</img>
<img width="280" height="200" src="img/unnamed (12).jpg" class="mysz-1"</img>
<img width="280" height="200" src="img/unnamed (13).jpg" class="mysz-2"</img>
<img width="280" height="200" src="img/unnamed (14).jpg" class="mysz-5"</img>
<img width="280" height="200" src="img/unnamed (15).jpg" class="mysz-1"</img>
<img width="280" height="200" src="img/unnamed (16).jpg" class="mysz-2"</img>
<div class="mysz-4"><img width="280" height="200" src="img/unnamed (17).jpg" class="mysz-"</img></div>
<img width="280" height="200" src="img/unnamed (18).jpg" class="mysz-5"</img>
<img width="280" height="200" src="img/unnamed (32).jpg" class="mysz-1"</img>
<div class="mysz-4"><img width="280" height="200" src="img/img (1).jpg" class="mysz-"</img></div>
<img width="280" height="200" src="img/img (2).jpg" class="mysz-1"</img>
<img width="280" height="200" src="img/img (3).jpg" class="mysz-5"</img>
<img width="280" height="200" src="img/img (4).jpg" class="mysz-1"</img>
<img width="280" height="200" src="img/img (5).jpg" class="mysz-2"</img>
<div class="mysz-3"><img width="280" height="200" src="img/img (6).jpg" class="mysz-"</img></div>
<img width="280" height="200" src="img/img (7).jpg" class="mysz-5"</img>
<img width="280" height="375" src="img/unnamed.jpg" class="mysz-5"</img>
<img width="280" height="375" src="img/unnamed (1).jpg" class="mysz-1"</img>
<img width="280" height="375" src="img/unnamed (19).jpg" class="mysz-2"</img>
<img width="280" height="375" src="img/unnamed (20).jpg" class="mysz-1"</img>
<img width="280" height="375" src="img/unnamed (21).jpg" class="mysz-5"</img>
<img width="280" height="375" src="img/unnamed (22).jpg" class="mysz-2"</img>
<img width="280" height="375" src="img/unnamed (23).jpg" class="mysz-1"</img>
<img width="280" height="375" src="img/unnamed (26).jpg" class="mysz-5"</img>
<img width="280" height="375" src="img/unnamed (28).jpg " class="mysz-1"</img>
<img width="280" height="375" src="img/unnamed (29).jpg" class="mysz-2"</img>
<img width="280" height="375" src="img/unnamed (30).jpg" class="mysz-5"</img>
<img width="280" height="375" src="img/unnamed (31).jpg" class="mysz-1"</img>
</div>
<div class="body">
<video preload="" poster="poster.jpg" >
<source src="/pliki/wid (2).mp4" type="video/mp4"></source>
<source src="lesson1.ogg" type="video/ogg"></source>
</video>
<nav>
<button id="start" onclick="v.play()"><i class="icon-play"></i></button>
<button id="stop" onclick="v.currentTime=0;v.pause()"><i class="icon-stop"></i></button>
<button id="pause" onclick="v.pause()"><i class="icon-pause"></i></button>
<button id="mute" onclick="v.muted = !v.muted"><i class="icon-volume-off-4"></i></button>
<progress value="0" max="100" step="0.1"></progress>
</nav>
</div>
<div class="body">
<video preload="" poster="poster.jpg" >
<source src="/pliki/wid (2).mp4" type="video/mp4"></source>
<source src="lesson1.ogg" type="video/ogg"></source>
</video>
<nav>
<button id="start" onclick="v.play()"><i class="icon-play"></i></button>
<button id="stop" onclick="v.currentTime=0;v.pause()"><i class="icon-stop"></i></button>
<button id="pause" onclick="v.pause()"><i class="icon-pause"></i></button>
<button id="mute" onclick="v.muted = !v.muted"><i class="icon-volume-off-4"></i></button>
<progress value="0" max="100" step="0.1"></progress>
</nav>
</div>
</div>
<div id="stopka">© 2019-2020 SevenShow</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
var headerY = $('.header').offset().top;
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > headerY) {
$('.header').addClass('sticky');
} else {
$('.header').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
<script>
var v = document.getElementsByTagName('video')[0];
v.addEventListener('timeupdate', function()
{
var p = document.getElementsByTagName('progress')[0];
p.value = 100*this.currentTime/this.duration;
});
</script>
</body>
</html>
Mój kod CSS
.body{
width: 500px;
height: 270px;
border-radius: 5px;
padding: 2%;
display: inline-block;
}
video{
display: block;
margin: auto;
border: 1px solid #2CBFA4;
border-radius: 5px;
width: 480px;
height: 270px;
}
nav{
width: 500px;
text-align: center;
}
nav button{
background: none;
border: 1px solid white;
position: relative;
top: -80px;
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
background: ;
z-index: 1;
font-size: 18px;
transition: 0.4s;
outline: 0;
}
nav button:hover{
opacity: 1;
cursor: hand;
color: #2CBFA4;
}
progress{
clear: both;
display: block;
width: 80%;
margin: auto;
position: relative;
top: -70px;
height: 5px;
z-index: 1000;
opacity: 0.5;
background: #2CBFA4;
}
Mój kod Javascript
<script>
var v = document.getElementsByTagName('video')[0];
v.addEventListener('timeupdate', function()
{
var p = document.getElementsByTagName('progress')[0];
p.value = 100*this.currentTime/this.duration;
});
</script>
