Hls.js: play back stream start with black screen

[klouskingsley]

What version of Hls.js are you using?

v0.11.0

What browser and OS are you using?

windows 10 chrome 70.0.3538.110 (Official Build) (64-bit)

Test stream:

test page: https://hls-js.netlify.com/demo/?src=https%3A%2F%2Fvod.mudu.tv%2Fwatch%2F2018-11-30%2Fxyo11j.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsImVuYWJsZVdvcmtlciI6dHJ1ZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xLCJ3aWRldmluZUxpY2Vuc2VVcmwiOiIifQ==

Checklist

• [x] The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• [x] The issue occurs in the stable client on https://video-dev.github.io/hls.js/stable/demo and not just on my page
  
• [x] The issue occurs in the latest client on https://video-dev.github.io/hls.js/latest/demo and not just on my page
  
• [x] The stream has correct Access-Control-Allow-Origin headers (CORS)
• [x] There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

go to the demo page and play it

Expected behavior

plays fine just like ffplay or flashls

Actual behavior

black screen

Console output

Using Hls.js config: {debug: true, enableWorker: true, defaultAudioCodec: undefined, widevineLicenseUrl: ""}
hls.js@latest:1 [log] > loadSource:https://vod.mudu.tv/watch/2018-11-30/xyo11j.m3u8
hls.js@latest:1 [log] > trigger BUFFER_RESET
hls.js@latest:1 [log] > set autoLevelCapping:-1
hls.js@latest:1 [log] > attachMedia
common.js:6 https:
hls.js@latest:1 [log] > manifest loaded,1 level(s) found, first bitrate:undefined
hls.js@latest:1 [log] > startLoad(-1)
hls.js@latest:1 [log] > switching to level 0
hls.js@latest:1 [log] > main stream:STOPPED->IDLE
hls.js@latest:1 [log] > audio tracks updated
hls.js@latest:1 [log] > subtitle tracks updated
hls.js@latest:1 [log] > level 0 loaded [1,66],duration:2071.3820000000005
hls.js@latest:1 [log] > media source opened
hls.js@latest:1 [log] > startLoad(-1)
hls.js@latest:1 [log] > main stream:IDLE->STOPPED
hls.js@latest:1 [log] > main stream:STOPPED->IDLE
hls.js@latest:1 [log] > Loading 1 of [1 ,66],level 0, currentTime:-1.000,bufferEnd:-1.000
hls.js@latest:1 [log] > demuxing in webworker
hls.js@latest:1 [log] > main stream:IDLE->FRAG_LOADING
hls.js@latest:1 [log] > audio stream:STOPPED->STARTING
hls.js@latest:1 [log] > audio stream:STARTING->WAITING_TRACK
hls.js@latest:1 [log] > audio stream:WAITING_TRACK->STOPPED
hls.js@latest:1 [log] > audio stream:STOPPED->STARTING
hls.js@latest:1 [log] > audio stream:STARTING->WAITING_TRACK
hls.js@latest:1 [log] > Loaded 1 of [1 ,66],level 0
hls.js@latest:1 [log] > Parsing 1 of [1 ,66],level 0, cc 0
hls.js@latest:1 [log] > main stream:FRAG_LOADING->PARSING
hls.js@latest:1 [log] > main:discontinuity detected
hls.js@latest:1 [log] > main:switch detected
blob:https://video-dev.github.io/c69d9cac-d62b-4813-96bc-13863b889105:1 [log] > manifest codec:undefined,ADTS data:type:2,sampleingIndex:3[48000Hz],channelConfig:2
blob:https://video-dev.github.io/c69d9cac-d62b-4813-96bc-13863b889105:1 [log] > parsed codec:mp4a.40.5,rate:48000,nb channel:2
blob:https://video-dev.github.io/c69d9cac-d62b-4813-96bc-13863b889105:1 [log] > audio sampling rate : 48000
hls.js@latest:1 [log] > creating sourceBuffer(audio/mp4;codecs=mp4a.40.5)
hls.js@latest:1 [log] > main track:audio,container:audio/mp4,codecs[level/parsed]=[undefined/mp4a.40.5]
hls.js@latest:1 [log] > Parsed audio,PTS:[0.000,3.563],DTS:[0.000/3.563],nb:167,dropped:0
hls.js@latest:1 [log] > main stream:PARSING->PARSED
hls.js@latest:1 [log] > main buffered : [0.000,3.563]
hls.js@latest:1 [log] > latency/loading/parsing/append/kbps:19/1/170/13/2541
hls.js@latest:1 [log] > main stream:PARSED->IDLE
hls.js@latest:1 [log] > Loading 2 of [1 ,66],level 0, currentTime:3.542,bufferEnd:3.563
hls.js@latest:1 [log] > main stream:IDLE->FRAG_LOADING
hls.js@latest:1 [log] > target start position not buffered, seek to buffered.start(0) -1 from current time 0
hls.js@latest:1 [log] > Updating Media Source duration to 2071.382
hls.js@latest:1 [log] > media seeking to 0.000
hls.js@latest:1 [log] > media seeked to 0.000
hls.js@latest:1 [log] > Loaded 2 of [1 ,66],level 0
hls.js@latest:1 [log] > Parsing 2 of [1 ,66],level 0, cc 1
hls.js@latest:1 [log] > main stream:FRAG_LOADING->PARSING
hls.js@latest:1 [log] > main:discontinuity detected
blob:https://video-dev.github.io/c69d9cac-d62b-4813-96bc-13863b889105:1 [log] > manifest codec:undefined,ADTS data:type:2,sampleingIndex:3[48000Hz],channelConfig:2
blob:https://video-dev.github.io/c69d9cac-d62b-4813-96bc-13863b889105:1 [log] > parsed codec:mp4a.40.5,rate:48000,nb channel:2
blob:https://video-dev.github.io/c69d9cac-d62b-4813-96bc-13863b889105:1 [log] > audio sampling rate : 48000
hls.js@latest:1 [log] > InitPTS for cc: 1 found from video track: 158610
hls.js@latest:1 [log] > main track:audio,container:audio/mp4,codecs[level/parsed]=[undefined/mp4a.40.5]
hls.js@latest:1 [log] > main track:video,container:video/mp4,codecs[level/parsed]=[undefined/avc1.640028]
hls.js@latest:1 [log] > Parsed audio,PTS:[3.563,35.520],DTS:[3.563/35.520],nb:1498,dropped:0
hls.js@latest:1 [log] > Parsed video,PTS:[3.643,35.603],DTS:[3.563/35.563],nb:800,dropped:0
hls.js@latest:1 [log] > main stream:PARSING->PARSED
hls.js@latest:1 [log] > main buffered : [0.000,35.520]
hls.js@latest:1 [log] > latency/loading/parsing/append/kbps:45/380/144/1/75443
hls.js@latest:1 [log] > main stream:PARSED->IDLE
?src=https%3A%2F%2Fvod.mudu.tv%2Fwatch%2F2018-11-30%2Fxyo11j.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsImVuYWJsZVdvcmtlciI6dHJ1ZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xLCJ3aWRldmluZUxpY2Vuc2VVcmwiOiIifQ==:1 Refused to apply style from 'https://cdn.jsdelivr.net/npm/hls.js@canary/dist/skin/layer.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
hls.js@latest:1 [log] > Loading 3 of [1 ,66],level 0, currentTime:5.549,bufferEnd:35.520
hls.js@latest:1 [log] > main stream:IDLE->FRAG_LOADING
hls.js@latest:1 [log] > Loaded 3 of [1 ,66],level 0
hls.js@latest:1 [log] > Parsing 3 of [1 ,66],level 0, cc 1
hls.js@latest:1 [log] > main stream:FRAG_LOADING->PARSING
hls.js@latest:1 [log] > Parsed audio,PTS:[35.520,66.539],DTS:[35.520/66.539],nb:1454,dropped:0
hls.js@latest:1 [log] > Parsed video,PTS:[35.643,66.643],DTS:[35.563/66.563],nb:775,dropped:0
hls.js@latest:1 [log] > main stream:PARSING->PARSED
hls.js@latest:1 [log] > main buffered : [0.000,66.539]
hls.js@latest:1 [log] > latency/loading/parsing/append/kbps:13/45/119/0/221454
hls.js@latest:1 [log] > main stream:PARSED->IDLE

[playvici]

Also having this issue...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[michaelcunningham19]

I tested this out in Chrome on macOS - I'm seeing the same thing, I used ffprobe to verify the video codec used isn't unsupported, and when compared to say, a segment from Big Buck Bunny, the video codec is the same, with a few minor differences, see below:

Segment from this problem stream:

Input #0, mpegts, from '/Users/mcunningham/Downloads/4.ts':
  Duration: 00:00:30.90, start: 68.301000, bitrate: 1299 kb/s
  Program 1
    Metadata:
      service_name    : Service01
      service_provider: FFmpeg
    Stream #0:0[0x100]: Video: h264 (High) ([27][0][0][0] / 0x001B), yuv420p(progressive), 1920x1080 [SAR 1:1 DAR 16:9], 25 fps, 25 tbr, 90k tbn, 50 tbc
    Stream #0:1[0x101]: Audio: aac (LC) ([15][0][0][0] / 0x000F), 48000 Hz, stereo, fltp, 153 kb/s

And Big Buck Bunny:

Input #0, mpegts, from '/Users/mcunningham/Downloads/193039199_mp4_h264_aac_fhd_7.ts':
  Duration: 00:00:10.03, start: 30.002489, bitrate: 5189 kb/s
  Program 1
    Metadata:
      service_name    : lumberjack
      service_provider: lumberjack
    Stream #0:0[0x101]: Audio: aac (LC) ([15][0][0][0] / 0x000F), 44100 Hz, stereo, fltp, 145 kb/s
    Stream #0:1[0x102]: Video: h264 (High) ([27][0][0][0] / 0x001B), yuv420p(progressive), 1920x1080 [SAR 1:1 DAR 16:9], 60 fps, 60 tbr, 90k tbn, 120 tbc

No warnings are emitted from the console and nothing notable is logged in media-internals

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[itsjamie]

Marking as confirmed to prevent stalebot from closing.

[robwalch]

Updated test page to https://hls-js.netlify.com/demo/?src=https%3A%2F%2Fvod.mudu.tv%2Fwatch%2F2018-11-30%2Fxyo11j.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsImVuYWJsZVdvcmtlciI6dHJ1ZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xLCJ3aWRldmluZUxpY2Vuc2VVcmwiOiIifQ==

[robwalch]

hls.js only buffers audio. The stream does not start in feature/v1.0.0

[ahummel25]

I'm having the same issue where my m3u8 playlist only has audio but a black screen. Audio comes thru fine. Any solution here?

[robwalch]

Make sure that your parent manifest includes the audio and video codecs found in your playlists, and that each segment in the stream contains both elementary tracks (audio and video). The sample in this case start with a segment that only contains audio and there are no codecs listed in the parent manifest.

https://vod.mudu.tv/watch/2018-11-30/xyo11j.m3u8 is a playlist so the player has no hint about which codecs are available. The first segment contains only audio so the source buffers are initialized for audio-only.

[manojkumar3692]

@robwalch Is there any way to check audio and video .. because i always get black screen but audio available for a live stream . Can you drop a example to check here

[robwalch]

Hi @manojkumar3692,

See https://developer.apple.com/documentation/http_live_streaming/hls_authoring_specification_for_apple_devices for details on specifying the CODECS attribute in your manifest. Here's an example:

#EXTM3U

#EXT-X-STREAM-INF:BANDWIDTH=240000,RESOLUTION=320x180,CODECS="mp4a.40.2,avc1.4d401f"
https://do.main/playlist.m3u8

Attributes of the #EXT-X-STREAM-INF tag are available on each level in hlsjs.levels. In this example the levels only have video. Audio is in #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac"

0:
attrs: AttrList
    AUDIO: "aac"
    BANDWIDTH: "1427000"
    CODECS: "avc1.66.30"
    NAME: "Main"
    RESOLUTION: "768x432"
audioGroupIds: ["aac"]
bitrate: 1427000
height: 432
unknownCodecs: []
videoCodec: "avc1.42001e"

If you want to know what was in a segment that was just loaded and parsed, you can get this from the "hlsFragParsed" event. See the API Documentation for listening to events
https://github.com/video-dev/hls.js/blob/master/docs/API.md#
```
{
"frag": {
"_elementaryStreams": {
"audio": true,
"video": false
}
},
})