Skip to content

Web VR video player for 180° SBS and TB videos. Option to play standard videos in cinema mode. Support for Cardboard, Oculus. Gamepad controls. This project started as experiment to learn ThreeJS.

License

code4fukui/web_vr_video_player

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Web VR video player for 180° videos.

Licenses

Source code Licensed under MIT License

Icons are licensed under "Free for commercial use with attribution license"

Fonts are licensed under the Apache License, Version 2.0.

Functionality

Search in current folder

Search will filter current folder with provided phrase. You can switch folders, search phrase will work until it's cleared.

Search-box

Search-box-keyboard

Sorting

Sort by Name or Date, change order ascending/descending.

Sorting

Drag in Folders view

You can reposition Folders view by holding trigger and dragging view using bottom bar.

drag

Drag in Player view

You can reposition Player and Video Spheres by holding trigger and dragging view using bottom bar.

drag

Second options is to reposition only Player controls

drag

Player controls and spheres will reset to default position on exit from current video playback

Gamepad controls

Playback control

Thumbstick:

  • up/down for zoom
  • left/right for rewind and fast forward (10 seconds jumps)

If there are two connected controllers pressing trigger switches active controller.

Folders view

Thumbstick:

  • left/right for switching pages

Requirements

  • Linux server with installed and configured web server including https (WebXR requires https)
  • FFMPEG installed (required if thumbnails generator will be used)

Setup

Extensions

Extensions

Generating your own JSON file with video sources

Player is using locally stored JSON file with video sources.

Structure for CSV file

folder,name,src,thumbnail,screen_type,mode,frame_width,frame_height,date,duration
FOLDER_NAME,FILE NAME DISPLAYED IN UI,SOURCE URL TO VIDEO FILE,SOURCE URL TO THUMBNAIL FILE,TYPE OF SCREEN,2D or 3D,DATE TIME (format: %Y-%m-%d %H:%M:%S),DURATION (format: %s)

Screen type

"screen_type" can be set to one of values:

sbs - Side by Side

tb - Top Bottom 180

360 - Top Bottom 360

sphere180 - fisheye 180, not VR (one lens)

sphere360 - fisheye 360, not VR (one lens)

screen - normal 2D screen

Using JSON solution and provided JavaScript scripts

deno run -A script/makeFiles.js

→ files.csv / files.json

Troubleshooting

If videos or player can't be loaded make sure that this app files are owned by web server user (eg. www-data) and that web server user can read video and thumbnail files (eg. www-data is owner or permissions for others include read).

Screenshots

Print-screen-1

Print-screen-2

Print-screen-3

About

Web VR video player for 180° SBS and TB videos. Option to play standard videos in cinema mode. Support for Cardboard, Oculus. Gamepad controls. This project started as experiment to learn ThreeJS.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 98.0%
  • HTML 2.0%