Create New Item
×
Item Type
File
Folder
Item Name
×
Search file in folder and subfolders...
File Manager
/
backup
:
index_video.html
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Sara Textiles</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/modern-business.css" rel="stylesheet"> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> </head> <body> <!--<div class="bg" id="item_1"></div> <div class="bg" id="item_2"></div> <div class="bg" id="item_3"></div>--> <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="sara_textiles_movies.mp4" type="video/mp4"> </video> <button id="vidpause">Pause</button> <div> <div style="text-align:center; margin-bottom:20px; "><img src="images/logo.jpg" /></div> </div> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"> Welcome to Sara Textiles </h1> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><i class="fa fa-fw "></i>Home Furnishing</h4> <img src="images/2.jpg" height="200px" width="300px" /> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p> <a href="#" class="btn btn-default">Enter Site</a> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><i class="fa fa-fw "></i>Textiles Machinery</h4> <img src="images/1.jpg" height="200px" width="300px" /> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p> <a href="#" class="btn btn-default">Enter Site</a> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><i class="fa fa-fw "></i>Garments</h4> <img src="images/3.jpg" height="200px" width="300px" /> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p> <a href="#" class="btn btn-default">Enter Site</a> </div> </div> </div> </div> <footer> <div class="row"> <div class="col-lg-12"> <p>Copyright © Sara Textiles 2015</p> </div> </div> </footer> </div> <!-- /.container --> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- Script to Activate the Carousel --> <script> /* $('.carousel').carousel({ interval: 5000 //changes the speed })*/ $(document).ready(function () { /* var img_array = [1, 2, 3], newIndex = 0, index = 0, interval = 5000; (function changeBg() { index = (index + 1) % img_array.length; $('body').css('backgroundImage', function () { $('#fullPage').animate({ backgroundColor: 'transparent' }, 1000, function () { setTimeout(function () { $('#fullPage').animate({ backgroundColor: 'rgb(255,255,255)' }, 1000); }, 3000); }); return 'url(images/' + img_array[index] + '.jpg)'; }); setTimeout(changeBg, interval); })();*/ /* var step = 1; function bg(){ var opacity = 0.0; if (step == 3){ n = 3; step = 1; opacity = 1.0; $("#item_"+step).animate({'opacity':opacity},2000); $("#item_"+n).animate({'opacity': 0.0},2000); return; } var n = step+1; $("#item_"+step).animate({'opacity':opacity},2000); $("#item_"+n).animate({'opacity':1.0},2000); step = n; } function loop(){ setInterval(bg,4000); } setTimeout(loop,0);*/ var vid = document.getElementById("bgvid"); var pauseButton = document.getElementById("vidpause"); function vidFade() { vid.classList.add("stopfade"); } vid.addEventListener('ended', function() { // only functional if "loop" is removed vid.pause(); // to capture IE10 vidFade(); }); pauseButton.addEventListener("click", function() { vid.classList.toggle("stopfade"); if (vid.paused) { vid.play(); pauseButton.innerHTML = "Pause"; } else { vid.pause(); pauseButton.innerHTML = "Paused"; } }) }); </script> </body> </html>