I have a page that shows a live stream video, but when I open that page on ios devices it open live stream on fullscreen mode, and when exit of fullscreen mode the live stream pauses. I want that the live stream video play without opening it on fullscreen mode.
With video.js this is what I tried:
html:
<video id="hls-player" controls autoPlay preload="auto" className='video-js vjs-default-skin vjs-big-play-centered'>
<source src="http://localhost:8080/hls/cam06.m3u8" />
</video>
js:
videojs('hls-player', {
controls: true,
liveui:true,
allowfullscreen:false,
autoplay: true,
});
Also, I tried using the Clappr library but got the same result, here is what I've done:
*html:
<div id="player" align='center'>
</div>
js:*
new Clappr.Player({
// this is an example url - for this to work you'll need to generate fresh token
source: 'http://localhost:8080/hls/cam06.m3u8',
parentId: '#player',
autoPlay:true,
});
Hope someone can help me, I'm a bit desperated
For Video.js, add the
playsinline
attribute to the video element.