Содержание

Тег | htmlbook.ru



Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 3.0+ 10.50+ 3.1+ 3.5+ 2.0+ 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведен в табл. 1.

Табл. 1. Кодеки и браузеры
Браузер Internet Explorer Chrome Opera Safari Firefox
Аудио кодеки
ogg/vorbis
wav
mp3
AAC
Видео кодеки
ogg/theora
H.264
WebM

Для универсального воспроизведения в указанных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно (см. пример).

Синтаксис

<video>
 <source src="URL">
</video>

Атрибуты

autoplay
Видео начинает воспроизводиться автоматически после загрузки страницы.
controls
Добавляет панель управления к видеоролику.
height
Задает высоту области для воспроизведения видеоролика.
loop
Повторяет воспроизведение видео с начала после его завершения.
poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload
Используется для загрузки видео вместе с загрузкой веб-страницы.
src
Указывает путь к воспроизводимому видеоролику.
width
Задает ширину области для воспроизведения видеоролика.

Закрывающий тег

Обязателен.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>video</title>
 </head>
 <body>
  <video controls="controls" poster="video/duel.jpg">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. 
   <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение видеофайла

Браузеры

Firefox поддерживает кодек WebM начиная с версии 4.0.

Статьи по теме

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно.
Воспользуйтесь сервисом cssdeck.com или jsfiddle.net,
сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как вставить видео на сайт?

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

Зачем видео на сайте?

Для начала разберем зачем вообще нужно видео на сайте. Сейчас с развитием технологий многие люди предпочитаю смотреть и слушать, а не читать, хороши ли это или плохо не нам решать, но размещение видео на сайте сыграет вам на руку. Вы можете снимать видеобращения к посетителям сайта, рассказывать и показывать ваши товары, проводить видеоуроки или различные демонстрации, а так же размещать видео, связанные с тематикой вашего сайта. Например, на днях я искал информацию по душевым кабинам, в поиске выдает множество страниц с текстом, и особняком стоит 1 видео, оно сразу выделяется в поиске и на него хочется кликнуть. А главное, оно реально полезное.

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

Как вставить видео на сайт?

Практически на любую страницу вашего сайта можно добавить видео. Это делается в несколько шагов.

Первый шаг зависит от того, где находится видео. Если оно не опубликовано в Интернете, а хранится только у вас на компьютере, то сначала вам нужно выложить его в Интернет. Это можно сделать с помощью вышеперечисленных видеоресурсов  YouTube, Vimeo и т.п. Также видео можно выкладывать на своей странице в Вконтакте.

Когда видео находится в Интернете (неважно, было ли оно там, или вы сами только что его туда добавили), вам нужно получить его код. Мы вам покажем как этот код добывается на примере Youtube, rutube, vimeo и Вконтакте, отличия здесь минимальны.

Как вставить видео с Youtube на сайт

Youtube – самый популярный международный видеохостинг, на котором размещают свои видео все, начиная от мировых знаменитостей и телешоу, заканчивая самыми простыми людьми, которым есть чем поделиться. Youtube занимает 3е место в мире по числу посетителей, ежедневно здесь совершают около 4 млрд просмотров. Ютуб позволяет хранить видео, смотреть, комментировать и делиться с другими пользователями, в том числе и размещать на сайте.

В Youtube это делается следующим образом:

  • Под каждым видео есть кнопка «Поделиться», нажмите ее;
  • Выберите пункт «HTML-код»;
  • Выберите нужный размер для видео;
  • Скопируйте код и разместите его на странице вашего сайта.

Как вставить видео с Rutube на сайт

Rutube – российский аналог youtube, так же позволяет размещать, хранить, смотреть и делиться видео. По данным администрации ресурс ежедневно посещают 15 миллионов пользователей. Здесь имеют свои каналы популярные ТВ-каналы, такие как Первый канал, Россия 2, ТНТ, СТС, Пятница, НТВ и многие другие, а так же отечтественные сериалы и передачи.

В Rutube это делается следующим образом:

  • Под каждым видео есть кнопка «код вставки», нажмите ее;
  • Скопируйте код.

Как вставить видео с Vimeo на сайт

Vimeo – это бесплатный видеохостинг, на котором можно так же выкладывать видео (до 500кб в неделю бесплатно, с платным аккаунтом до 20гб), смотреть, комментировать, лайкать и делиться ими со своими друзьями, положительным моментом является отсутствие рекламы. К сожалению пока нет русскоязычной версии,интерфейс доступен на: английском, испанском, французском, немецком и японском. Видео здесь делятся на категории: мода, музыка, искусство, анимация, юмор, еда и т.п., так что без труда можно поискать видео на интересующую тематику. Ресурс обладает современным дизайном и функционалом, особенно популярен среди молодежи.

В Vimeo это делается следующим образом:

  • Поднесите мышку к видеоплееру;
  • В верхем правом углу появятся 3 кнопки, нажмите «Share»;

  • В появившемся окошке скопируйте код «Embed».

Как вставить видео с Вконтакте на сайт

Вконтакте – наша отечественная социальная сеть, которая позволяет добавлять и хранить видео, а так же смотреть, делиться, комментировать, в общем все в правилах жанра.

Здесь скопировать код видео можно двумя способами.

1. Включите видеопроигрыватель, правой кнопкой мышки нажмите на видео и из выпадающего списка выберите «копировать html-код».

2. Под каждым видео есть кнопка «Поделиться», нажмите ее. 

3. В появившемся окошке нажмите на вкладку «экспортировать» и скопируйте код для вставки.

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

Рассмотрим размещение видео на примере конструктора сайтов Nubex.

1. Зайдите в админку сайта и откройте редактирование той страницы, на которую хотите поместить видео (или создайте новую страницу). В поле для вставки текста нажмите кнопку «Источник».

2. У вас откроется HTML-код страницы. Найдите место в тексте, в которое хотите поместить видеоролик, и вставьте туда тот код, который вы скопировали из YouTube (или с другого сайта, на котором вы разместили видео).

3. Сохраните страницу, нажав на кнопку внизу.

Видео будет выглядеть следующим образом: 

Поздравляем! Вы смогли добавить видео на сайт самостоятельно. Надеемся посетителям вашего сайта оно понравится. 

Программы для вставки видео в видео

Некоторым пользователям необходимо соединить несколько видеороликов. Такая функция доступна практически во всех редакторах, однако их очень много, и выбрать какой-то один довольно сложно. В этой статье мы подобрали для вас список подобного софта, обладающий необходимыми инструментами. Давайте рассмотрим его подробнее.

ФотоШОУ PRO

Основная задача «ФотоШОУ PRO» – создание слайд-шоу, но после покупки полной версии открывается возможность работы с видео, что позволит осуществить необходимый процесс. Хочется отметить удобный интерфейс, присутствие русского языка, наличие большого количества шаблонов и заготовок. Пробная версия программы доступна к скачиванию на официальном сайте.

Скачать ФотоШОУ PRO

Movavi Video Editor

Знаменитая компания Movavi обладает собственным видеоредактором с красивым интерфейсом и большим количеством инструментов. Склейка нескольких роликов осуществляется с помощью вставки их в таймлайн. Доступно использование переходов, что поможет плавно соединить несколько фрагментов.

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

Скачать Movavi Video Editor

Sony Vegas Pro

Данный представитель является одним из самых популярных как среди профессионалов, так и обычных пользователей. В Сони Вегасе есть все, что может понадобиться во время монтажа видео – многодорожечный редактор, наложение эффектов и фильтров, поддержка скриптов. Для склеивания видео программа подойдет идеально, а сам процесс осуществить довольно просто.

Sony Vegas Pro будет полезна людям, которые делают ролики и выкладывают их на видеохостинг YouTube. Доступна загрузка сразу же с программы на канал через специальное окно. Редактор распространяется платно, однако пробного периода в 30 дней будет вполне достаточно, чтобы ознакомиться со всем функционалом Вегаса.

Скачать Sony Vegas Pro

Adobe Premiere Pro

Известная многим компания Adobe имеет свой собственный видеоредактор. Он очень популярен у профессионалов, так как в нем есть все инструменты, необходимые в работе с видеозаписями. Присутствует поддержка неограниченного количества дорожек различных типов медиафайлов.

Стандартный набор шаблонов фильтров, эффектов, стилей текста также присутствует в арсенале Premiere Pro. Поскольку в программе собрано большое количество различных функций, она будет сложна в освоении неопытным пользователям. Пробная версия имеет стандартный период в 30 дней.

Скачать Adobe Premiere Pro

Adobe After Effects

Следующий представитель разработан той же компанией Adobe, но предназначен немного для другого. Если предыдущая программа заточена под монтирование, то After Effects больше подходит для постобработки и композиторинга. Рекомендуем использовать во время работы с небольшими видеороликами, клипами и заставками.

На борту присутствует большое количество инструментов и функций. Широкий выбор эффектов и фильтров поможет создать неповторимую атмосферу. Что касается склейки нескольких фрагментов, то многодорожечный редактор идеально подойдет под выполнение этого процесса.

Скачать Adobe After Effects

Lightworks

Lightworks – простой видеоредактор, который идеально подойдет любителям работы с роликами. Отличается данная программа от других подобных уникальным оформлением интерфейса и реализацией некоторых инструментов. Кроме этого в наличии имеется небольшой магазин с аудиозаписями.

Компоненты проекта располагаются на таймлайне, поддерживающем неограниченное количество дорожек, каждая из которых отвечает за определенный тип медиафайлов. Каждый процесс редактирования происходит в отдельной вкладке, где собрано все необходимое.

Скачать Lightworks

Pinnacle Studio

Pinnacle Studio – профессиональный продукт, который идеально подойдет пользователям с высокими требованиями. Она предоставляет большое количество возможностей видеомонтажа. Программа в большей степени предназначена для опытных пользователей, но и новички смогут быстро ее освоить. Присутствуют инструменты настройки эффектов, аудио и даже запись звука с микрофона.

Кроме обычного сохранения на различные устройства доступна запись проекта на DVD с широким выбором параметров. Pinnacle Studio распространяется платно, а пробный период составляет месяц, чего хватит, чтобы изучить софт со всех сторон.

Скачать Pinnacle Studio

EDIUS Pro

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

Склейка двух записей осуществляется с помощью удобного таймлайна с поддержкой неограниченного количества дорожек. Присутствует инструмент захват изображений с экрана, что есть далеко не у всех представителей подобного софта.

Скачать EDIUS Pro

CyberLink PowerDirector

CyberLink PowerDirector – качественно выполненный продукт, позволяющий осуществлять любые действия с медиафайлами. Работать с софтом проще благодаря большому количеству встроенных дополнений, которые призваны облегчить выполнение некоторых процессом.

Отдельно хочется отметить возможность рисования поверх видеоролика. Надпись накладывается и привязывается к основной дорожке, что работает и с фотографиями. Еще из интересного стоит упомянуть о редакторе изображений и функции создания 3D-видео.

Скачать CyberLink PowerDirector

Avidemux

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

Скачать Avidemux

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

Мы рады, что смогли помочь Вам в решении проблемы.

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

Как вставить в видео видео — 2 универсальных метода

Мечтаете овладеть искусством монтажа и создавать увлекательные ролики? С программой «ВидеоМОНТАЖ» у вас не возникнет сложностей! Этот доступный софт поможет быстро и качественно объединить видеофрагменты в полноценный фильм с эффектами и музыкой. Читайте статью – и вы узнаете, как вставить в видео видео без специальных знаний и навыков. Выберите способ, который вас интересует, и следуйте указаниям.

Содержание:

  • 1. «Классический» линейный монтаж
  • 2. Искусство многослойного монтажа
  • «Классический» линейный монтаж

    «ВидеоМОНТАЖ» позволяет соединять, обрезать и улучшать видеодорожки, вы сможете без труда воплощать любые креативные идеи, не прибегая ни к каким дополнительным утилитам. Всё, что потребуется для работы, – это составить сценарий, подобрать материал и скачать программу для обработки видео по указанной ссылке.

    Разберёмся в основах и рассмотрим случай, когда необходимо вставить в середину одного видеоклипа фрагмент из другого. Это может пригодиться для добавления «перебивки» в однообразные кадры, для демонстрации нескольких событий или показа одного действия с разных ракурсов.

    №1. Нарезка видео

    Стартовое окно предложит несколько режимов работы. Чтобы выполнить первое действие, а именно поделить исходную видеозапись на части, нужно выбрать опцию «Нарезка видео». Загрузите файл и перейдите «Далее».

    Воспользуйтесь режимом быстрой нарезки видео

    Перед тем, как разделить видео на части, вы можете просмотреть дорожку во встроенном плеере и определить, на какие именно куски нужно порезать материал. Используйте специальные маркеры, чтобы отметить границы обрезки. Обозначьте первый промежуток на таймлайне и кликните по кнопке «Новый фрагмент». Выделенная часть автоматически будет отделена от остального видеоряда.

    Повторите действия, чтобы вырезать следующий эпизод. Количество и размер отрезков можно будет отследить в списке в правой части окна. Закончив, назначьте папку для экспорта и сохраните файлы в исходном формате.

    Разделите видеофайл на несколько частей

    №2. Добавление в проект

    После создайте «Новый проект» и определите формат будущего ролика. Это нужно, чтобы видеоредактор привёл все фрагменты к общему стандарту, и они выглядели как единый проект, а не разрозненные части. Лучше остановиться на варианте 16:9 – это пропорции всех современных мониторов.

    Задайте формат будущего видео

    Найдите папку с нарезанными роликами и перетащите отрывки на таймлайн. Далее найдите клип для вставки в видео и разместите его между двумя из загруженных ранее частей.

    Добавьте обрезанные ролики на шкалу времени

    Программа включает коллекцию футажей – коротких клипов, универсальных и тематических. При желании вы можете использовать их в качестве монтажной перебивки.

    Используйте футажи из каталога программы

    №3. Установка переходов

    «ВидеоМОНТАЖ» по умолчанию соединяет файлы короткими (2 секунды) переходами. Это нужно, чтобы добавленные сцены плавно перетекали друг в друга. Открыв одноимённую вкладку меню, вы сможете заменить анимацию на более динамичную. Все пресеты можно предварительно просмотреть. Чтобы применить понравившийся вариант, достаточно дважды кликнуть мышью.

    Подберите подходящие переходы

    Вы можете сократить или увеличить продолжительность анимации. Для этого нажмите на цифру в нижней части контейнера с переходом и введите новое значение. Если хотите использовать классическую склейку «встык» или резкую смену кадров, уберите переходы. Кликните по контейнеру правой кнопкой и нажмите «Удалить».

    №4. Обработка (опционально)

    Всё готово! Вы можете сразу перейти к сохранению (см. шаг №5) или использовать возможности «ВидеоМОНТАЖА» на максимум, чтобы усовершенствовать ролик с помощью эффектов и музыки.

    При соединении нескольких видеофайлов особенно важно, чтобы «технические» характеристики не мешали восприятию ролика как целостного проекта. В частности, если в одном эпизоде преобладали тёплые оттенки, а во вставленном – холодные, резкий скачок негативно скажется на качестве склейки.

    Во вкладке «Редактировать» вы найдёте инструменты, которые позволят скорректировать видеоряд в добавленных фрагментах. В разделе «Улучшения» вы сможете подогнать цветовой баланс в каждом фрагменте «к общему знаменателю». Используйте для этого кривые.

    Улучшите изображение в видео с помощью кривых

    Фильтры из раздела «Эффекты» помогут оформить кадры из разных роликов в едином стиле. Подберите вариант по душе или создайте с нуля.

    Примените эффект из коллекции или и создайте свой

    №5. Сохранение результата

    Чтобы склеить файлы, нужно конвертировать проект в один из представленных видеоформатов. Перейдите во вкладку «Создать» и выберите оптимальный способ экспорта – сохранить в AVI, MP4, записать HD-видео, скопировать на DVD-диск, подготовить html-код для публикации на сайте или загрузить на мобильное устройство. Далее задайте качество и разрешение будущего видеоролика и запустите процесс преобразования.

    Настройте размер кадра и качество будущего видеоролика

    Через пару минут вы найдёте готовый ролик в папке, которую указывали перед экспортом.

    Искусство многослойного монтажа

    «ВидеоМОНТАЖ» поддерживает работу с хромакеем. Это значит, что вы сможете наложить видео на видео за пару кликов мыши. Возможность пригодится, если вы решите «подставить» другой задний план в запись с одноцветным фоном или вырезать какой-либо объект и вставить в «обычный» ролик. Так что для работы понадобится клип, снятый с использованием хромакея (зелёного/синего экрана), а также файл, который будет подставлен на место однотонного фона.

    В стартовом окне программы для монтажа видео выберите опцию «Хромакей» и следуйте указаниям.

    Загрузите файл с одноцветным задником. В Интернете подобные ролики представлены в свободном доступе, один только YouTube насчитывает десятки тысяч всевозможных вариантов для эксперимента. Вооружившись тканью яркого цвета, вы сможете отснять такой клип сами в домашних условиях. Всё зависит от вашей задумки.

    Загрузите видеодорожку с зелёным фоном

    Следующим шагом добавьте видеодорожку, которая будет новым фоном.

    Добавьте видео или картинку с новым фоном

    Далее редактор попросит указать фоновый цвет. Воспользуйтесь пипеткой – щёлкните по любому участку.

    «ВидеоМОНТАЖ» полностью удалит из видеоряда пиксели указанного цвета и наложит один видеопоток на другой. Чтобы картинки смотрелись естественно и гармонично, скорректируйте параметры смешивания и допуска. Первая характеристика отвечает на прозрачность верхнего слоя, а вторая – за точность границ объекта.

    Отрегулируйте параметры смешивания слоев

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

    «ВидеоМОНТАЖ» – универсальный и удобный помощник в создании увлекательных и качественных роликов. Склеивайте фрагменты, обрезайте лишнее, преображайте вставки для видео, используя эффекты и различные инструменты улучшения. Скачайте редактор и начните работу уже сейчас!

    Как вставить видео на сайт

    InSales предлагает несколько вариантов размещения видеороликов на страницах магазина.

    Как это сделать, мы разберем на примере сервиса YouTube. Впрочем, почти на всех подобных сервисах алгоритм будет схожим.

    1. Вставка видео с видеохостингов (автоматически)
    2. Вставка видео с видеохостингов (вручную в коде шаблона)
    3. Делаем видео адаптивным для всех экранов

    Вставка видео с видеохостингов (автоматически)

    Способ подходит, если вы редактируете контент через визуальный редактор InSales, который применяется для описаний товаров, категорий и содержимого иных страниц в бэк-офисе. В редакторе имеется опция «Вставить/редактировать видео»:

    Зайдите на страничку нужного видео и просто скопируйте адрес страницы из адресной панели браузера (правой кнопкой мыши или комбинацией Ctrl+C / Cmd+C):

    Выберите упомянутый выше инструмент «Вставить/редактировать видео» и вставьте в поле «Источник» скопированный адрес (1). При необходимости вы можете сразу задать нужные ширину и высоту ролика в пикселях (2):

    Результат:

    Вставка видео с видеохостингов (вручную в коде шаблона)

    Этот способ обычно нужен, если Вам нужно вставить ролик прямо в коде шаблона, где нет визуального редактора и инструмента «Вставить/редактировать видео».

    Как правило, на видеохостингах под каждым видео есть кнопка «Поделиться». В случае с YouTube она выглядит так:

    После нажатия «Поделиться» выберите «Встроить»:

    Далее кликните по предложенному iframe-коду и скопируйте его:

    После этого Вам нужно перейти в нужное место в коде Вашего сайта и добавить скопированное содержимое. Например:

    Делаем видео адаптивным для всех экранов

    По умолчанию фреймы с видео могут на небольших экранах вылезать за пределы страницы, что смотрится не очень хорошо:

    Как видно на скриншоте, ролик имеет фиксированную ширину и не хочет сжиматься. Это можно исправить несколькими способами.

    Самый легкий метод заставить такие ролики стать адаптивными по ширине – добавить свойство max-width:
    iframe { max-width: 100%; }

    Данное правило CSS Вы можете добавить через редактор темы, оно будет применяться ко всем фреймам. Если вы не уверены в своих силах, просто создайте тикет в поддержку. Начиная с тарифа «Стандартный», такая доработка делается бесплатно.

    Недостаток описанного способа – видео будет сжиматься только по горизонтали. Это приведет к тому, что на некоторых телефонах посетители станут видеть черные полосы сверху и снизу:

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

    В сети также можно найти варианты на чистом CSS, без использования скриптов (допустим, такой), но они подходят только для тех случаев, когда у всех видео соотношение сторон абсолютно одинаковое. Например, когда один ролик идет в формате 16:9, а другой – 1:1, придется для каждого из таких вариантов вручную прописывать свои стили.

    Вставка видео в видеоплеер (HTML+CSS)

    Вы здесь:
    Главная — HTML — HTML Основы — Вставка видео в видеоплеер (HTML+CSS)


    На этом уроке мы разберем, как вставить видео в кастомном видеоплеере на HTML страницу. В качестве импровизированного видеоплеера, будет использовано изображение Smart TV.


    Для работы нам потребуется изображение Smart TV и сам видеоролик. Для эксперимента, вы можете совершенно бесплатно скачать любое видео на сервисе http://www.coverr.co.




    Как вставить видео на сайт


    Для лучшего понимания, пока вставим видео на сайт без картинки TV. Сделать это очень просто. Для добавления на HTML страницу видео, существует два тега: video и source. Атрибут controls добавляет элементы контроля для встроенного плеера. В разных браузерах встроенные плееры выглядят по разному. Надо иметь ввиду, что большинство браузеров поддерживают формат MP4. Если подключается только один формат видео, то указываем его сразу в теге video.




    <video src="example.mp4" controls>></video>

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




    <video controls>

         <source src="example.mp4" type="video/mp4">

        <source src="example.avi" type="video/avi">

    </video>



    Создадим flex-контейнер для элементов — секцию с классом smart_tv. Внутри секции поместим два flex-элемента:


    • видеоплеер (изображение телевизора)
    • видеоролик (тег video с элементами управления controls)


    <section>

        <div>

            <img src="smart-tv.png" alt="">

            <video src="training-cyclist.mp4" controls>

            </video>

        </div>

    </section>

    Обнуляем поля и отступы для всех элементов




    *{

        margin: 0;

        padding: 0;

    }

    Сделаем изображение TV адаптивным.




    img{

        max-width: 100%;

        height: auto;

    }

    Зададим высоту секции на весь экран, отцентрируем все флекс-элементы.




    .smart_tv{

        height: 100vh;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 0 10px;

        position: relative;

    }

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




    .player{

        width: 100%;

        max-width: 800px;

        position: relative;

    }

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




    .player video{

        position: absolute;

        width: 92.0%;

        height: 82.1%;

        top: 2.4%;

        left: 1.8%;

        background: #000;

    }





    Если Вам интересно узнать, как создать и заработать на собственной веб-студии? Тогда обязательно получите доступ к моей уникальной системе «Своя Web-студия за 55 дней».


    • Создано 06.04.2020 10:57:13



    • Михаил Русаков

    Предыдущая статья Следующая статья

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):


    1. Кнопка:

      <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

      Она выглядит вот так: Как создать свой сайт


    2. Текстовая ссылка:
      <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

      Она выглядит вот так: Как создать свой сайт

    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

      [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

    Как вставить видео на сайт в HTML и популярных CMS?

    Разместить на своём сайте ролик с популярного видеохостинга не трудно. Скажем, если ваш ресурс работает на WordPress, то для вставки видео с YouTube достаточно просто добавить в запись ссылку на него, и ролик встроится автоматически (при правке записи убедитесь, что редактор работает в визуальном режиме, и вставьте ссылку в текст). Но если вы хотите настроить некоторые параметры (например, задать ширину и высоту окна с роликом), или контент находится не на видеохостинге, а на самом сайте, или блог работает не на WordPress, тогда процедура становится немного другой.

    Существует несколько способов добавления видеоролика на сайт:

    • фреймы;
    • скрипты;
    • тег video, появившийся в HTML5.

    Их и рассмотрим.

    Фреймы: вставка видео с YouTube

    Всё-таки большинство роликов размещено именно на этом видеохостинге. Данной практике способствует хорошая индексация ролика поисковыми системами, простота размещения, а также тот факт, что YouTube предоставляет своим пользователям неограниченное пространство, а значит, держа ролики на нём, вы экономите арендуемое за деньги дисковое пространство.

    Для размещения видео с YouTube на своём интернет-ресурсе выполните ряд следующих действий.

    1. Откройте видео, которое хотите разместить.
    2. Под ним нажмите кнопку и щёлкните на вкладке .
      Вставка видео с youtube
    3. Скопируйте код из появившейся строки.
    4. Вставьте на страницу своего сайта. Куда вы добавите фрейм, там и появится видео.

    Для настройки дополнительных параметров не обязательно копаться в коде. Нажмите расположенную под видео кнопку ЕЩЁ. Здесь вы можете посмотреть, как будет выглядеть вставленный на страницу ролик, а также изменить некоторые параметры.

    Настройки видео

    Размер видео. Из раскрывающегося списка выберите нужную ширину и высоту. Если подходящего варианта нет, то щёлкните на пункте Другой размер и задайте его в пикселях, введя значения в поля, появившиеся справа от списка.

    Показать похожие видео после завершения просмотра. По умолчанию флажок установлен, а это значит, что когда ролик закончится, внутри фрейма появятся картинки со ссылками на другие ролики схожей тематики (релевантность определяет YouTube). Если вы не хотите этого, снимите флажок.

    Показать панель управления. Снимите флажок, если не желаете, чтобы пользователь мог управлять роликом: перематывать его, ставить на паузу, регулировать громкость звука, разворачивать на весь экран, включать/отключать субтитры и менять другие настройки — если флажок снять, то расположенная в нижней части видео панель управления будет полностью отсутствовать.

    Показать название видео и функции проигрывателя. Если снят этот флажок, то пользователь не увидит элементы, располагающиеся в верхней части фрейма: заголовок, кнопку просмотра от имени пользователя и кнопку Поделиться.

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

    Обратите внимание, как по мере настройки меняется HTML-код. По умолчанию он имеет вид:

    <iframe src="https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder="0" allowfullscreen></iframe>
    

    Что это означает?

    • <iframe></iframe> — теги, создающие, собственно, фрейм — окно, в котором воспроизводится видео.
    • width — значение атрибута определяет ширину фрейма.
    • height — задаёт высоту.
    • src — содержит ссылку на видеоролик.
    • frameborder — устанавливает ширину рамок фрейма.
    • allowfullscreen — пустой атрибут, разрешающий пользователям разворачивать видео на весь экран. Если его убрать, то такой возможности у них не будет.

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

    Единственный не рассмотренный, но важный момент — как сделать так, чтобы ролик воспроизводился автоматически сразу после загрузки страницы. Для этого к значению тега src (к адресу ролика) достаточно добавить &autoplay=1. Тогда вместо

    <iframe src="https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder="0" allowfullscreen></iframe>
    

    Мы получим:

    <iframe src="https://www.youtube.com/embed/7Nxx6J_uWh0&autoplay=1" frameborder="0" allowfullscreen></iframe>
    

    Думаю, теперь-то у вас точно не осталось вопросов, и можно переходить к следующему методу вставки.

    Скрипты

    Для вставки видео на страницы можно использовать и специальные плеера — написанные, в основном, на JavaScript с использованием библиотеки JQuery, приложения. К минусам их эксплуатации относится относительная сложность установки, к плюсам — обилие настроек.

    Проигрывателей видео для сайта разработано довольно много. В качестве примера популярных скриптов можно назвать FlowPlayer и JW Player.

    В общем случае процесс подготовки веб-проигрывателей к работе выглядит так.

    1. Вы выбираете и скачиваете плеер.
    2. Загружаете библиотеки, которые необходимы ему для работы.
    3. Подключаете скрипты.
    4. Прописываете код вывода проигрывателя на экран.

    К сожалению, подробное описание работы с Web-плеерами — тема отдельной статьи, поэтому дальше задерживаться на нём не буду, а опишу лучше третий метод.

    HTML5

    Новая версия языка разметки сильно упростила процесс работы с мультимедиа, и в частности, с видео, принеся с собой замечательный тег для его вставки на страницы сайтов.

    Самый простой код вставки видео будет таким:

    <video src="film.webm"></video>
    

    Где film.webm — ссылка на воспроизводимый ролик.

    Но чтобы видео отображалось корректно и с заданными параметрами, код нужно поменять приблизительно на такой:

    <video controls>
    
    <source src="videos/play.mp4" type="video/mp4">
    
    <source src="videos/play.ogv" type="video/ogg">
    
    <source src="videos/play.webm" type="video/webm">
    
    </video>
    
    
    • video — контейнер, отображающий ролик.
    • source — тег, содержащий информацию о видео. Обратите внимание, что в примере код содержит ссылки аж на три ролика разных форматов. Дело в том, что пока разные браузеры поддерживают не все кодеки, и возможные проблемы с воспроизведением решаются кодированием одного и того же ролика с помощью разных кодеков и одновременным добавлением файлов в тег.
    • controls — включает панель воспроизведения.
    • src — задаёт путь к проигрываемому ролику.
    • type — указывает тип контента, на который ссылается атрибут src.
    • Есть и дополнительные, не попавшие в код, атрибуты, позволяющие настроить проигрывание.
    • width — определяет ширину области отображения.
    • height — задаёт высоту.
    • autoplay — воспроизводит ролик автоматически после загрузки страницы.
    • loop — зацикливает воспроизведение.
    • preload — загружает видео вместе со страницей.
    • poster — содержит адрес изображения, которое будет показываться вместо ролика, если он вдруг по каким-либо причинам не воспроизведётся.

    Заключение

    Это основные, используемые в настоящее время (2017 год), способы вставки видео. Фреймы с YouTube — самое простое и удобное, что можно предложить, но не всем понравится, что их видео хранятся на стороннем ресурсе, где могут быть заблокированы или удалены. Использование HTML5 и вставка тега video — вариант чуть сложнее, но зато он универсален и позволяет проигрывать видео, хранящиеся где угодно. Использование скриптов, на мой взгляд, самый неуклюжий способ, но зато они позволяют веб-мастеру тонко настроить окно ролика, зачастую не прибегая для этого к изменению HTML и CSS.

    Видео: вставьте видео с вашего ПК

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

    Хотите больше?

    Вставьте видео с вашего ПК

    У вас есть видеофайл на вашем компьютере, который вы хотите воспроизвести в своей презентации.

    Вот как его вставить и выбрать настройки воспроизведения.

    Есть несколько способов вставить видеофайл в зависимости от макета слайда.

    Сначала мы вставим видео в макет содержимого внутри заполнителя.

    В заполнителе я нажимаю значок вставки видео, затем нажимаю Обзор , выбираю мое видео и нажимаю Вставить .

    Видео вставляется в заполнитель.

    К нему прикреплена панель воспроизведения, и я могу управлять действием, нажимая Воспроизвести и Пауза .

    Теперь давайте перейдем к третьему слайду и сравним пустой макет.

    Чтобы вставить сюда видео, я нажимаю вкладку INSERT , Video , Video on My PC .

    Выбираю видео и нажимаю Вставить .

    В пустом макете видео вставляется либо в середину слайда, либо в полный размер слайда.

    В зависимости от исходного формата видео.

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

    PowerPoint сохраняет пропорции высоты и ширины при изменении размера.

    Теперь нажмите Slide Show , чтобы воспроизвести видео в режиме слайд-шоу.

    В слайд-шоу, когда я перемещаю курсор, появляется полоса воспроизведения.

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

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

    Причем, есть регулятор громкости.

    Обратите внимание, что я также могу воспроизвести видео, щелкнув по нему, когда я укажу на него, появится курсор в виде руки.

    И я могу нажать, чтобы приостановить его.

    Вернувшись в нормальный вид, попробуем другой подход.

    На этот слайд я вставил видео, изменил его размер и поместил в угол.

    Я хочу, чтобы видео запускалось автоматически и отображалось в полноэкранном режиме только во время воспроизведения.

    Я также хочу, чтобы это текстовое поле появлялось при остановке видео.

    Чтобы выбрать нужные мне настройки, я выбираю видео и нажимаю вкладку Video Tools PLAYBACK .

    Затем для начальной настройки я изменю При нажатии на Автоматически .

    Я также проверю Play Full Screen и Hide While Not Playing .

    Теперь давайте щелкните предыдущий слайд и щелкните слайд-шоу, чтобы увидеть последовательность.

    Я щелкаю слайд перед видео, и видео автоматически воспроизводится в полноэкранном режиме.

    Когда это будет сделано, оно исчезнет, ​​и мы увидим только текстовое поле на видео слайде.

    Наконец, вот важный момент, касающийся видео и размера файла.

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

    Чтобы уменьшить размер файла, сохраните презентацию и щелкните вкладку ФАЙЛ на вкладке Информация под свойствами, вы увидите размер файла.

    Размер этого файла превышает восемь мегабайт.

    Чтобы уменьшить размер файла и сделать его более управляемым для совместного использования, щелкните Сжать носители и выберите тип сжатия с точки зрения качества.

    Давайте попробуем Качество интернета .

    Файл сжимается, и в окне сжатого мультимедиа отображается объем сохраненного места.

    Мы закроем это окно.

    Когда я сохраняю файл и снова нажимаю File , в свойствах я вижу, что размер файла меньше.

    Если мне не нравится результат сжатия, я могу нажать Отменить сжатие мультимедиа .

    Чтобы избежать проблемы с большим размером файла, можно использовать ссылку на видеофайл.

    Для этого при первой вставке видео щелкните стрелку рядом с вставкой и щелкните Ссылка на файл .

    Во время презентации у вас должен быть доступ к связанному видеофайлу с компьютера для презентации.

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

    Далее, отредактируйте и отформатируйте видео.

    .

    Вставка и воспроизведение видеофайла с вашего компьютера

    Поддерживаемые форматы видео

    В PowerPoint 2016 и более поздних версиях мы рекомендуем использовать файлы .mp4, закодированные с видео H.264 (также известным как MPEG-4 AVC) и аудио AAC.

    Дополнительные сведения см. В разделе Форматы видео и аудио файлов, поддерживаемые в PowerPoint.

    Вставить видео, хранящееся на вашем ПК

    1. В режиме просмотра Normal щелкните слайд, на котором должно быть видео.

    2. На вкладке Вставить щелкните стрелку под Видео , а затем щелкните Видео на моем ПК .

    3. В поле Insert Video щелкните нужное видео, а затем щелкните Insert .

    Ссылка на видео, хранящееся на вашем ПК

    Чтобы избежать неработающих ссылок, мы рекомендуем скопировать видео в ту же папку, что и ваша презентация, а затем добавить туда ссылку.

    1. В режиме просмотра Normal щелкните слайд, на котором должна быть ссылка на видео.

    2. На вкладке Вставить щелкните стрелку под Видео , а затем щелкните Видео на моем ПК .

    3. В поле Insert Video щелкните файл, на который нужно создать ссылку, щелкните стрелку вниз рядом с кнопкой Insert , а затем щелкните Link to File .

      Shows Insert Video dialog in PowerPoint

    PowerPoint 2016 и более новые версии поддерживают воспроизведение видео с несколькими звуковыми дорожками. Они также поддерживают скрытые титры и субтитры, встроенные в видеофайлы. Дополнительные сведения см. В разделе «Сделайте презентации PowerPoint доступными».

    Узнать, где хранится связанное видео

    Если на слайде уже есть видео, и вы хотите узнать, где оно хранится, перейдите в Файл > Информация .В разделе Оптимизация совместимости мультимедиа будет информация обо всех мультимедийных файлах в презентации — независимо от того, связаны ли они с файлом или встроены в него. Если есть какие-либо связанные видео, PowerPoint предоставляет гиперссылку View Links . Щелкните его, чтобы открыть диалоговое окно, в котором показано место хранения всех связанных файлов.

    Видео на YouTube

    Если вы хотите вставить видео на YouTube, выберите «Вставить» или укажите ссылку на видео на YouTube.

    Предварительный просмотр видео

    Когда видео выбрано на слайде, под видео появляется панель инструментов, на которой есть кнопка воспроизведения / паузы, индикатор выполнения, кнопки приращения вперед / назад, таймер и регулятор громкости. Нажмите кнопку Play слева от этой панели инструментов, чтобы просмотреть видео.

    The playback controls for a video on a PowerPoint slide

    Воспроизведение видео автоматически или при нажатии

    По умолчанию в слайд-шоу видео воспроизводится как часть последовательности щелчков. Это означает, что когда вы щелкаете в любом месте слайда, чтобы перейти к следующему шагу (или когда вы нажимаете клавишу пробела, клавишу со стрелкой вправо или другую клавишу для перехода к следующему шагу), воспроизводится видео. Эта опция Start называется In Click Sequence .

    Но при желании вы можете запустить воспроизведение видео автоматически, как только оно появится на экране, или воспроизвести его при нажатии:

    1. Выберите видеокадр.

    2. На ленте на вкладке Video Tools Playback откройте список Start и выберите нужный вариант:

      The Playback options for a video from your PC are: In Click Sequence, Automatically, or When Clicked On

      Опция

      Описание

      В последовательности кликов

      Это поведение по умолчанию, как описано выше.Когда вы щелкаете в любом месте слайда, чтобы перейти к следующему шагу, воспроизводится видео.

      Автоматически

      Видео запускается автоматически.

      (Если перед ним есть шаги анимации, сначала будут воспроизводиться шаги анимации, а затем автоматически начнется воспроизведение видео.Если перед видео на слайде нет других шагов анимации, воспроизведение видео начинается немедленно.)

      при нажатии на

      Видео запускается только при нажатии на него.

    Дополнительные сведения о параметрах воспроизведения видео в режиме слайд-шоу см. В разделе Настройка параметров воспроизведения для видео.

    Поддерживаемые форматы видео

    В PowerPoint 2013 мы рекомендуем использовать файлы .mp4, закодированные с видео H.264 (также известным как MPEG-4 AVC) и аудио AAC.

    Дополнительные сведения см. В разделе Форматы видео и аудио файлов, поддерживаемые в PowerPoint.

    Вставить видео, хранящееся на вашем ПК

    1. В режиме просмотра Normal щелкните слайд, на котором должно быть видео.

    2. На вкладке Вставить щелкните стрелку под Видео , а затем щелкните Видео на моем ПК .

    3. В поле Insert Video щелкните нужное видео, а затем щелкните Insert .

    Ссылка на видео, хранящееся на вашем ПК

    Чтобы избежать неработающих ссылок, мы рекомендуем скопировать видео в ту же папку, что и ваша презентация, а затем добавить туда ссылку.

    1. В режиме просмотра Normal щелкните слайд, на котором должна быть ссылка на видео.

    2. На вкладке Вставить щелкните стрелку под Видео , а затем щелкните Видео на моем ПК .

    3. В поле Insert Video щелкните файл, на который нужно создать ссылку, щелкните стрелку вниз рядом с кнопкой Insert , а затем щелкните Link to File .

      Shows Insert Video dialog in PowerPoint

    Узнать, где хранится связанное видео

    Если на слайде уже есть видео, и вы хотите узнать, где оно хранится, перейдите в Файл > Информация . В разделе Оптимизация совместимости мультимедиа будет информация обо всех мультимедийных файлах в презентации — независимо от того, связаны ли они с файлом или встроены в него. Если есть какие-либо связанные видео, PowerPoint предоставляет гиперссылку View Links .Щелкните его, чтобы открыть диалоговое окно, в котором показано место хранения всех связанных файлов.

    Видео на YouTube

    Если вы хотите вставить видео на YouTube, выберите «Вставить» или укажите ссылку на видео на YouTube.

    Предварительный просмотр видео

    Когда видео выбрано на слайде, под видео появляется панель инструментов, на которой есть кнопка воспроизведения / паузы, индикатор выполнения, кнопки приращения вперед / назад, таймер и регулятор громкости.Нажмите кнопку Play слева от этой панели инструментов, чтобы просмотреть видео.

    The playback controls for a video on a PowerPoint slide

    Воспроизведение видео автоматически или при нажатии

    По умолчанию в слайд-шоу видео воспроизводится при нажатиях . Но при желании вы можете запустить воспроизведение видео автоматически, как только оно появится на экране:

    1. Выберите видеокадр.

    2. На ленте PowerPoint на вкладке Video Tools Playback откройте список Start и выберите Automatically :

      For videos inserted from your computer, you can choose to start them automatically or when clicked.

    Дополнительные сведения о параметрах воспроизведения видео в режиме слайд-шоу см. В разделе Настройка параметров воспроизведения для видео.

    Поддержка

    Office 2010 скоро закончится.

    Обновитесь до Microsoft 365, чтобы работать где угодно с любого устройства, и продолжайте получать поддержку.

    Поддерживаемые форматы видео

    В PowerPoint 2010 мы рекомендуем использовать файлы .wmv.

    Дополнительные сведения см. В разделе Форматы видео и аудио файлов, поддерживаемые в PowerPoint.

    Вставить видео, хранящееся на вашем ПК

    1. В обычном режиме щелкните слайд, в который вы хотите встроить видео.

    2. На вкладке Вставить в группе Медиа щелкните стрелку под Видео .

    3. Выберите Video из файла , а затем перейдите к местоположению вашего видео и выберите его.

    4. На кнопке Insert щелкните стрелку вниз, а затем щелкните Insert .

    Ссылка на видео, хранящееся на вашем ПК

    Чтобы избежать неработающих ссылок, мы рекомендуем скопировать видео в ту же папку, что и ваша презентация, а затем добавить туда ссылку.

    1. На вкладке Slides в режиме Normal щелкните слайд, на который вы хотите добавить видео или анимированный файл GIF.

    2. На вкладке Вставить в группе Медиа щелкните стрелку под Видео .

    3. Выберите Video из файла , а затем перейдите к местоположению вашего видео и выберите его.

    4. На кнопке Вставить щелкните стрелку вниз, а затем щелкните Ссылка на файл .

      Link to a video file

    Узнать, где хранится связанное видео

    Если на слайде уже есть видео, и вы хотите узнать, где оно хранится, перейдите в Файл > Информация .В разделе Оптимизация совместимости мультимедиа будет информация обо всех мультимедийных файлах в презентации — независимо от того, связаны ли они с файлом или встроены в него. Если есть какие-либо связанные видео, PowerPoint предоставляет гиперссылку View Links . Щелкните его, чтобы открыть диалоговое окно, в котором показано место хранения всех связанных файлов.

    Предварительный просмотр видео

    Когда видео выбрано на слайде, под видео появляется панель инструментов, на которой есть кнопка воспроизведения / паузы, индикатор выполнения, кнопки приращения вперед / назад, таймер и регулятор громкости.Нажмите кнопку Play слева от этой панели инструментов, чтобы просмотреть видео.

    The playback controls for a video on a PowerPoint slide

    Воспроизведение видео автоматически или при нажатии

    По умолчанию в слайд-шоу видео воспроизводится при нажатиях . Но при желании вы можете запустить воспроизведение видео автоматически, как только оно появится на экране:

    1. Выберите видеокадр.

    2. На ленте PowerPoint на вкладке Video Tools Playback откройте список Start и выберите Automatically :

      Video Options

    Дополнительные сведения о параметрах воспроизведения видео в режиме слайд-шоу см. В разделе Настройка параметров воспроизведения для видео.

    В PowerPoint 2016 для Mac и более поздних версиях мы рекомендуем использовать файлы .mp4, закодированные с видео H.264 (он же MPEG-4 AVC) и аудио AAC.

    Дополнительные сведения см. В разделе Форматы видео и аудио файлов, поддерживаемые в PowerPoint.

    Чтобы получить правильные инструкции, выберите версию Office, которую вы используете:

    Вставить видео, хранящееся на вашем компьютере

    1. В режиме просмотра Normal выберите слайд, к которому вы хотите добавить видео.

    2. На вкладке Вставить щелкните Видео , затем щелкните Фильм из файла .

    3. В диалоговом окне Выберите фильм выберите файл, который нужно вставить.

      • Если вы хотите встроить видео в слайд, просто нажмите Вставить .

      • Если вы хотите поместить ссылку на видео на слайд, щелкните Параметры в нижнем левом углу диалогового окна, затем выберите поле Ссылка на файл , а затем щелкните Вставить .

    После того, как вы добавили видео в свою презентацию, вы можете добавить эффекты и выбрать, будет ли видео воспроизводиться автоматически или при нажатии.

    Совет: Начиная с PowerPoint 2016 для Mac, вы можете воспроизводить видео с несколькими звуковыми дорожками. Также поддерживаются скрытые титры и субтитры, встроенные в видеофайлы. Дополнительные сведения см. В разделе «Сделайте презентации PowerPoint доступными».

    Ссылка на файл фильма с вашего компьютера в PowerPoint 2011 для Mac

    1. В меню Просмотр щелкните Нормальный .

    2. В верхней части панели навигации щелкните Слайды
      Slides tab
      вкладку, а затем щелкните слайд. В зависимости от ширины панели навигации вы увидите значок
      Slides named tab
      а также
      Outline named tab
      именованные вкладки или Slides
      Slides tab
      и Наброски
      Outline tab
      вкладки значков.

    3. На вкладке Home в разделе Insert щелкните Media , а затем щелкните Movie from File .

      Home tab, Insert group

    4. Щелкните нужный файл фильма и установите флажок Ссылка на файл .

    5. Щелкните Вставить .

      • Если вы отправляете презентацию другим людям, обязательно включите файл фильма, связанный с презентацией; в противном случае фильм не будет воспроизводиться во время слайд-шоу.

      • Чтобы воспроизвести фильм, не ища его на компьютере, поместите связанный файл фильма в ту же папку, что и презентация.

    Вставить фильм в PowerPoint 2011 для Mac

    1. В меню Просмотр щелкните Нормальный .

    2. В верхней части панели навигации щелкните Слайды
      Slides tab
      вкладку, а затем щелкните слайд. В зависимости от ширины области навигации вы увидите значок
      Slides named tab
      а также
      Outline named tab
      именованные вкладки или Slides
      Slides tab
      и Наброски
      Outline tab
      вкладки значков.

    3. Выполните одно из следующих действий:

      С

      по

      Сделай это

      Вставить фильм из файла

      На вкладке Home в разделе Insert щелкните Media , а затем щелкните Movie from File .

      Home tab, Insert group

      Выберите файл фильма и нажмите Вставить .

      Вставьте фильм из папки «Фильмы», iMovie, iTunes или Photo Booth.

      На вкладке Home в разделе Insert щелкните Media , а затем щелкните Movie Browser .

      Home tab, Insert group

      Во всплывающем меню щелкните iMovie , Movies , Photo Booth или iTunes , а затем щелкните фильм и перетащите его на слайд.

      Photo Booth и iTunes появляются, если у вас есть фотографии в папке Photo Booth или iTunes.

    .