This guide is to allow your iOS 11 Safari mobile browser to display <video> element properly:

Issue: 

When you try your app on iOS 11 Safari, peers get connected but the <video> element shows only as a black box.

Reason:

iOS changed its policy regarding <video> elements since iOS 10. According to iOS <video> elements policies, <video> elements require the controls = true and  playsinline attribute to the video tag in order to play <video> elements without fullscreen mode.

Solution:

Set the playinline attribute and controls=true to the <video> tag.

Sample implementation:

Below is an example for the Web SDK "incomingStream" event to implement the above policy to solve it:

JS:

skylink.on('incomingStream', function (peerId, stream, isSelf) {
  var video = document.createElement('video');
  video.id = peerId;
  video.muted = isSelf;
  video.autoplay = true;
  video.controls = true;
  video.setAttribute('playsinline', true); // The required attribute to work.
 
  document.getElementById('peers').appendChild(video);
  attachMediaStream(video, stream);
});

HTML:

<video id="myvideo" controls="true" playsinline autoplay muted></video>