Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iOS 12.2 video HLS Wrong Color / Occasional black screen

See original GitHub issue

Recently iOS version 12.2 was pushed to everyone and it seemed to break video playback of aframe.

Problem 1: Color not mapped correctly iOS seemed fixed the color BRGA problem since iOS 11 for native HLS, link . However, aframe still apply the ios10hls shader for playback on iOS native hls. This is messing up the colors to a wrong one. Using standard “flat” shader should be good enough for color.

Problem 2: Native HLS occasional black screen upon video Playback. I have provided a sample code snippet. There is a certain chance such that canvas would display black screen. One finding is that when you change device orientation or enter / exit VR mode, the playback would become normal again. Could anyone advice how to fix this? Thanks!

Another thing that I found is that, some videos cannot play on iOS 12.2, like this one: https://github.com/mrdoob/three.js/raw/dev/examples/textures/sintel.mp4. While the example of aframe still works: https://aframe.io/examples/showcase/videosphere/. This is similar to Problem 2 that orientation change or enter / exit VR mode could put the playback back to normal. Could anyone advice?

A-Frame Version: 0.9.1
Platform / Device: iOS 12.2 Safari
Reproducible Code Snippet or URL:

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
    <style>
      #overlay {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        background-color: #000000;
        color: #ffffff;
      }
      #overlay > div {
        text-align: center;
      }
      #overlay > div > button {
        height: 20px;
        width: 100px;
        background: transparent;
        color: #ffffff;
        outline: 1px solid #ffffff;
        border: 0px;
        cursor: pointer;
      }
      #overlay > div > p {
        color: #777777;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <a-scene>
      <assets>
        <video id="video" loop crossorigin="anonymous" webkit-playsinline src="https://bitmovin.com/player-content/playhouse-vr/m3u8s/105560.m3u8">
        </video>
      </assets>
      <a-videosphere src="#video" rotation="0 -90 0"></a-videosphere>
    </a-scene>

    <div id="overlay">
      <div>
        <button id="startButton">Click to Play</button>
        <p>Automatic video playback with audio requires a user interaction.</p>
      </div>
    </div>

    <script>
      var overlay = document.getElementById('overlay');
      var startButton = document.getElementById( 'startButton' );
      var video = document.getElementById('video');
      startButton.addEventListener( 'click', function () {
        video.play();
        overlay.style = 'display:none';
      }, false );
    </script>

  </body>
</html>

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:13 (3 by maintainers)

Top GitHub Comments

2reactions

fabien-lgcommented, Aug 8, 2020

I fixed the wrong color issue by creating a small component for videosphere that listens to materialvideoloadeddata and puts back the flat shader. flipY needs to be re-applied on the texture too.

1reaction

antiantiviruscommented, Sep 22, 2020

cheers fabien. slightly adapted the code to make it regular old javascript. make sure you register the component in the header so that it’s available to aframe when the a-scene loads.

      AFRAME.registerComponent('ios-video-fix', {
        init: function(){
          let el = this.el;
          el.addEventListener('materialvideoloadeddata', e => {
            el.setAttribute('material', 'shader', 'flat');
            e.detail.texture.flipY = true;
          })
        }
      });

and then on a component add the attribute ios-video-fix