VrPlayer.AspNetCore 1.0.5

VrPlayer.AspNetCore

Razor Class Library that exposes a <vr-player> TagHelper and ships its assets as Static Web Assets (A-Frame not included).
Build immersive 360/180 video experiences in ASP.NET Core with modern controls and WebXR (VR) support.

• 360/180 (mono) and flat mode.
• HLS (.m3u8) auto-detection with Hls.js fallback where native HLS isn’t available.
• Premium controls: play/pause, popover volume, seek, playback speed, VR, fullscreen.
• Auto-hide controls while playing; reappear on mouse/touch movement.
• Click-to-play/pause on the video canvas.
• Keyboard shortcuts (space/K, F, V, M, arrows, Home/End).
• VR button auto-hides if WebXR isn’t supported (to avoid confusion with fullscreen).
• Close (X) exits VR and/or fullscreen and emits a vrclose event.

VR vs Fullscreen
• VR uses WebXR immersive-vr (headset/visor required).
• Fullscreen only expands the player (360 “magic window”).
If WebXR isn’t supported, the VR button won’t be shown.

Installation (NuGet)

1) Add the package to your ASP.NET Core project:
dotnet add package VrPlayer.AspNetCore

## Use
2)Add scripts in your layout (e.g. _Layout.cshtml):
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="~/_content/VrPlayer.AspNetCore/lib/vrplayer/vr-player.js"></script>

## Quick start
<vr-player src="/videos/demo360.m3u8"
           projection="360"
           streaming="auto"
           poster="/img/poster.jpg"
           autoplay
           muted
           controls
           vrbutton
           titlebar="My 360 Video"
           fov="85"
           style="width:100%;height:480px;"></vr-player>


## Attributes
| Attribute    | Type / Values             | Default | Description                                       |
| ------------ | ------------------------- | ------- | ------------------------------------------------- |
| `src`        | URL                       | —       | Video source (`.mp4`, `.webm`, `.m3u8`, …).       |
| `projection` | `360` \| `180` \| `flat`  | `360`   | Geometry: full sphere, hemisphere, or flat plane. |
| `streaming`  | `auto` \| `hls` \| `file` | `auto`  | `auto` detects `.m3u8`; uses Hls.js when needed.  |
| `poster`     | URL                       | —       | Poster image.                                     |
| `autoplay`   | flag                      | —       | Autoplay (mobile usually requires `muted`).       |
| `loop`       | flag                      | —       | Loop playback.                                    |
| `muted`      | flag                      | —       | Start muted.                                      |
| `controls`   | flag                      | —       | Show player controls.                             |
| `vrbutton`   | flag                      | `true`  | Show VR button (auto-hidden if no WebXR).         |
| `starttime`  | number (seconds)          | `0`     | Initial position.                                 |
| `fov`        | number (degrees)          | `90`    | Camera field of view.                             |
| `titlebar`   | text                      | —       | Title in the top bar.                             |

## Keyboard shortcuts
Shortcuts work when the player is focused/hovered or is in Fullscreen/VR.
- Space or K → Play/Pause
- F → Toggle Fullscreen
- V → Toggle VR (if supported)
- M → Mute/Unmute
- Left / Right → Seek −/+ 5s (hold Shift for 10s)
- Up / Down → Volume +/− 10% (hold Shift for 20%) 
- Home / End → Jump to start / end

## Compatibility tips
iOS/Safari: no WebXR VR → the VR button is hidden; use Fullscreen.
Autoplay: use muted if you need autoplay on mobile.
HLS: native on Safari; use Hls.js on Chrome/Firefox/Edge for .m3u8.

## Examples
(360 HLS with autoplay)
<vr-player src="/media/teaser.m3u8"
           projection="360"
           streaming="auto"
           autoplay muted controls vrbutton
           titlebar="360 Teaser"
           style="width:100%;height:520px"></vr-player>

(180 hemisphere without VR button)
<vr-player src="/media/scene180.mp4"
           projection="180"
           vrbutton="false"
           controls
           style="width:100%;height:520px"></vr-player>

## Troubleshooting
- JS not loading → check Static Web Assets path:
~/_content/VrPlayer.AspNetCore/lib/vrplayer/vr-player.js
- TagHelper not found → ensure _ViewImports.cshtml includes:
@addTagHelper *, VrPlayer.AspNetCore
- VR button not visible → WebXR immersive-vr not supported in this browser/environment.
- Autoplay blocked → most mobile browsers require muted.
- HLS not playing → include Hls.js and set streaming="auto" or hls.

## Notes
- This library does not include A-Frame nor Hls.js. Use the CDNs shown above or bundle them yourself.
- Supports 360/180 (mono). Stereo (SBS/TAB) is planned.

## Changelog (highlights)
- 1.2.0
   - Keyboard shortcuts; click canvas = play/pause.
   - Close (X) exits VR and/or Fullscreen and emits vrclose.
   - VR button auto-hides when WebXR is not available.
- 1.1.x
   - Redesigned single-row controls; improved auto-hide; top title bar.

## License
MIT