Video doesn't playback in Edge

[daveisfera]

Description

The video plays on Chrome, Firefox and Safari, but doesn't play on Edge

Reduced test case

https://videojs.github.io/videojs-contrib-hls/

Steps to reproduce

1. Load Video.js test page
2. Add URL with video
3. Observe error in Edge

Errors

VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) The media playback was aborted due to a corruption problem or because the media used features your browser did not support. 

What version of Video.js are you using?

7.20.3

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

106.0.1370.52

What OS(es) and version(s) does this occur with?

Windows 10 Home 19044.2130

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

That site is using a legacy version of the playback engine and has not been updated in years. The updated version is available on https://videojs-http-streaming.netlify.app/.

[daveisfera]

I just tried that version and got the same error but it appears that it's providing a bit more detail:

VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) The media playback was aborted due to a corruption problem or because the media used features your browser did not support. MediaError {code: 3, message: 'The media playback was aborted due to a corruption…media used features your browser did not support.'}
(anonymous) @ video.core.js:212
log.error @ video.core.js:400
error @ video.core.js:28686
handleTechError_ @ video.core.js:26777
(anonymous) @ video.core.js:25776
data.dispatcher @ video.core.js:2323
error (async)
on @ video.core.js:2343
listen @ video.core.js:3133
on @ video.core.js:3183
listen @ video.core.js:3135
on @ video.core.js:3183
loadTech_ @ video.core.js:25775
MediaLoader @ video.core.js:13007
addChild @ video.core.js:4456
handleAdd @ video.core.js:4588
initChildren @ video.core.js:4637
Player @ video.core.js:25025
videojs @ video.core.js:30910
(anonymous) @ index.js:558
checkDone @ index.js:231
script.onload @ index.js:247
load (async)
(anonymous) @ index.js:245
reloadScripts @ index.js:235
(anonymous) @ index.js:546
window.startDemo @ index.js:731
(anonymous) @ ?debug=false&autoplay=false&muted=false&fluid=false&minified=false&sync-workers=false&liveui=true&llhls=false&url=https%3A%2F%2Fd2zihajmogu5jn.cloudfront.net%2Fbipbop-advanced%2Fbipbop_16x9_variant.m3u8&type=application%2Fx-mpegurl&keysystems=&buffer-water=false&exact-manifest-timings=false&pixel-diff-selector=false&network-info=false&dts-offset=false&override-native=true&preload=auto&mirror-source=true:251
video.core.js:212
VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) video append of 721230b failed for segment #0 in playlist 0-getHLSMediaPlaylist.m3u8?SessionToken=CiADfGgPY6WDWxdgXqVI3RIV0h7J9RcIE_zCb_TYHiNUYRIQtZAlANfpeoZhlfk0rzFX4hoZ1LtbW2PXb2rkoG7XqyUCbm4nzls1b9epFSIgSSfMv7-VD0QmWzSqufIpWMZDSuOTv5s3Rj4Bk1m1_48~&TrackNumber=1

[ghost]

@daveisfera What format are you using mpegts or fmp4, besides, what codec is in use here? How do you package the stream? I can confirm that h264/h265 is working with fragmented mp4

[daveisfera]

It's mpegts and the issue happens with both H.264 and H.265. I just tested on a different Windows laptop and it played, so is this something specific with Windows or the decoder on Windows? If so, anything I can do to help diagnose the problem there?

[ghost]

@daveisfera If you are using HEVC, not matter if it comes with or without HDR metadata, or is in 4K or whatsoever, you need to use fmp4, not mpegts, You are enforced to, there is no way around it! mpegts is quite old and fragmented mp4 is the successor of it. Besides, there is no benefit of choosing mpegts over fmp4. If you are having issue also with h264, please show me your ffmpeg encode command. Without the master.m3u8 which references all the tracks of your stream, your encoding command must look something like in this example for x265 with HDR metadata for a single video track of your stream: /usr/bin/ffmpeg -i "/tmp/VODProcessing/testclip.mp4" -map 0:0 -c:v libx265 -b:v 6291456 -maxrate:v 6606028 -bufsize 25165824 -vf zscale=width=3840:height=1600 -x265-params "hdr-opt=1:repeat-headers=1:colorprim=bt2020:transfer=smpte2084:colormatrix=bt2020nc:master-display=G(13250,34500)B(7500,3000)R(34000,16000)WP(15635,16450)L(40000000,50):max-cll=368,226" -pix_fmt yuv420p10le -profile:v main10 -bf 0 -crf 16 -preset fast -keyint_min 48 -g 48 -use_timeline 1 -use_template 1 -seg_duration 6 -tune fastdecode -vtag hvc1 -map_metadata -1 -map_chapters -1 -f hls -hls_time 6 -streaming 1 -hls_list_size 0 -hls_segment_filename "/tmp/VODProcessing/output/testclip/v-hevc-2160p-hvc1.2.4.L150.B0/f-%04d.m4s" -hls_fmp4_init_filename "init-v-hevc-2160p-hvc1.2.4.L150.B0.m4s" -hls_segment_type fmp4 -movflags frag_every_frame+delay_moov+skip_trailer+faststart -hls_flags independent_segments "/tmp/VODProcessing/output/testclip/v-hevc-2160p-hvc1.2.4.L150.B0/master.m3u8"

If you are also interested how to remap HDR metadata, checkout this: https://pastebin.com/AZdKbPEL

[daveisfera]

I think that I misspoke and it is fragmented mp4. The video is from a handheld camera and then transcoded using the following command:

ffmpeg -i <filename> -preset veryfast -crf 28 -vcodec libx264 -force_key_frames source -bf 0 -acodec copy -f flv -flvflags no_duration_filesize

Here's a link to the initial fragment and then the first media fragment: https://drive.google.com/file/d/1av35-I8xEmjQEn8_ciyrLYsAYB31f-Bx/view?usp=sharing https://drive.google.com/file/d/1DVpEw3EzMD4Gec_0vuv5A9pKa03cs1aO/view?usp=sharing

[daveisfera]

I'm now generating/processing video in a different way so this is no longer an issue