Difference between revisions of "OCTOPUS Colori"
From OCTOPUSCINEMA
m |
m |
||
| Line 7: | Line 7: | ||
</div><br> | </div><br> | ||
| − | + | <html> | |
| + | <style> | ||
| + | #vg { max-width: 720px; margin: 1.5em auto; } | ||
| + | #vg .win { border-radius: 10px; overflow: hidden; background: #1e1e1e; | ||
| + | box-shadow: 0 18px 40px rgba(0,0,0,.35); } | ||
| + | #vg .bar { height: 28px; display: flex; align-items: center; gap: 8px; | ||
| + | padding: 0 12px; background: #2d2d2d; } | ||
| + | #vg .bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } | ||
| + | #vg .bar i:nth-child(2) { background: #febc2e; } | ||
| + | #vg .bar i:nth-child(3) { background: #28c840; } | ||
| + | #vg video { display: block; width: 100%; background: #000; } | ||
| + | #vg .dots { display: flex; justify-content: center; gap: 10px; margin-top: 14px; } | ||
| + | #vg .dots button { width: 13px; height: 13px; padding: 0; border: 0; cursor: pointer; | ||
| + | border-radius: 50%; background: #c4c4c4; transition: background .2s, border-radius .2s; } | ||
| + | #vg .dots button.active { background: #555; } | ||
| + | #vg .dots button.playing { border-radius: 2px; | ||
| + | background: linear-gradient(90deg,#555 0 34%,transparent 34% 66%,#555 66% 100%); } | ||
| + | </style> | ||
| + | |||
| + | <div id="vg"> | ||
| + | <div class="win"> | ||
| + | <div class="bar"><i></i><i></i><i></i></div> | ||
| + | <video id="vgv" muted playsinline preload="auto"></video> | ||
| + | </div> | ||
| + | <div class="dots" id="vgd"></div> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | (function () { | ||
| + | var base = "/products/colori/", | ||
| + | clips = ["Hero-1.mp4","Hero-1.mp4","Hero-1.mp4"], | ||
| + | v = document.getElementById("vgv"), | ||
| + | d = document.getElementById("vgd"), | ||
| + | i = 0; | ||
| + | |||
| + | clips.forEach(function (f, n) { | ||
| + | var b = document.createElement("button"); | ||
| + | b.onclick = function () { | ||
| + | if (n !== i) return load(n); | ||
| + | v.paused ? v.play() : v.pause(); | ||
| + | }; | ||
| + | d.appendChild(b); | ||
| + | }); | ||
| + | |||
| + | function load(n) { i = n; v.src = base + clips[n]; v.play(); sync(); } | ||
| + | function sync() { | ||
| + | [].forEach.call(d.children, function (b, n) { | ||
| + | b.classList.toggle("active", n === i); | ||
| + | b.classList.toggle("playing", n === i && !v.paused); | ||
| + | }); | ||
| + | } | ||
| + | v.addEventListener("ended", function () { load((i + 1) % clips.length); }); | ||
| + | ["play","pause"].forEach(function (e) { v.addEventListener(e, sync); }); | ||
| + | load(0); | ||
| + | })(); | ||
| + | </script> | ||
| + | </html> | ||
| + | |||
| + | |||
<div class="product-callout"> | <div class="product-callout"> | ||
Revision as of 14:46, 14 September 2026
The first video tool – for building video tools.
Build grades, optical simulations, film emulation, diagnostic tools, color operations - anything. And then run them instantly on your local machine with real-time tactile control.
Free Download
No credit card required.
For Windows & macOS.
Keep your Adobe workflow.
With Colori for Premiere, you can send your Colori tools straight to Premiere.
Learn more about Colori for Premiere ›
Instant tactile feedback. Colori tools run in real-time on your machine’s GPU. Manipulate sliders, pick colors and more with instant feedback.