timeclicker

Redirect on a link based on video time


Keywords
video, time, redirect, timeclick
License
MIT
Install
npm install timeclicker@1.0.2

Documentation

Timeclicker (Fun project)

Redirect to different link based on time of a video

Uses ðŸŠī

Double click on video on certain time to redirect to different links.

Installation 🐧

  • React

    npm i timeclicker
    import timeclicker from "timeclicker";
    import { useRef, useEffect } from "react";
    
    export default function Player() {
      const videoRef = useRef();
    
      useEffect(() => {
        timeclicker({
          videoElem: videoRef.current,
          config: [
            {
              unit: "sec", // sec, min
              before: 10,
              url: "https://thetuhin.com/10",
            },
            {
              unit: "sec",
              after: 10,
              before: 15,
              url: "https://thetuhin.com/10-15",
            },
            {
              unit: "sec",
              after: 15,
              url: "https://thetuhin.com/15",
            },
          ],
          // or you can use text config as well
        });
      }, []);
    
      return (
        <div>
          {/*  You can use other video player as well, just pass the video element */}
          <video ref={videoRef}></video>
        </div>
      );
    }
  • HTML

    npm i timeclicker
    <!DOCTYPE html>
    <html lang="en">
      <body>
        <video id="myVideo" controls autoplay>
          <source
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            type="video/mp4"
          />
        </video>
      </body>
    
      <script type="module">
        import timeclicker from "https://esm.sh/timeclicker"; // or window.timeclicker
        // double click while playing the video
    
        timeclicker({
          videoElem: document.getElementById("myVideo"),
          config: [
            "if before 10 sec open https://thetuhin.com/10",
            "if after 10 sec but before 15 sec open https://thetuhin.com/10-15",
            "if after 15 sec open https://thetuhin.com/15",
          ],
          // or you can use json config as well
        });
      </script>
    </html>

Note 📝

Made by Tuhin in Sunday. License is MIT.