Search code examples
javascriptiosvideo.jsclappr

Videojs and clappr livestream always open on livestream, how to disable?


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


Solution

  • For Video.js, add the playsinline attribute to the video element.