https://github.com/gromnitsky/tv-program

A silly web component that displays a custom video in a CRT TV frame with occasional "snow"
https://github.com/gromnitsky/tv-program

crt-monitor web-components

Last synced: 7 months ago
JSON representation

A silly web component that displays a custom video in a CRT TV frame with occasional "snow"

• Host: GitHub
• URL: https://github.com/gromnitsky/tv-program
• Owner: gromnitsky
• Created: 2023-04-02T07:09:45.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-04-04T12:53:37.000Z (over 2 years ago)
• Last Synced: 2025-01-20T06:42:12.575Z (9 months ago)
• Topics: crt-monitor, web-components
• Language: JavaScript
• Homepage: https://gromnitsky.users.sourceforge.net/js/examples/tv-program/
• Size: 2.78 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
~~~

  tv-program { width: 40%; }

~~~

creates 2 video tags and a picture on top of each other. 1st video is

a tv "snow" effect; 2nd video is a "tv program"; the picture is a

device frame.

Hovering the "device" invokes snow, clicking--pauses the "tv program"

video.

To specify your own video:

    

optional `width`, `x`, and `y` params are % relative to the device frame.

Several "device" frames are available:

* `crt tv with antenna` (default)

* `black crt tv`

* `white crt monitor`

* `imac g3`

To select:

    

Events:

* `program-canplay`: fires when the "tv program" video starts playing.

  ~~~

  let device = device.querySelector('tv-program')

  device.addEventListener('program-canplay', evt => {

      console.log(evt.target)

  })

  ~~~

## Loicense

MIT