Konubinix' opinionated web of thoughts

Video Player With Hyperscript

Fleeting

video player with hyperscript

Permalink to the player

open

<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://konubinix.eu/ipfs/bafkreignon7jsbfh53i65frzw5pla6ivxkwzffqvq3ikd7lntggsif454y?orig=https://unpkg.com/hyperscript.org@0.9.12"></script>
    <script src="https://konubinix.eu/ipfs/bafybeihp5kzlgqt56dmy5l4z7kpymfc4kn3fnehrrtr7cid7cn7ra36yha?orig=https://cdn.tailwindcss.com/3.4.3"></script>
    <script>
      function get_param(key, def=null) {
          const urlParams = new URLSearchParams(window.location.search);
          return urlParams.get(key) || def;
      }
      function m_s_to_s(m, s) {
          return parseInt(m)*60+parseInt(s)
      }
    </script>
  </head>
  <body class="bg-black">
    <input id="url"
           class="w-full"
           _="
              init
              set #url.value to get_param('url', localStorage.getItem('src')) then send input
              end

              on input debounced at 1s
              get my.value
              send newvideo(src: it) to #video
              if my.value is not get_param('url')
              localStorage.setItem('src', it)
              end
              "
           />
    <video class="min-w-screen min-h-screen object-contain"
           id="video"
           _="
              def key(v)
                 return v + '_' + my@src
              end

              init
              set window.me to me

              on play
              me.scrollIntoView()

              on newvideo(src)
              if get_param('play') exists
              set me.autoplay to true then set me.muted to true
              end
              set my@src to src
              set currentTime to get_param('pos', localStorage.getItem(key('time')))
              if currentTime exists
                  if currentTime.includes(':')
                    set m to currentTime.split(':')[0]
                    set s to currentTime.split(':')[1]
                    set currentTime to m_s_to_s(m,s)
                  end
                  set my.currentTime to currentTime
              end
              set playbackRate to get_param('speed', localStorage.getItem(key('rate')))
              if playbackRate !== null
                  set my.playbackRate to playbackRate
              end

              on timeupdate throttled at 1s
              if no get_param('pos')
              call localStorage.setItem(key('time'), my.currentTime)
              end

              on ratechange
              if no get_param('speed')
              call localStorage.setItem(key('rate'), my.playbackRate)
              end
              "
           controls="controls"
           ></video>
  </body>
</html>