Hls.js: Safari on iPhone does not play stream in web page

[chienming]

I am not sure if this is a question or issue. I can provide more information if needed.

I create a web page to include JavaScript codes similar to the one described in "Getting Started" at https://github.com/dailymotion/hls.js

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
<video id="video" controls autoplay></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

When I open the page in Safari 10 on Mac (macOS 10), the HLS stream plays automatically very well.
However, the stream does not play when I open the page in Safari on iPhone 6 (the latest iOS 10.2.1).
The stream does not play even if I click the play button shown on the page.

If I open the m3u8 playlist directly in Safari on iPhone, Safari does not play the stream automatically. I have to click the play button and then a full-screen media player is launched to play the stream.

It seems that Safari on iPhone does not launch the media player when it opens the web page. My question is how to let Safari on iPhone play the stream automatically when opening the web page. Are the JavaScript codes I used correct?

[dhassoun]

Safari mobile does not support media source extensions and thus will not
work with hls.js

[ Sent from mobile device - please excuse brevity or typos ]

On Feb 16, 2017 8:40 PM, "chienming" [e-mail] wrote:

I am not sure if this is a question or issue. I can provide more
information if needed.

I create a web page to include JavaScript codes similar to the one
described in "Getting Started" at https://github.com/dailymotion/hls.js

When I open the page in Safari 10 on Mac (macOS 10), the HLS stream plays
automatically very well.
However, the stream does not play when I open the page in Safari on iPhone
6 (the latest iOS 10.2.1).
The stream does not play even if I click the play button shown on the page.

If I open the m3u8 playlist directly in Safari on iPhone, Safari does not
play the stream automatically. I have to click the play button and then a
full-screen media player is launched to play the stream.

It seems that Safari on iPhone does not launch the media player when it
opens the web page. My question is how to let Safari on iPhone play the
stream automatically when opening the web page. Are the JavaScript codes I
used correct?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/dailymotion/hls.js/issues/986, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAdFLdw9OiiqyQTmJM6zrgYHSzUKKY7hks5rdRacgaJpZM4MD1qK
.

[chienming]

David, thank you for the information. I am not aware of the difference between Safari desktop and Safari mobile. Do you have any references related to the limitation of Safari mobile?

To play HLS streams embedded in a web page in various browsers, it seems that I have to use other ways in the page for Safari mobile and can use hls.js for the rest of browsers (e.g. Chrome and Safari on Mac). For example, one approach is to use HTML5

Can I rely on Hls.isSupported() to discover the browsers without MSE support such as Safari mobile?

Do you have other suggestions or examples?

[rebotnix]

It is possible since iOS 10 with inline as well with videotextures that
i used in combination with HLS.js for adaptive vr 360 VOD or live
streaming. Search google inline video ios 10.

Here is an example that you also can try on iphone vs. ipad.

https://connectlounge.de/raypackvr360

On iPhones you can´t do autoplay, ipad is possible.

For handling m3u8 on safari, i added a simple browser check that detects
safari and i do not load the hls.js library when i detect browsers that
native support HLS (which safari will do). when you load after the
detection an videoplayer like videojs it will give the user the same
look and feel with the same m3u8 playlists.

it´s all a little bit hacky, but its better to give the user a bad
experience.

Gary

Am 17.02.17 um 07:13 schrieb chienming:

David, thank you for the information. I am not aware of the difference
between Safari desktop and Safari mobile. Do you have any references
related to the limitation of Safari mobile?

To play HLS streams embedded in a web page in various browsers, it
seems that I have to use other ways in the page for Safari mobile and
can use hls.js for the rest of browsers (e.g. Chrome and Safari on
Mac). For example, one approach is to use HTML5 tag with m3u8 playlist
as the video source in the web page.

Do you have other suggestions or examples?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/dailymotion/hls.js/issues/986#issuecomment-280563343,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAil6f792puexA1aUP7VrFxT9nuuTJB-ks5rdTqhgaJpZM4MD1qK.

[sylvio-ruiz]

You can autoplay your video on iOS 10, but you will lose the audio track, check this post:

https://webkit.org/blog/6784/new-video-policies-for-ios/

WebKit’s New policies for video

Starting in iOS 10, WebKit relaxes its inline and autoplay policies to make these presentations possible, but still keeps in mind sites’ bandwidth and users’ batteries.

By default, WebKit will have the following policies:

< video autoplay > elements will now honor the autoplay attribute, for elements which meet the following conditions:

• < video > elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
• < video muted > elements will also be allowed to autoplay without a user gesture.
• If a
• < video autoplay > elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
• < video autoplay > elements will pause if they become non-visible, such as by being scrolled out of the viewport.

< video > elements will now honor the play() method, for elements which meet the following conditions:

• < video > elements will be allowed to play() without a user gesture if their source media contains no audio tracks, or if their muted property is set to true.
• If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.
• < video > elements will be allowed to play() when not visible on-screen or when out of the viewport. video.play() will return a Promise, which will be rejected if any of these conditions are not met.

On iPhone, < video playsinline > elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.

< video > elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.

When exiting fullscreen with a pinch gesture, < video > elements without playsinline will continue to play inline.

For clients of the WebKit framework on iOS, these policies can still be controlled through API, and clients who are using existing API to control these policies will see no change. For more fine-grained control over autoplay policies, see the new WKWebViewConfiguration property mediaTypesRequiringUserActionForPlayback. Safari on iOS 10 will use WebKit’s default policies.

[johnBartos]

Resolved