185 lines
5.5 KiB
HTML
185 lines
5.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width">
|
||
|
|
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
|
||
|
|
<title>Thirty-Three</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="./retail_files/styles.css">
|
||
|
|
<style>
|
||
|
|
@charset "utf-8";
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="background-image: url(retail_files/background/background.jpg);background-repeat:no-repeat;max-width:1200px;margin-left:auto;margin-right:auto;">
|
||
|
|
<div style="padding:10px;overflow:auto;">
|
||
|
|
<div id="main-logo">
|
||
|
|
<div id="TextLogo"><a href="/">Thirty-Three</a></div>
|
||
|
|
</div>
|
||
|
|
<div id="MyNav">
|
||
|
|
<ul>
|
||
|
|
<li><a title="HOME" href="/">HOME</a></li>
|
||
|
|
<li><a title="MEN" href="/jacket.html">MEN</a></li>
|
||
|
|
<li><a title="WOMEN" href="/womenstops.html">WOMEN</a></li>
|
||
|
|
<li><a title="ACCESSORIES" href="/jewelry.html">ACCESSORIES</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.container {
|
||
|
|
display: flex; box-sizing: border-box; padding: 5px 0px;
|
||
|
|
}
|
||
|
|
.panel {
|
||
|
|
box-sizing: border-box; width: calc(50% - 5px); height:100%; float: left; margin: 0 5px;
|
||
|
|
}
|
||
|
|
.vidDetails {
|
||
|
|
display:inline-block; margin:0 10px;
|
||
|
|
}
|
||
|
|
.vidDetails > p {
|
||
|
|
padding:4px 0px; font-size:1em;
|
||
|
|
}
|
||
|
|
.bold { font-weight:bold; }
|
||
|
|
|
||
|
|
.videoplayer { width: 98%; }
|
||
|
|
|
||
|
|
@media only screen and (max-width : 800px) {
|
||
|
|
.container { display: block; }
|
||
|
|
.panel { display: block; float: none; width: calc(100% - 20px); margin:10px; }
|
||
|
|
.videoplayer { width: 98%; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.clear { display: block; margin:5px 0px; clear: both; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div id="productContainer" style="padding:10px;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="panel" id="vPanel">
|
||
|
|
<p><b>IM Optimized</b></p>
|
||
|
|
|
||
|
|
<video class="videoplayer" id="myVideo1" poster="video/jacket-poster.jpg" controls="" playsinline="" muted="">
|
||
|
|
<source src="/video/jacket-new.mp4" type="video/mp4">
|
||
|
|
Your browser does not support HTML5 video.
|
||
|
|
</video>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="panel" id="vPanel">
|
||
|
|
<p><b>Original (Pristine)</b></p>
|
||
|
|
|
||
|
|
<video class="videoplayer" id="myVideo2" poster="video/jacket-poster.jpg" controls="" playsinline="" muted="">
|
||
|
|
<source src="/video/jacket-new.mp4?imbypass=true" type="video/mp4">
|
||
|
|
Your browser does not support HTML5 video.
|
||
|
|
</video>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var vid = document.getElementById("myVideo1");
|
||
|
|
var vid2 = document.getElementById("myVideo2");
|
||
|
|
|
||
|
|
var playPromise1;
|
||
|
|
var playPromise2;
|
||
|
|
|
||
|
|
function toggleVids(button) {
|
||
|
|
if (button.innerText == "Play Both Videos") {
|
||
|
|
// Play
|
||
|
|
playPromise1 = vid.play();
|
||
|
|
playPromise2 = vid2.play();
|
||
|
|
document.getElementById("btnToggleVids").innerText = "Pause Both Videos";
|
||
|
|
} else if (button.innerText == "Pause Both Videos") {
|
||
|
|
// Pause
|
||
|
|
checkVidState("pause");
|
||
|
|
document.getElementById("btnToggleVids").innerText = "Play Both Videos";
|
||
|
|
} else {
|
||
|
|
// Must be stop.
|
||
|
|
checkVidState("stop");
|
||
|
|
document.getElementById("btnToggleVids").innerText = "Play Both Videos";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkVidState(action) {
|
||
|
|
if (playPromise1 !== undefined) {
|
||
|
|
playPromise1.then(_ => {
|
||
|
|
// Automatic playback started!
|
||
|
|
// Show playing UI.
|
||
|
|
// We can now safely pause video...
|
||
|
|
if (action == "pause") {
|
||
|
|
vid.pause();
|
||
|
|
} else {
|
||
|
|
vid.load();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
// Auto-play was prevented
|
||
|
|
// Show paused UI.
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (playPromise2 !== undefined) {
|
||
|
|
playPromise2.then(_ => {
|
||
|
|
// Automatic playback started!
|
||
|
|
// Show playing UI.
|
||
|
|
// We can now safely pause video...
|
||
|
|
if (action == "pause") {
|
||
|
|
vid2.pause();
|
||
|
|
} else {
|
||
|
|
vid2.load();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
// Auto-play was prevented
|
||
|
|
// Show paused UI.
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<div id="productDetails" style="border:none; text-align:center;padding:0px;">
|
||
|
|
<button id="btnToggleVids" onclick="toggleVids(this)" type="button" style="border:1px solid grey; font-size:14px; margin-right:10px; padding:10px;">Play Both Videos</button>
|
||
|
|
<button id="btnStopVids" onclick="toggleVids(this)" type="button" style="border:1px solid grey; font-size:14px; padding:10px;">Stop</button>
|
||
|
|
<noscript>You need Javascript enabled in the browser to control both videos at once.</noscript>
|
||
|
|
<div class="clear"> </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="vert-space"></div>
|
||
|
|
|
||
|
|
<div id="BottomList">
|
||
|
|
<div id="BottomContainer">
|
||
|
|
<div id="BottomDetail">
|
||
|
|
<b>Contact Us</b>
|
||
|
|
<ul>
|
||
|
|
<li><a title="Phone" href="/#Phone">Phone</a></li>
|
||
|
|
<li><a title="Email" href="/#Email">Email</a></li>
|
||
|
|
<li><a title="Mail" href="/#Mail">Mail</a></li>
|
||
|
|
<li><a title="Social Media" href="/#Social">Social Media</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="BottomDetail">
|
||
|
|
<b>Departments</b>
|
||
|
|
<ul>
|
||
|
|
<li><a title="Men's" href="/#Mens">Men's</a></li>
|
||
|
|
<li><a title="Women's" href="/#Womens">Women's</a></li>
|
||
|
|
<li><a title="Accessories" href="/#Accessories">Accessories</a></li>
|
||
|
|
<li><a title="Shoes" href="/#Shoes">Shoes</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="BottomDetail">
|
||
|
|
<b>About Us</b>
|
||
|
|
<ul>
|
||
|
|
<li><a title="Press" href="/#Press">Press</a></li>
|
||
|
|
<li><a title="Careers" href="/#Careers">Careers</a></li>
|
||
|
|
<li><a title="Privacy Policy" href="/#PrivacyPolicy">Privacy Policy</a></li>
|
||
|
|
<li><a title="Site Map" href="/#SiteMap">Site Map</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body></html>
|