Video: https://youtu.be/E5ve4zrTrm0
- HLS (HTTP Live Streaming) player.
- Youtube chapters timeline UI.
- Loom comments and jump to timestamp of comment UI and Functionality.
- Participants of the call and their speaking timeline and seek within their timeline.
- Topics of video interaction like gong.
- This project is set up with
vite - Download any video
- use
ffmpegto getm3u8forhls- Make sure to place this in
publicfolder - In the below cmd replace your video files and output file
<input.mp4>and<output.m3u8> - using cmd
ffmpeg -i <input.mp4> -c:v h264 -c:a aac -hls_time 10 -hls_list_size 0 <output.m3u8> - Please wait for some time to get all the required files.
- Make sure to place this in
- Run
yarnto installvite&hls.js - Now update the
VIDEO_M3U8invideo.jsfile to the path of your file - Run
yarn devto start the app. - Run
yarn buildto get production build
- If your machine don't have
ffmpeginstall it viabrewor any other sources andffprobeshould come with it. If not install it. - To generate
m3u8- Single size
ffmpeg -i input.mp4 -c:v h264 -c:a aac -hls_time 10 -hls_list_size 0 output.m3u8 - Multiple sizes
-
-filter_complex "[0:v]scale=1920x1080[out1];[0:v]scale=1280x720[out2];[0:v]scale=854x480[out3]" \ -map "[out1]" -map "[out2]" -map "[out3]" \ -var_stream_map "v:0,v:1,v:2" \ -f hls -hls_time 10 -hls_list_size 0 output.m3u8
- Single size
- For poster at the center of the video
- Ge the middle timestamp
duration=$(ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 input.mp4)middle_timestamp=$(echo "scale=2; $duration / 2" | bc)- Just verify the
middle_timestampwithecho $middle_timestamp - Get the dimensions of the video to get the poster in the same dimension
width=$(ffprobe -v error -select_streams v:0 -show_entries stream=width -of default=noprint_wrappers=1:nokey=1 input.mp4)height=$(ffprobe -v error -select_streams v:0 -show_entries stream=height -of default=noprint_wrappers=1:nokey=1 input.mp4)- Generate and save poster at
middle_timestampwithwidth * height ffmpeg -ss $middle_timestamp -i input.mp4 -frames:v 1 -vf "scale=${width}:${height}" poster.jpg
- Poster with
5%difference from0%to95%- Get the duration
duration=$(ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 input.mp4) - Get posters
-
while [ $interval -lt 100 ]; do timestamp=$(echo "scale=2; $duration * $interval / 100" | bc) output_file="poster-${interval}.jpg" ffmpeg -ss $timestamp -i input.mp4 -frames:v 1 -vf "scale=${width}:${height}" $output_file interval=$((interval + 5)) done
-
- Get the duration
- Ge the middle timestamp
- This is POC done for conversation analytics for sellular
- This POC also show the participants on the call and their speaking timelines and topics in the video.
- The topics/chapters will be shown in the timeline UI of the video like youtube.
- Keyboard shortcuts
kPause/PlayjSkip back 10slSkip forward 10smMute/Un-muteiPicture in PickertTheater modefFull screensCycle b/w playback speedsnStart commenting at the current time of the video (video will pause)
- Once user starts commenting the keyboard shortcuts won't work until user focus on some other element.
- User can seek through the timeline of the video from participants timeline and also from topics timeline.
 |
 |
 |
|---|---|---|
| Hover on video timeline | Hover on participants timeline | Commenting started |
 |
 |
|
| Theater mode | Full screen |