Electroteque Media

Flat 2D Video VR with subtitles

2D Cinema screen in WebXR with subtitle display

PlayerConfig: { "vrvideo": { "projection": "2D", "antialias": true }, "subtitles": { "tracks": [{'default': 1, 'kind': 'subtitles', 'srclang': 'en', 'label': 'English', 'src': '//videos.electroteque.org/subtitles/sintel/sintel_en.vtt'}, {'kind': 'subtitles', 'srclang': 'de', 'label': 'Deutsch', 'src': '//videos.electroteque.org/subtitles/sintel/sintel_de.vtt'}, {'kind': 'subtitles', 'srclang': 'fr', 'label': 'French', 'src': '//videos.electroteque.org/subtitles/sintel/sintel_fr.vtt'}, {'kind': 'subtitles', 'srclang': 'it', 'label': 'Italian', 'src': '//videos.electroteque.org/subtitles/sintel/sintel_it.vtt'}] } } Clip: [ { "type": "video/webm", "src": "//videos.electroteque.org/bitrate/sintel_2000k.webm"}, { "type": "video/mp4", "src": "//videos.electroteque.org/bitrate/sintel_2000k.mp4"} ] PlayerCode: player.on("xrsessionstart", function(e) { console.log("XR Session Start: ", e.data); }).on("xrsessionstop", function(e) { console.log("XR Session Stop"); }).on("xrsupported", function(e) { console.log("XR Device Supported"); }).on("xrnotsupported", function(e) { console.log("XR Not Available"); }).on("xrdevicechange", function(e) { console.log("XR Device Changed"); }).on("xrvisibilitychange", function(e) { console.log("XR Device Visible State: ", e.data); }).on("orientationrequest", function(e) { console.log("Orientation Permissions: ", e.data); });

This example demonstrates Flat 2d video rendering in VR Cinema mode.

When subtitles are configured these will be displayed also on the VR Cinema screen.

For browsers that support WebXR and a headset is available a headset icon will appear to launch into presentation mode. If the WebXR polyfill is configured, non webvr browsers on mobile will display a headset icon.

When rotating away from the visible video screen area in VR. A text notification will appear to click to reposition the pose.

Anti-alias is required to be configured for Cinema mode or else jagged edges display. This may produce a peformance hit. 

    
  <div class="flex flex-col w-full">
          <div id="flat" class=""></div>

  </div>

  <script type="text/javascript">

  	var player = flowplayer("#flat", {
    "token": "eyJraWQiOiIyeHRpc0Q5NHZzTjIiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCIyeHRpc0Q5NHZzTjJcIixcImRvbWFpblwiOltcImVsZWN0cm90ZXF1ZS5vcmdcIl19IiwiaXNzIjoiRmxvd3BsYXllciJ9.WLUkZHpDNoaXWDaFO2V5UfXm7SnDvE1pFAM0e7ppnFovOSyCCZM-b8gQNBSElB5yirTP__x76Qyo8pMWh6lVrw"
});

  </script>