Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
#Круги добра
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр Что спрятано в недрах Земли? Ад? Одному Аиду известно. А так же тем, кто пройдёт шахту до конца.

Эпичная Шахта

Мидкорные, Приключения, 3D

Играть

Топ прошлой недели

  • SpongeGod SpongeGod 1 пост
  • Uncleyogurt007 Uncleyogurt007 9 постов
  • ZaTaS ZaTaS 3 поста
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
0 просмотренных постов скрыто
19
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Базовая структура HTML файла⁠⁠

Базовая структура HTML файла HTML, Основы HTML, Html 5, CSS, Css3, Javascript, Frontend, Верстка, IT, Программирование, Программист, Разработка, Баг, Длиннопост

Любой HTML файл начинается с базовой структуры. Обычно она включает в себя теги, которые есть в любом HTML файле.


Пример базовой структуры показан ниже.


Рассмотрим ее подробнее.


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
</body>
</html>

Начнем с тега DOCTYPE

<!DOCTYPE html>

Задача этого тега - указать браузеру стандарт HTML который используется в документе. Этот тег не будет показан на странице, но будет присутствовать в HTML коде страницы. Данный тег должен располагаться перед всем HTML кодом странице, в начале файла.


Так как мы используем последний стандарт HTML, а именно HTML5, то нам нужно использовать именно этот тег.


Вы можете видеть и другие версии этого тега, более объемные, обычно такие теги можно встретить на сайтах сделанных 5 - 10 лет назад. Они указывают браузерам, что используется другой стандарт HTML.

Тег <html>


Тег <html> - парный, очень важный тег, благодаря ему браузер понимает, где начинается контент который нужно обрабатывать как HTML.


<html></html>

Также тег <html> имеет обязательный атрибут lang, в качестве значения мы указываем язык, на котором должна отображаться страница. Эта информация помогает браузеру считывать специфические символы которые могу встречаться в различных языках.


В качестве значения передаем сокращения языков: ru, en и тд.

Тег <head>


<head></head>

Тег <head> - парный тег, нужен для хранения служебной, внутри него возможны различные сочетания тегов, которые будут указывать браузеру: название страницы, описание, ключевые слова. Эта информация называется 'метаинформацией'. Также метаинформация активно используется для продвижения сайта в поисковых системах (Google, Yandex и тд.).


Все что находится внутри тега <head> не будет отображено пользователю.

Тег <meta>


<meta>

Тег <meta> - одиночный тег, имеет много различных атрибутов с помощью которых мы можем указывать различную метаинформацию для нашего сайта. С настройкой тега <meta> вы ближе познакомитесь при разработке своих сайтов.


<meta charset="UTF-8">

В данный момент одним из важных <meta> тегов, является <meta> в котором указывается кодировка сайта. Кодировка помогает правильно интерпретировать текст. Указываем мы ее потому что у разных пользователей в их системе может быть указана разная кодировка, из-за чего контент сайта может выглядеть не так как мы ожидаем.


Самой универсальной кодировкой является UTF-8, ее мы и указываем.

Тег <title>


<title>Заголовок страницы</title>

<title> - парный тег, располагается внутри тега <head>, внутри него указываем текст который будет выводиться во вкладке нашего сайта.

Тег <body>


<body></body>

<body> - парный тег, располагается внутри тега <html>, после закрывающего тега </head>. Этот тег является телом нашей страницы и внутри него мы описываем HTML структуру нашего сайта которую будет видеть пользователь.


Пример конечной структуры в файле index.html.

Показать полностью
[моё] HTML Основы HTML Html 5 CSS Css3 Javascript Frontend Верстка IT Программирование Программист Разработка Баг Длиннопост
36
3
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Начало работы с HTML 5 - Теги⁠⁠

Взглянем ближе на HTML


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, tempora!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, tempora!</p>


Что означает конструкция <p> ?


В языке HTML Такая конструкция называется тег. Ранее мы уже видели несколько тегов <section>, <h1>. Теги оборачивают наш контент и в итоге обрабатываются браузерами.

<div>
<h1>Some title</h1>
</div>

Все рассмотренные нами теги являются парными, так как имеют открывающую и закрывающую часть. В примере выше мы можем видим <h1>Some title</h1>.

<h1> — является открывающей частью тега.

</h1> — является закрывающей частью тега.

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

<hr>  <!-- Вариант 1 -->
<hr />  <!-- Вариант 2 -->
<br>  <!-- Вариант 1 -->
<br />  <!-- Вариант 2 -->

В примере выше явно видно то что кроме парных тегов в HTML есть и одиночные теги, такие теги не имеют закрывающей части. Обычно они используются для создания элементов которые отображают контент другим образом нежели парные теги.

<section>
<h2>Some another title</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
excepturi incidunt maxime odio sint? Commodi cupiditate modi nesciunt
pariatur tempore?
</p>
</section>
Ключевой особенностью тегов является то что мы можем вкладывать их друг в друга, это хорошо видно из примера выше. Таким образом мы можем выстраивать более сложные композиции тегов и создавать более сложные системы.

<ul>
<li>Lorem ipsum.</li>
<li>At, maxime!</li>
<li>Dolores, recusandae.</li>
</ul>

В некоторых случаях вложенность является обязательной частью разметки текста. В примере выше, браузер не сможет интерпретировать теги <li> и их внутренний контент правильным образом, если теги <li> не будут вложены внутрь тега <ul>.
Показать полностью 1
[моё] HTML Html 5 Javascript CSS Frontend Программирование Сайт Интересные сайты Создание сайта Веб-разработка Pikaweb Программист IT Разработка Баг Видео
14
0
pk.delf
3 года назад
Поиск по описанию

Поделитесь фото футболки пожалуйста⁠⁠

Доброго времени суток, уважаемые. Году в 2012 или около того на русскоязычной бирже фриланса был конкурс совместно с мелкомягкими, по завершении которого участникам в офисах Microsoft раздавали футболки с текстом make web not war и символикой html5. Сейчас очень хотелось бы на нее взглянуть, однако моя к сожалению канула в небытие уже лет 8 как. Можно у кого сохранилось? Поделитесь пожалуйста фотографией. Гугл с Яндексом не помог, ну или я не умею их готовить. Спасибо.

[моё] Конкурс Html 5 Фриланс Microsoft Текст Помогите найти
6
NiceMishan4ik
3 года назад

Псевдоклассы enabled, disabled,checked и focus⁠⁠

[моё] HTML Html 5 Css3 Программирование IT Программист Web-программирование Веб-разработка Видео
6
NiceMishan4ik
3 года назад

Video⁠⁠

[моё] HTML Программирование CSS Html 5 Javascript IT Программист Видео
4
NiceMishan4ik
3 года назад
Лига программистов

Video⁠⁠

[моё] Программирование HTML CSS Html 5 Видео
4
NiceMishan4ik
3 года назад

Video⁠⁠

[моё] HTML Html 5 CSS Css3 Javascript Программирование Видео
1
758
sadness90
3 года назад
Лига программистов

Самый простой способ разместить IP-камеру на сайте в 2022 году⁠⁠

В чем главная проблема современных недорогих IP-камер? Вы не можете просто так добавить их на свой сайт! Они выдают видео совсем не в том формате, который понимают браузеры. Да, конечно, можно зайти напрямую на камеру (и часто только с IE), и у многих моделей есть «облако». Но проблема остается — я не могу просто так взять и поместить камеру на сайт, как например, простую картинку!


А хочется чего-то совсем простого, что настраивается в пару кликов и работает почти везде. Вот такую программу я и написал, чем с вами сегодня и поделюсь.

Самый простой способ разместить IP-камеру на сайте в 2022 году IP-камера, Видеонаблюдение, Просто, Трансляция, Стрим, Csharp, Dotnet, Html 5, Длиннопост

Ключевые особенности и преимущества данной программы:


1. Ориентированность на бесперебойность работы. Если процесс трансляции (FFMpeg) неожиданно завершается, то программа это обнаружит и попытается его перезапустить. Плеер на стороне клиента также периодически проверяет, не остановилось ли видео, и если да – попытается это исправить.


2. Максимальная экономия трафика, подходит для 3G/4G. Когда нет активных зрителей, все процессы FFMpeg будут остановлены автоматически – т.е. программа не будет забирать видеопоток с камер. Также предусмотрено кэширование захваченных статических снимков, по умолчанию время хранения в кэше равно одной минуте. В случае одновременных запросов снимка с одной камеры с разных клиентских устройств будет запущен только один процесс FFMpeg.


3. Нетребовательность к «железу». 20-30 камер вполне будут работать на компьютере с 4 ГБ оперативки и средним двухъядерным процессором. Никакого перекодирования видеопотока не происходит.


4. В отличии от моего предыдущего проекта, эта программа способна транслировать видео большему количеству зрителей. Точное число зависит от ширины исходящего интернет-канала сервера.


5. Максимально возможная простота. Один мой друг любит говорить, что «простота хуже воровства». Но только не в сфере ИТ! В современном мире мало у кого есть лишнее время, чтобы разобраться с той или иной программой, а особенно, с «полуфабрикатами». То, что предлагаю я вам – полностью готовое решение с минимумом настроек. Просто пропишите RTSP-ссылки к вашим камерам, задайте пару общих параметров и получите веб-ссылки на камеры! Разве что сертификат SSL вам придется получить самостоятельно (была мысль встроить Let’s Encrypt в программу, но не было времени – может это сделает кто-нибудь из вас).


6. Кроссплатформенность. Благодаря среде .NET Core я смог скомпилировать программу-сервер под две 64-битные платформы: Windows и Linux. Что касается Linux, я ориентировался на Debian и Ubuntu, работу на других дистрибутивах не могу гарантировать. Конфигуратор, к сожалению, написан на обычном .NET Framework, и будет доступен только под Windows. Надеюсь, это не доставит вам заметных неудобств.


Слабые стороны:


1. Видео воспроизводится с ощутимой задержкой. Это особенность технологии HTTP Live Streaming (HLS). Так, если интервал I-кадров равен четырехкратной частоте кадров, а количество сегментов в плейлисте равно трем, то задержка (расхождение с реальным временем) составит около 12 секунд. Применить технологию Low Latency HLS мне не удалось.


2. Под Linux в консоль запущенной программы попадают строки от FFMpeg, этот вопрос я не

смог решить. Знаю, что можно как-то через xterm сделать, но нет гарантии, что на вашем компьютере он будет присутствовать.


3. Программой используется FFMpeg со статически слинкованными библиотеками. Это негативно сказывается на расходе оперативной памяти, если камер много (и соответственно, много одновременно работающих процессов FFMpeg). Но вы всегда можете заменить FFMpeg на нужный вам билд со всеми оптимизациями. А пользователи Linux могут заменить файл "ffmpeg-linux64" на символическую ссылку на системный FFMpeg. У меня же в приоритете была надежность запуска, да и времени на такого рода оптимизации нет — этим мой выбор и обусловлен.


Поддерживаемые камеры – практически любые, способные выдавать H.264 поток по протоколу RTSP. Если ваша камера умеет H.265, то вам нужно переключить ее в H.264, так как сервер не осуществляет перекодирование, а большинство браузеров пока «не умеют» новый формат. Надеюсь, это временно, и когда-нибудь можно будет вернуть обратно. Также можно оставить основной поток в H.265, а дополнительный сделать в H.264 и тогда в Конфигураторе указывать ссылку на него. Сохранится и возможность воспроизведения браузерами, и хорошее качество записи на диск (если требуется).


Установка и настройка:


1. Распаковываем программу в нужное вам место. Программа после запуска должна иметь возможность писать в свою вложенную папку data (да, не самое лучшее решение, я знаю), поэтому проверьте права на запись в нее.


2. Определитесь, будете ли вы использовать SSL-сертификат. Если да (строго рекомендую), то получаете сертификат на свое доменное имя и устанавливаете:

a. Для формата PEM: разместите файлы сертификата под именами cert.pem и privkey.pem в подпапке data.

b. Для формата PFX: разместите сертификат под именем cert.pfx в подпапке data (в случае использования обоих форматов приоритет отдается PEM).

c. Иные форматы: не поддерживаются, требуется конвертация (например, через программу OpenSSL).


3. Запускаем Конфигуратор файлом "Configurator.exe". Если сервер не на Windows, то вам придется скопировать Конфигуратор на соответствующий компьютер, там настроить и скопировать конфиг "data/config.xml" на сервер. Также можно расшарить папку с файлами программы по сети и запускать Конфигуратор из нее – этот способ использую я сам.


4. Добавляем камеры, прописываем RTSP-ссылки. Придумываем секретный общий ключ из латинских букв и цифр, указываем адрес сервера (необязательно в случае «просто посмотреть, протестировать»). Если используется SSL сертификат – включите защищенное соединение галочкой. Если вы используете сертификат формата PFX, то укажите пароль на него.


5. Копируем себе ссылки на камеры из поля в нижней части окна Конфигуратора.


6. Запускаем серверную часть файлом RTSP2HLS.exe (Windows) или RTSP2HLS (Linux). Оба варианта являются консольной программой.


7. Если целью установки программы не было тестирование, то скорее всего вам придется пробросить порты на роутере, чтобы сервер был виден из интернета (по умолчанию используется порт tcp/8000, его лучше изменить в Конфигураторе). А также добавить сервер в автозагрузку. Здесь вам придется действовать самим.


8. Готово – теперь вы можете смотреть камеры в браузере по тем ссылкам, которые вы скопировали в п.5.


Важное замечание – внесенные в Конфигураторе изменения вступают в силу только после перезапуска программы-сервера. Кстати, сам Конфигуратор требует для своего запуска платформу .NET Framework 4.0 или выше.


В случае, если видео воспроизводится некорректно – прерывается, сбрасывается на начало или сильно расходится с реальным временем, попробуйте следующее:


• Увеличьте число сегментов в плейлисте в Конфигураторе. Внимание – это увеличит задержку воспроизведения, видео будет отставать от реального времени сильнее.


• Проверьте настройки своей камеры – интервал ключевого кадра (интервал I-кадра) рекомендуется выставить равным N помноженное на частоту кадров, где N – число от 2 до 6. Если снимаемая сцена в основном статична (т.е. в кадре мало движения), то большие значения N заодно повысят ее качество. Параметр также влияет на задержку видео, плюс увеличивает время захвата снимка.


• Отключите функцию поддержки перемотки видео (в Конфигураторе).


Также программа-сервер умеет выдавать снимки с видеокамер. Для этого в ссылках, полученных из Конфигуратора, замените слово player на image. Открыв такую ссылку в браузере, вы увидите снимок в формате JPEG, его можно использовать в качестве превью на вашем сайте.


Ну а дальше все зависит только от ваших желаний.


Дистрибутив программы: https://github.com/carpediem-av/rtsp2hls/releases

Исходники программы: https://github.com/carpediem-av/rtsp2hls

Страничка автора (меня): http://carpediem.0fees.us

Показать полностью 1
[моё] IP-камера Видеонаблюдение Просто Трансляция Стрим Csharp Dotnet Html 5 Длиннопост
79
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии