Electroteque Media

HLS VR Video

VR 360 video using HLS streaming

This example demonstrates VR 360 video using HLS Streaming via HLS.JS or Native Safari HLS. Due to the way the plugin is built work arounds are required to initialize and configure a video tag properly.

NOTE

IOS Safari HLS streaming suffers many problems that require many work arounds. As of now IOS 14.2 and above have rendering issues due to a Webkit bug and should be fixed in IOS 14.5. 

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

  </div>

  <script type="text/javascript">

  	var player = flowplayer("#hls", {
    "src": [
        {
            "src": "//videos.electroteque.org/360/hls/ultra_light_flight.m3u8",
            "type": "application/x-mpegurl"
        }
    ],
    "token": "eyJraWQiOiIyeHRpc0Q5NHZzTjIiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCIyeHRpc0Q5NHZzTjJcIixcImRvbWFpblwiOltcImVsZWN0cm90ZXF1ZS5vcmdcIl19IiwiaXNzIjoiRmxvd3BsYXllciJ9.WLUkZHpDNoaXWDaFO2V5UfXm7SnDvE1pFAM0e7ppnFovOSyCCZM-b8gQNBSElB5yirTP__x76Qyo8pMWh6lVrw",
    "vrvideo": {}
});

  </script>