Содержание
Вставка видео, социальных сетей и встроенных фреймов—ArcGIS Enterprise Sites
Делитесь видео с Facebook, Vimeo или медиа из социальных сетей YouTube и вставляйте iframe на свои сайты или страницы.
Для начала работы войдите на Portal for ArcGIS и щелкните Сайты на странице Обзор, чтобы просмотреть список ваших сайтов.
Подсказка:
Вы также можете редактировать сайт при просмотре в браузере. Убедитесь, что вы вошли в систему и найдите кнопку редактирования слева от вашего сайта.
Показать видео
Добавляйте карточки видео, чтобы встраивать видеоролики YouTube, Vimeo, или Facebook.
- Перетащите карточку Галереи в имеющуюся строку.
- Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
- Вставьте URL видеоролика из Facebook, Vimeo или YouTube в поле URL видео.
- В зависимости от источника видео могут появиться дополнительные опции, позволяющие конфигурировать отображение видео:
- Для видеороликов Facebook выберите Показать текст поста для показа количества лайков, комментариев, публикаций и другого текста. Выберите Всегда показывать подписи для отображения подписей видео.
- Для видеороликов Vimeo выберите Показать заголовок видео, Показать владельца видео, Показать уменьшенное изображения владельца видео и Циклическое воспроизведение видео.
- Для видео YouTube, выберите Показать значок YouTube и Циклическое воспроизведение видео.
- Щелкните кнопку копирования, расположенную рядом с URL видео, чтобы сохранить ссылку в буфер обмена, которую можно использовать по всему приложению.
- Щелкните Сохранить.
Поделиться одним постом Facebook
Отобразите один пост для выделения чего-либо.
- Перетащите карточку Социальные сети в имеющуюся строку.
- Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
- Вставьте в поле URL поста социальной сети URL любого публично опубликованного поста Facebook. Чтобы вставить правильный адрес URL, щелкните временную метку поста (дату или время в левом верхнем углу поста), а затем скопируйте новый URL в браузере, перед тем как редактировать свой сайт.
- При желании щелкните кнопку переключения для Показать текст поста, чтобы отобразить текст, связанный с сообщением.
- Щелкните Сохранить.
Отобразить Facebook временную шкалу
Отображение Facebook временной шкалы, события или сообщения для более глубокого изучения.
- Перетащите карточку Социальные сети в имеющуюся строку.
- Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
- Вставьте в поле URL поста социальной сети URL любой публично опубликованной страницы Facebook.
- При желании нажмите кнопку-переключатель, чтобы включить любую комбинацию из следующих параметров:
- Временная шкала позволяет отобразить вкладку шкалы под заголовком страницы. Выберите эту опцию, если вы хотите опубликовать свою ленту с событиями или сообщениями.
- Опция События отображает список представлений событий страницы.
- Опция Сообщения позволяет людям вводить и отправлять сообщения администратору страницы Facebook через Мессенджер Facebook.
- Опция Использовать большой заголовок позволяет увеличить размер заголовка страницы и добавить кнопку Отправить сообщение для связи людей через Мессенджер Facebook.
- Опция Показать фотографию обложки для отображения фотографии обложки страницы.
- Щелкните Сохранить.
Показать один твит
Отобразите один пост Twitter для выделения чего-либо.
- Перетащите карточку Социальные сети в имеющуюся строку.
- Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
- Вставьте в поле URL поста социальной сети URL любого публично опубликованного поста Twitter. Чтобы получить ссылку на конкретный твит, щелкните кнопку ещё в правом верхнем углу поста, а затем выберите Скопировать ссылку на твит.
- Можно также щелкнуть кнопку переключения, чтобы включить любую комбинацию следующих опций в меню Опции:
- Опция Показать темную тему инвертирует цвета отображения.
- Ширина сообщения Tweet позволяет выбрать размер вашего поста, используя следующие опции: Маленький, Средний, Большой.
- Опция Выбрать положение твита позволяет вам выбрать выравнивание По левому краю, По центру и По правому краю.
- Щелкните Сохранить.
Отобразить Twitter временную шкалу
Отобразите прокручиваемую временную шкалу Twitter.
- Перетащите карточку Социальные сети в имеющуюся строку.
- Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
- Вставьте в поле URL поста социальной сети URL любой публично опубликованной ленты Twitter.
- Можно также щелкнуть кнопку переключения, чтобы включить любую комбинацию следующих опций в меню Опции:
- Расширение по высоте позволяет показать больше сообщений Twitter.
- Ограничение твитов задает число твитов (до 20), отображаемых на временной шкале.
- Опция Показать темную тему инвертирует цвета отображения.
- Опция Показать заголовок предназначена для отображения заголовка. Точно так же выберите Показать колонтитул для отображения нижнего колонтитула.
- Опция Показать границу позволяет отобразить линию границы временной шкалы.
- Опция Показать фон удаляет или отображает фон.
- Щелкните Сохранить.
Встраивание ресурса с помощью карточки iframe
Вы можете использовать карточку iframe, чтобы встроить внешние ресурсы, такие как приложения, веб-карты или панели управления, используя URL.
Подсказка:
Iframes лучше всего подходят для отображения панелей управления и инфографики. Для других элементов, включая веб-приложения Experience Builder, страницы Insights, веб-карты, опросы и карты-истории, используйте карточку галереи, карточку веб-карты или карточку приложения.
При использовании iframes желательно ограничить число экземпляров двумя. Слишком большое количество iframe на одном сайте или странице может снизить производительность на мобильных устройствах. Независимо от использования iframe или других карточек, отображение не более 2 ключевых элементов позволяет получить более четкий и доступный дизайн. Для остальных элементов попробуйте использовать карточку галереи.
- Перетащите карточку iframe в имеющуюся строку.
- Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
- Укажите URL-адрес iframe и высоту фрейма. Не встраивайте код iframe с другого веб-сайта. Вставляйте только URL-адрес, который вы хотите встроить.
- Добавьте заголовок вашего iframe.
- Включите прокрутку, выбрав Автоматически.
- Щелкните Применить.
- Щелкните Сохранить.
Отзыв по этому разделу?
Добавляем YouTube видео на сайт — как вставить видео с ютуба
Вы решили добавить видео с YouTube на свой сайт? Это хорошая идея, ведь оно поможет обогатить ваш контент и даст посетителям больше информации.
Добавление YouTube видео в разделы сайта «О нас» и «О продукте» значительно облегчает изучение информации о вашей компании и деятельности.
Давайте разберем как это правильно сделать.
Почему не HTML тег video?
Стандарт HTML 5 имеет встроенный тег video, который позволяет вам добавлять видео на веб-страницу, указав его расположение в теге source.
Однако есть риск, что браузер пользователя не будет поддерживать формат вашего видео, да и добавление нескольких
источников довольно хлопотно.
Знание того, как встроить видео YouTube в HTML страницу, избавит вас от многих проблем. Мы будем использовать
iframe вместо тега video:
IFrame означает встроенную рамку и позволяет вставлять одну страницу в другую — в этом случае, страницу YouTube.
Таким образом, вам не нужно беспокоиться о поддержке формата вашего видео файла.
Как вставить видео YouTube на сайт
Для того, чтобы добавить видео с YouTube на сайт, откройте страницу и найдите кнопку Поделиться под видеоплеером:
Когда вы нажмете на нее, вы увидите несколько вариантов как поделиться видео, в том числе через различные платформы социальных сетей.
Самой первой кнопкой в списке будет Встроить. Нажмите на ее, чтобы вставить видео с Youtube на сайт.
YouTube сгенерирует код для вставки автоматически. Тег iframe будет иметь URL исходного видео, высоту и ширину
плеера и еще несколько атрибутов:
В нашем случае код будет выглядеть следующим образом:
HTML <iframe src="https://www.youtube.com/embed/li_9PBrcOcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
Все, что вам нужно сделать — это нажать Копировать и вставить этот код в HTML вашей страницы.
Настройка YouTube видео в HTML5
Теперь, когда вы знаете, как вставлять видео YouTube в формате HTML, вы должны также понять , как модифицировать его под ваши цели.
Добавляя некоторые параметры в конце URL адреса видео, вы можете влиять на поведение плеера.
Для этого добавьте знак вопроса ? в конце URL, а затем добавить один или несколько
параметров и их значения.
Параметр autoplay позволяет начать автоматическое воспроизведение YouTube видео при загрузке страницы. Добавьте autoplay=1 в конец URL
чтобы включить автовоспроизведение или autoplay=0 чтобы выключить.
HTML <iframe src="https://www.youtube.com/embed/li_9PBrcOcQ?autoplay=1"> </iframe>
Параметр loop позволяет зациклить видео, цикл будет длиться, пока пользователь останавливает его вручную.
Использование loop=1 запустит видео снова после того, как она закончится, а
loop=0 остановит видео после первого воспроизведения.
Параметр playlist установит плейлист на вашем сайте, несколько YouTube видео будут воспроизведены один за другим в последовательном порядке.
Это позволит создать личный список воспроизведения на вашем сайте.
Посмотрите еще несколько параметров, которые вы можете использовать в таблице ниже:
Параметр
Значение
color
При установке значения white, уже просмотренная часть видео будет выделена белым в прогрес баре.
disablekb
При установке значения 1, видеопроигрыватель не будет реагировать на управление с клавиатуры
fs
Если установлено значение 0 , кнопка полноэкранного режима будет добавлена в плеер
modestbranding
При установке значения 1 , видеоплеер не будет показывать логотип YouTube
Как встроить видео YouTube: Полезные советы
-
Перед копированием кода с YouTube, вы можете выбрать время начала воспроизведения.
Вы также можете выбрать, следует ли добавлять в плеер элементы управления видео. -
Не забывайте про авторские права — это незаконно использовать творение других людей, для получения прибыли без их разрешения.
Ленивая загрузка встроенных видео
Если вы планируете добавит несколько видео на страницу, то можете столкнуться
со значительным увеличением времени загрузки. Пользователь может быть даже не
запустит плеер, а уже скачает лишние ресурсы.
Чтобы решить ту проблему мы будем использовать вместо плеера крошечную
встраиваемую страницу с превью видео и кнопкой. А при нажатии на нее будет загружаться плеер.
Хитрость будет заключаться атрибуте iframe — srcdoc в который мы поместим HTML нашего превью.
HTML <iframe src="https://www.youtube.com/embed/li_9PBrcOcQ" srcdoc="<style>*{padding:0;margin:0;overflow:hidden} html,body{height:100%} img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto} span{height:1. 5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black} </style> <a href=https://www.youtube.com/embed/li_9PBrcOcQ?autoplay=1> <img src=https://img.youtube.com/vi/li_9PBrcOcQ/hqdefault.jpg alt='Demo video'> <span>▶</span> </a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Demo video"> </iframe>
Вставьте видео на свой веб-сайт с помощью HTML5 • Агентство Moove
Главная » WordPress » Вставьте видео на свой веб-сайт с помощью HTML5
5 мин.
WordPress
В современных браузерах добавить видео на страницу так же просто, как добавить изображение. Больше никаких специальных плагинов, никакой сумасшедшей разметки. Вы можете сделать это с помощью одного элемента. В этом посте мы покажем вам, как встроить видео на ваш сайт с помощью HTML5.