Как да вградите HTML5 видео плейър на вашия уебсайт, като използвате HLS и DASH адаптивно поточно предаване

Flash Player на Adobe отдавна се използва като основен видео плейър за интернет. Той царува дълго време, но се заменя с протоколи, които са по-бързи, ефективни и улесняват управлението на файлове. Google Chrome също започна да блокира Flash и скоро ще прекрати изцяло своята поддръжка за Adobe Flash. Може да отнеме известно време, за да замести напълно този наследствен протокол, но със сигурност носи своите предимства. Някои от по-новите браузъри имат вградени поддръжки за HLS (HTTP Live Streaming).



HTML5 и HLS са протоколи с отворен код, което означава, че всеки може да модифицира своя код и да ги използва на своя уебсайт, напълно безплатно. Кодирането на видеоклип в множество различни стандарти за качество на възпроизвеждане, затворените надписи и оптимизирането на качеството на видеоклипа според честотната лента са направени безпроблемно с HLS видео стрийминг. Поради родния HTML tag, HTML5 стриймингът се предлага в кода, което прави лесно поточно предаване през HLS и DASH. DASH и HLS разбиват видео потока на малки сегменти, които могат да се използват за HTML5 видео плейър. Те намаляват времето, през което трябва да буферирате видеоклип, преди да започне възпроизвеждането, и всички проблеми със заекване, които може да срещнете при гледане на поток. Предимствата не са ограничени само до зрителя, но се разпростират и върху доставчика на съдържание.

Вградете HTML5 видео плейър на вашия уебсайт с помощта на JWPlayer

Преди да започнем, предлагаме да вземете JWPlayer от тук . С нарастването на HLS и DASH, използвани за целите на адаптивното стрийминг, се появиха много видеоплейъри, които със сигурност осигуряват на потребителите техния справедлив дял от предимствата. Един такъв плейър, който издържа на предизвикателствата от време на време и се използва от подобни на ESPN и Sony Pictures, е JWPlayer. Качването на съдържание, вграждането на видеоплейъра в HTML5, iOS, Android и Fire OS се улеснява с родния код на JWPlayer, който може да бъде пригоден от вас за още по-добро потребителско изживяване. Но нашият фокус днес е върху HTML5 видео плейърите и как можете да използвате HLS и DASH за по-добро адаптивно стрийминг.



Какво предлага JW Player?

Заедно с предоставянето на платформа за качване на вашите видеоклипове и превръщането им в плейлист, JWPlayer ви позволява и да преглеждате статистиката в реално време за качените си видеоклипове, като ви предоставя отчети за вашите рекламни графици и персонализирани отчети.



Персонализирани отчети



JWPlayer прави управлението на съдържанието лесно и за вашия уебсайт, задвижван с CMS, като ви позволява лесно да управлявате надписи, миниатюри, метаданни и т.н. Следователно, използването и предимствата на JWPlayer се простират отвъд просто да бъде видео плейър за вграждане на вашите HTML5 видеоклипове.

Качване на видеоклипове в JWPlayer

Качете видеоклипове

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



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

Персонализиране на HLS и DASH видео плейър

Преди да вградите видеоплейър, първо трябва да добавите библиотека с плейъри към вашия сайт. Има три начина, чрез които можете да постигнете този подвиг. Самостоятелно хоствано, хоствано в облак и в облак с API повиквания. Разликата между облачния хостинг и облачния хостинг с API повиквания е просто въз основа на API повиквания. Разработчиците, които искат да управляват изпълнението на своя видеоплейър чрез API повиквания, се препоръчват да използват това. За самостоятелни домакини версията на плейъра се контролира изцяло от вас. Важно е да се отбележи, че лицензът на играча не се завърта автоматично и трябва да се извършва ръчно, когато се използва самостоятелно хост.

Персонализиране на хоствания в облака плейър

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

След като свалите всичко това, трябва да качите кода на библиотеката на хоствания в облак в уеб страницата си етикет, за да позволите на JWPlayer да бъде зареден на вашия уебсайт.

Вграждане на видеоплейъра

По подразбиране JWPlayer автоматично предпочита HTML5 медийни двигатели, така че не е нужно да се притеснявате за задаване на основно предпочитание. Някои случаи обаче могат да ви накарат да промените това. Когато това се случи, можете да персонализирате плейъра и да го настроите по ваш начин.

След като качите библиотеката на хоствания в облак плейър върху маркера на вашата уеб страница, следващата стъпка е да качите вградения код. Първо създайте a етикет в където трябва да се появи JWPlayer. Обадете се на настройвам() със свойството на плейлиста да извика плейъра в целевия .

По-долу е даден пример за проба настройвам() код, предоставен от самите разработчици на JWPlayer:

jwplayer ('myElement'). setup ({'playlist': 'https://example.com/myVideo.mp4