Рестартира ли завъртането на телефона HLS плейъра? Проверка на размера, цял екран и повторно създаване

Разграничете нормалната промяна на мобилния изглед от реално презареждане на HLS и възстановявайте безопасно състоянието само когато плейърът действително трябва да се създаде отново.

Редакционен екип на M3U8Online

28 септември 2026 г.

Ако HLS видеото спре, прескочи или започне да зарежда отново, когато завъртите телефона, самото завъртане не е достатъчно, за да се установи причината. Адаптивното оформление може просто да е променило размерите; приложението може да е заменило видеоелемента; влизането в режим на цял екран може да е предизвикало отделна промяна на състоянието; възможно е и страницата наистина да е заредила източника отново.

Първо установете кое събитие е настъпило. Сравнявайте портретен и пейзажен изглед със същия разрешен поток, версия на плейъра, браузър, позиция на възпроизвеждане и мрежа. Не правете извод за дефект в мобилния браузър от едно завъртане и не възстановявайте сляпо запазена времева позиция при предаване на живо.

Метод за проверка — 28 септември 2026 г.: Прегледахме актуалната документация на MDN за Screen Orientation API, медийната заявка за ориентация на изгледа, HTMLMediaElement.currentTime, play() и цял екран. Изпълнихме и детерминирана Node.js тестова фикстура със синтетични случаи за преоразмеряване, повторно монтиране и възстановяване на състояние. Това е преглед на документация и логика на фикстурата: не е тестван физически телефон, мобилен HLS енджин или реален поток. Фикстурата е scripts/test-hls-orientation-fixture.cjs.

Разграничете промяната в оформлението от рестартиране на плейъра

Тези сигнали насочват към различни слоеве:

Наблюдение	Възможно значение	Какво да проверите след това
Размерите на плейъра се променят, но медийното време продължава	Адаптивно оформление или размер на видеото	CSS/оформлението и обработката на преоразмеряването
Задейства се събитие `change` на `screen.orientation`	Браузърът отчита промяна на ориентацията	Проверете дали обработчикът променя и състоянието на плейъра
Видеоелементът или ID на инстанцията на плейъра се променя	Рамката или приложението е монтирало плейъра повторно	Ключове на компонентите, условно рендиране, състояние на маршрута
Започва нова заявка за манифеста и времето се връща почти до нула	Източникът е зареден отново или плейърът е настроен наново	Присвояване на `src`, извиквания на `load()`, зависимости на ефектите
Възпроизвеждането спира без нова заявка за манифеста	Политика за пауза, видимост, поведение на браузъра или действие на потребителя	Запишете `paused`, видимостта, цял екран и медийните събития

CSS медийният признак orientation описва формата на изгледа; той не доказва, че конкретно физическо събитие от сензора е рестартирало възпроизвеждането. Когато наистина е нужно известие за ориентацията в JavaScript, предпочитайте събитието change на Screen Orientation API пред остарялото orientationchange. Обикновено не е нужно да създавате видеоелемента отново само за да преоразмерите контейнера.

Инструментирайте плейъра, преди да променяте кода

За кратък разрешен тест запишете последователност с времеви отметки:

screen.orientation.type и ширината/височината на изгледа, ако се поддържат.
Стабилен ID на инстанцията на плейъра и дали реалният възел <video> се е сменил.
currentSrc или редактиран идентификатор на източника, currentTime, paused, readyState и networkState.
Събитията resize, visibilitychange, fullscreenchange, pause, playing, waiting, emptied, loadstart и loadedmetadata.
Дали е започнала нова заявка за манифест или медия. Записвайте само редактирана категория на хоста/пътя; никога не пазете подписани параметри в URL, бисквитки или заглавки за упълномощаване.

Направете моментна снимка непосредствено преди завъртането и друга след стабилизиране на оформлението. Ако видеоелементът и източникът са същите и не започне нова последователност на зареждане, проверете оформлението или буферирането, преди да обвините презареждане на плейъра. Ако възелът се е сменил, намерете клона на визуализирането, който го е заменил. Ако източникът е бил зададен отново, проследете този път в кода.

Тествайте отделно завъртането, цял екран и презареждането

Използвайте малка матрица, вместо да завъртате многократно и да гадаете:

Тест	Променяйте само	Сравнете доказателствата
От портретен към пейзажен изглед по време на възпроизвеждане	Ориентацията на изгледа/устройството	ID на възела, медийно време, нови заявки, състояние на пауза
От пейзажен към портретен изглед, докато е на пауза	Ориентацията при запазено намерение за пауза	Дали плейърът неочаквано започва или търси позиция
Влизане и излизане от цял екран без завъртане	Състоянието на цял екран	Promise/събитие за цял екран и непрекъснатост на източника
Преоразмеряване на прозорец на настолен браузър	Размерите на оформлението	Дали приложението реагира различно от мобилно устройство
Изрично презареждане на страницата	Жизнения цикъл на документа	Очаквана нова инстанция и нова заявка за източника

Не представяйте емулатор или изглед на настолен браузър като тест на физическо устройство. Ако проблемът е ограничен до комбинация телефон/браузър, до която нямате достъп, посочете я като проверена по документация или неизпитана и поискайте версия на браузъра, версия на ОС, клас устройство и редактиран запис на събитията.

Запазете медийния елемент, когато е възможно

Позволете на CSS да преоразмери обвивката на плейъра, като запазите същия медиен елемент и HLS инстанция. Избягвайте стойност на ключ на компонент или условен клон, зависещ от ориентацията и принуждаващ демонтиране на компонента. Не създавайте плейъра наново при всяко resize, освен ако документирано ограничение на енджина не го изисква.

Ако разглобяването на плейъра е неизбежно, запазете само състояние, което може безопасно да се възстанови: идентичност на източника, дали е бил на пауза, предпочитания за аудио/качество при поддръжка и последното наблюдавано медийно време. Прикачете източника отново, изчакайте метаданните и наличните диапазони за търсене, след което валидирайте целта, преди да търсите позиция. currentTime е позиция за търсене, а не трайна идентичност на живо съдържание: DVR прозорецът може да се премести или изтече, докато плейърът се създава отново. Ограничете целта до актуален наличен диапазон или се върнете към живия край според очакваното поведение на продукта.

Извикайте play() само когато предишното състояние и поведението на продукта оправдават продължаване. Promise може да бъде отхвърлен, затова обработете отказа и оставете достъпен бутон за възпроизвеждане. Влизането в цял екран също е асинхронно и може да бъде отказано; актуализирайте интерфейса според действителното събитие за цял екран, вместо да приемате, че заявката е успяла.

Често срещани грешки

Създаване на плейъра наново при всяко resize: завъртането и лентите на браузъра могат да генерират промени в оформлението без нужда от презареждане на източника.
Използване на променящ се ключ на компонент: ключ, обвързан с ширината/ориентацията, може умишлено да подмени поддървото с видеото.
Слушане само за старото събитие за ориентация: използвайте Screen Orientation API, когато е наличен, и предвидете резервен вариант, ако данните за ориентацията не са нужни.
Безусловно търсене на запазено време в жив поток: текущият прозорец може вече да не съдържа тази позиция.
Извикване на play() без обработка на promise: жестът на потребителя или политиката на браузъра може да попречи на автоматичното продължаване.
Приемане, че цял екран е причинил завъртането: тествайте влизането/излизането от цял екран отделно.
Споделяне на пълни логове на заявките: параметрите в URL и заглавките може да съдържат данни за достъп; редактирайте ги преди споделяне.

Кратък доклад за дефект

Посочете устройство и ОС, браузър/версия, версия на плейъра/енджа, тип поток (VOD или живо/DVR), начално състояние на възпроизвеждането и точната последователност на теста. Включете дали възелът на видеото или инстанцията на плейъра се е сменила, дали е започнала нова заявка за манифеста и дали currentTime, paused или диапазоните за търсене са се променили. Редактирайте URL на потока, ключове, токени, бисквитки и частни имена на хостове. Ясно обозначете, ако поведението е проверено само по документация, а не е възпроизведено на посоченото устройство.

За свързани проверки вижте ръководството за HLS на мобилни устройства, възпроизвеждане след оставяне на приложението във фон или заключване на екрана и диагностиката за блокирано автоматично възпроизвеждане.

Основни източници

Важното разграничение не е „портретен срещу пейзажен изглед“, а „променило се е оформлението срещу променил се е жизненият цикъл на плейъра/източника“. Първо установете тази граница и едва след това решавайте дали е нужно възстановяване на състоянието на възпроизвеждане.