1

I'm streaming a .m3u8 with the latest hls.js 1.0.0 (not rc) but version of 2021-04-01...

example : the stream began at 5pm, and now it's 5:15 pm...

the stream start at live point in almost all browsers

The pattern I see here : ALL browsers in android (tested in Android 10) won't start at live point, only at 0...

I did all the tests

• Safari desktop => stream live at 5:15

• Safari mobile => stream live at 5:15

• WebView (Android) => ••• ISSUE : the player starts the stream at 0 (5pm)

• WKWebView (apple IOS iphone,ipad) => stream live at 5:15

• Chrome Desktop (mac/win) => stream live at 5:15

• Chrome MOBILE (Android) => ••• ISSUE : the player starts the stream at 0 (5pm)

• Chrome MOBILE (iPhone) => stream live at 5:15

• Microsoft EDGE Desktop => stream live at 5:15

• Microsoft EDGE mobile (android) => ••• ISSUE : the player starts the stream at 0 (5pm)

• Firefox Desktop (mac/win) => stream live at 5:15

• Opera Desktop (mac/win) => stream live at 5:15

• Opera Mini (iPhone) => stream live at 5:15

• Opera Mini (android) => ••• ISSUE : the player starts the stream at 0 (5pm)

• Brave Desktop (mac/win) => stream live at 5:15

• Brave Mobile (iPhone) => stream live at 5:15

• Brave Mobile (android) => ••• ISSUE : the player starts the stream at 0 (5pm)

This code

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <center><video width="90%" height="600" id="video" controls="" src="" playsinline="true" preload="metadata" ></video></center>
    <script>
      var video = document.getElementById("video");
      var videoSrc = "https://www.example1.com/streaming/index.m3u8";
      if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = videoSrc;
      } else if (Hls.isSupported()) {
         var config = {
            autoStartLoad: true,
            startPosition: -1,
            debug: false,
            capLevelOnFPSDrop: false,
            capLevelToPlayerSize: false,
            defaultAudioCodec: undefined,
            initialLiveManifestSize: 1,
            maxBufferLength: 30,
            maxMaxBufferLength: 500,
            backBufferLength: Infinity,
            maxBufferSize: 60 * 1000 * 1000,
            maxBufferHole: 0.5,
            highBufferWatchdogPeriod: 2,
            nudgeOffset: 0.1,
            nudgeMaxRetry: 3,
            maxFragLookUpTolerance: 0.25,
            liveSyncDurationCount: 3,
            liveMaxLatencyDurationCount: Infinity,
            liveDurationInfinity: false,
            enableWorker: true,
            enableSoftwareAES: true,
            manifestLoadingTimeOut: 10000,
            manifestLoadingMaxRetry: 1,
            manifestLoadingRetryDelay: 1000,
            manifestLoadingMaxRetryTimeout: 64000,
            startLevel: undefined,
            levelLoadingTimeOut: 10000,
            levelLoadingMaxRetry: 4,
            levelLoadingRetryDelay: 1000,
            levelLoadingMaxRetryTimeout: 64000,
            fragLoadingTimeOut: 20000,
            fragLoadingMaxRetry: 6,
            fragLoadingRetryDelay: 1000,
            fragLoadingMaxRetryTimeout: 64000,
            startFragPrefetch: false,
            testBandwidth: true,
            progressive: false,
            lowLatencyMode: true,
            fpsDroppedMonitoringPeriod: 5000,
            fpsDroppedMonitoringThreshold: 0.2,
            appendErrorMaxRetry: 3,
            enableWebVTT: true,
            enableIMSC1: true,
            enableCEA708Captions: true,
            stretchShortVideoTrack: false,
            maxAudioFramesDrift: 1,
            forceKeyFrameOnDiscontinuity: true,
            abrEwmaFastLive: 3.0,
            abrEwmaSlowLive: 9.0,
            abrEwmaFastVoD: 3.0,
            abrEwmaSlowVoD: 9.0,
            abrEwmaDefaultEstimate: 500000,
            abrBandWidthFactor: 0.95,
            abrBandWidthUpFactor: 0.7,
            abrMaxWithRealBitrate: false,
            maxStarvationDelay: 4,
            maxLoadingDelay: 4,
            minAutoBitrate: 0,
            emeEnabled: false
        };
        var hls = new Hls(config);
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
      }   
      video.addEventListener("loadedmetadata", function(){ video.muted = true; video.play(); }, false);
    </script>

// here I added video.muted = true; video.play(); to auto start, if I try to autoplay unmuted, many browsers refuse this command...

// playsinline="true" is NEEDED for safari

••••••• THE FFMPEG COMMAND (working : it allows me to have 3 to 4 seconds delay ••••••

ffmpeg -re -i input.x -c:a aac -c:v libx264 
-movflags +dash -preset ultrafast 
-crf 28 -refs 4 -qmin 4 -pix_fmt yuv420p 
-tune zerolatency -c:a aac -ac 2 -profile:v main 
-flags -global_header -bufsize 969k 
-hls_time 1 -hls_list_size 0 -g 30 
-start_number 0 -streaming 1 -hls_playlist 1 
-lhls 1 -hls_playlist_type event -f hls path_to_index.m3u8

•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

How can this be fixed ?

How can I make play at live point on load in android MOBILE ?

kefren
  • 1,042
  • 7
  • 12
Jintor
  • 607
  • 8
  • 32

1 Answers1

0

I tried video.currentTime = ( parseFloat(video.duration) - 1 ); this and it's working ;)

the video tag

<video width="90%" height="600" id="video" 
controls="" src="" playsinline="true" preload="metadata" ></video>

and the script

<script>
    video = document.getElementById("video");
    
    //the regular HLS portion loadSource attachMedia...
    
    video.addEventListener("loadedmetadata", function({
        video.muted = true;
        setTimeout(function(){ 
            video.currentTime = ( parseFloat(video.duration) - 1 );video.play(); 
        }, 1169);
    }, false);
    
<script>

preload="metadata" in the video tag is important because video.addEventListener("loadedmetadata" does the magic...

Jintor
  • 607
  • 8
  • 32