Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title></title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <style>
- video {
- width:600px;
- position:absolute;
- top:50%;
- left:50%;
- transform:translate(-50%,-50%);
- border:5px solid red;
- padding:5px;
- cursor:pointer;
- }
- #h1, #h2 {
- position:absolute;
- top:5%;
- left:50%;
- transform:translate(-50%,-5%);
- font-size:40px;
- font-family:arial;
- }
- </style>
- </head>
- <body>
- <h1 id='h1'></h1>
- <h1 id='h2'></h1>
- <a href='1.mp4'></a>
- <a href='2.mp4'></a>
- <a href='3.mp4'></a>
- <a href='4.mp4'></a>
- <a href='5.mp4'></a>
- <video id='video'></video>
- <script>
- Default = 0;
- counter = 1;
- i = 0;
- x = document.getElementsByTagName('a');
- video.src = x[i];
- video.onclick = function(){
- if( Default == 0 ){
- Default = 1;
- video.controls = true;
- video.load();
- video.play();
- h1.innerHTML = 'Now playing Video ' + counter;
- }
- }
- video.onended=()=>{
- i++;
- counter++;
- video.src = x[i];
- video.play();
- h1.innerHTML = 'Now playing Video ' + counter;
- if( i == x.length ){
- i = 0;
- video.src = x[i];
- video.play();
- h2.innerHTML = 'Loop mode now active';
- h1.style.display = 'none';
- }
- if( counter == x.length ){
- counter = 0;
- }
- }
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment