https://github.com/dinoosauro/clock-picture-in-picture
Display the current time in Picture-in-Picture, with lots of customization options
https://github.com/dinoosauro/clock-picture-in-picture
clock clocks picture-in-picture
Last synced: 8 months ago
JSON representation
Display the current time in Picture-in-Picture, with lots of customization options
- Host: GitHub
- URL: https://github.com/dinoosauro/clock-picture-in-picture
- Owner: dinoosauro
- License: mit
- Created: 2023-12-30T20:41:14.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-19T21:31:11.000Z (8 months ago)
- Last Synced: 2025-02-19T22:28:30.940Z (8 months ago)
- Topics: clock, clocks, picture-in-picture
- Language: JavaScript
- Homepage: https://dinoosauro.github.io/clock-picture-in-picture/
- Size: 88.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# clock-picture-in-picture
Display the current time in Picture-in-Picture, with lots of customization options
Try it: https://dinoosauro.github.io/clock-picture-in-picture/
## Clock video
At the top of the page you can see the clock video, with all of the customization options applied. You also have a button that'll automatically put your video into Picture-in-Picture move. If the video has stopped, click on the underlined "here" to start it.
## Basic video customization
You can change the text font, the text color, the text size, the background color and also apply some styles to the text (underline, italic, bold). If you want, you can also add a custom picture as the clock background. Don't worry, everything will always stay on your device, and your image will be stored only locally on your device. If you want, you can also change where the date is placed.
## Date and timer
You can also choose to show the date in the video. You'll be able to choose the placement (top/center/bottom left/center/right) of the date, and the pixels of the text. If you want to know how many hours/minutes/seconds still need to pass before reaching a date, you can add a timer, by putting the time in the `HH:mm:ss` format. You can change the position and the size of the timer too.
## Export clock
### Image
You can export the clock as an image. From the select, choose "Export as an image", then choose the output quality from the slider and then choose the output format. Depending on your browser, some options might not be available.
### Video
You can also export the clock as a WebM or MP4 video, depending on the video encoders provided by your browser. You can choose the length of the video, the FPS (even if also 1fps should have the same result as 120fps, since, well, it only counts seconds) and the output bitrate. Finally, choose the output format (usually you don't really have a choice - browsers provide VP8/VP9 or H264 codec support for encoding, and not both of them). And, after these seconds, the video will automatically be downloaded.
## Advanced settings
Here you can change the width/height of the canvas that is used to show the clock. You can also easily adapt it to your screen's size. Here you can also change the theme, from dark to light or viceversa, and apply a custom CSS stylesheet, useful especially for loading font that you don't have installed on your device. If you import a _malicious_ CSS stylesheet, just put `#noextcss` at the end of the URL and refresh the page to delete it.
You can also choose to refresh the timer quicker if it's going to pass a minute. Intervals of clock refresh will be shorter, and the clock time will be updated slightly before the minute.