Как правильно хостить и проигрывать видео в 2020?
Добрый вечер!
Мы недавно реализовали проект фестиваля, на сайте которого можно было посмотреть полнометражные фильмы.
В целом все прошло хорошо, но сейчас очень остро стоит вопрос относительно технологий которые для этого использовались, потому что очень явно ощущается, что что-то пошло не так, а на горизонте уже маячат похожие проекты.
Начитавшись того, как «правильно» должна выглядеть подобная реализация, решили заюзать эпловский HLS.
Конвертнули все видео-дорожки для разного качества при помощи ffmpeg. Разбили все файлы на видео-аудио дорожки при помощи mediafilesegmenter, mediasubtitlesegmenter — создали плейлисты при помощи variantplaylistcreator.
Получили класный master.m3u8 файл плейлиста, где все эти конфиги были красиво описаны.
И вроде бы на клиенте получаем полностью работоспособную систему, которая отлично работает. но не тут то было.
Когда на проект запустили пользователей — массово посыпались жалобы, у кого-то не грузит видео, кто-то ловит ошибки декода (chunk_demuxer_error_append_failed append stream parsing failed) у кого-то видео зависает на каких-то этапах и на отказ перестает грузиться. Это при том, что в первый день онлайн был не более 200 одновременных просмотров, а нагрузка по трафику из доступных 3гб\сек не превышала и 1\3.
Другими словами, пошла какая-то лажа.
Так как делать нужно было что-то срочно, решили от m3u8 файлов отказаться и перейти на отдачу цельных файлов сразу. В конфигах просто прописали ссылки на mp4 файлы, в которых сразу находилось всего одна аудио и видео дорожка. И чудо — все ошибки сразу пропали.
То есть получается, что отдача одним файлом и браузерный декод, вышли намного эффективнее чем то, что мы делали через HLS. ¯\_( ツ)_/¯
Мы посмотрели кучу стриминговых сервисов, большая часть из них отдавала все свои стримы в формате m3u8, и никаких проблем при этом люди не испытывали. Соответственно назрела куча вопросов о том, как таки стоит делать и в чем могла быть ошибка и как это исправить на будущее.
1) Как правильно хостить файлы на сервере? Нужна ли разбивка при помощи HLS\DASH? Где-то видел что эти технологии нужно использовать в паре, так как каждая из них имеет свою браузерную поддержку.
2) Должны ли быть на сервере какие-то специфичные настройки, для эффективной отдачи статического медиа-контента?
3) Медиа-плеер. Возможно, причина ошибок связана с плеером, который использовали на клиенте? Мы использовали https://flowplayer.com/.
Наслышан о таких плеерах, как Movie.js Shaka Player, jwplayer — возможно есть смысл попробовать какой-то из них? Плеер не обязательно бесплатный, просто хочется использовать технологию, которая сможет дать максимальное покрытие. Например, в этом проекте, люди заходили с телевизора, а на tizen flowplayer не работал, от слова совсем.
4) Шифрование\защита файлов. Как по мне отдача чистых mp4 файлов, небезопасна от слова совсем. Понятное дело, что собрать готовый файл с плейлиста, можно одной командой из ffmpeg, но в той реализации которая вышла, достаточно просто открыть дев. тулзы и получить прямую ссылку на файл который можно сохранить себе на пк.
Помогите на будущее делать хорошо 🙂
- Вопрос задан более трёх лет назад
- 2115 просмотров
Saved searches
Use saved searches to filter your results more quickly
Cancel Create saved search
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CHUNK_DEMUXER_ERROR_APPEND_FAILED: Append: stream parsing failed. works in reference client not our app #4070
bknill opened this issue Oct 18, 2022 · 3 comments
CHUNK_DEMUXER_ERROR_APPEND_FAILED: Append: stream parsing failed. works in reference client not our app #4070
bknill opened this issue Oct 18, 2022 · 3 comments
Comments
bknill commented Oct 18, 2022
Environment
- The MPD passes the DASH-IF Conformance Tool on https://conformance.dashif.org/
- The stream has correct Access-Control-Allow-Origin headers (CORS)
- There are no network errors such as 404s in the browser console when trying to play the stream
- The issue observed is not mentioned on https://github.com/Dash-Industry-Forum/dash.js/wiki/FAQ
- [] The issue occurs in the latest reference client on http://reference.dashif.org/dash.js/ and not just on my page
- Link to playable MPD file: https://howio-dev-public.s3.ap-southeast-2.amazonaws.com/bad-video/assets/org/1/folder/191/e3bb3994-b0ec-4ba0-a368-09341ae1084e/cmaf.mpd
- Dash.js version: 4.5.0
- Browser name/version: Chrome 106.0.5249.119
- OS name/version: Window 10
Steps to reproduce
- Please provide clear steps to reproduce your problem
- If the bug is intermittent, give a rough frequency if possible
I’m trying to understand why this video plays in the latest reference client but not in our app.
Debug.js:169 [758][StreamController] Video Element Error: MEDIA_ERR_SRC_NOT_SUPPORTED (CHUNK_DEMUXER_ERROR_APPEND_FAILED: Append: stream parsing failed. Data size=636 append_window_start=0 append_window_end=5.215)
I am lazy loading Dash Player, but other videos are fine.
DashPlayer = dashjs.MediaPlayer().create(); DashPlayer.initialize(videoEl, url, false) The text was updated successfully, but these errors were encountered:
How to fix CHUNK_DEMUXER_ERROR_APPEND_FAILED error when append chunk?
I want to create a video player that can play multiple resolution, so I have to load chunks of different codecs. I tried to append chunk of the same codec and it work. So I tried to use changeType() but when I append the new codec chunk in the video element I found this error «CHUNK_DEMUXER_ERROR_APPEND_FAILED: Append: stream parsing failed.».
const myMediaSource = new MediaSource(); var videoSourceBuffer; var quality=480,qlast=480; var currentSegment = 0; var loading = false; function videos() < myMediaSource.addEventListener('sourceopen', sourceOpen, < once: true>); > function sourceOpen() < setInterval(feedVideo, 500); >function feedVideo() < if (!loading) < try < if (myMediaSource.sourceBuffers.length == 0) < videoSourceBuffer = myMediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001E,mp4a.40.2"'); appendSegment("cinit.mp4", 0); first = true; >else < if (qlast != quality) < videoSourceBuffer = myMediaSource.sourceBuffers[0]; if (quality == 1080) < type = 'video/mp4; codecs="avc1.640028,mp4a.40.2"'; >else if (quality == 720) < type = 'video/mp4; codecs="avc1.64001F,mp4a.40.2"'; >else if (quality == 480) < type = 'video/mp4; codecs="avc1.64001E,mp4a.40.2"'; >else if (quality == 360) < type = 'video/mp4; codecs="avc1.64001E,mp4a.40.2"'; >videoSourceBuffer.changeType(type); videoSourceBuffer.mode = "segments"; qlast = quality; > > if (!first) < appendSegment("c" + currentSegment + ".m4s", currentSegment); >else < first = false; >> catch (error) < console.log('Error! ' + error); >> > function appendSegment(file, resourcesIndex) < loading = true; fetch("http://mysite/video/" + quality + "p/" + file).then(function (response) < return response.arrayBuffer(); >).then(function (videoData) < videoSourceBuffer.appendBuffer(videoData); videoSourceBuffer.addEventListener('updateend', function () < loading = false; >, < once: true >); >); >