Выберите меню «Вставка» > «HTML» > «Flash-видео».
Последнее обновление
25 сент. 2023 г.
Узнайте, как встраивать видео в веб-страницы и вставлять файлы FLV в Dreamweaver.
Встраивание видео в веб-страницы (HTML5)
HTML5 поддерживает теги для видео и звука, позволяющие пользователям воспроизводить видео- и аудиофайлы в браузере без помощи внешних подключаемых модулей или проигрывателей. Dreamweaver поддерживает подсказки по коду при добавлении тегов для видео и звука.
В представлении «Интерактивный просмотр» видео обрабатывается и дается предварительный просмотр видеофайла, встраиваемого в веб-страницу.
Примечание
Хотя в веб-страницу можно встраивать любое видео, в представлении «Интерактивный просмотр» не всегда обрабатываются все видеофайлы. В Dreamweaver теги для звука и видео поддерживаются с помощью подключаемого модуля Apple QuickTime. В операционной системе Windows веб-страница не обработает медиаконтент, если подключаемый модуль Apple QuickTime не установлен.
Чтобы узнать, как вставлять видео HTML5, см. раздел Добавление видео HTML5 в Dreamweaver.
Вставка файлов FLV
Вставка файлов FLV
Вы можете легко добавить FLV-видео на свои веб-страницы без использования средства разработки Flash.Для этого потребуется готовый файл FLV.
Dreamweaver вставляет SWF-компонент, который отображает FLV-файл; при просмотре в браузере этот компонент отображает выбранный FLV-файл, а также набор элементов управления воспроизведением.
Dreamweaver предоставляет следующие варианты доставки FLV-видео посетителям вашего сайта:
Видео с последовательной загрузкой
Загружает FLV-файл на жесткий диск посетителя сайта и затем воспроизводит его. Однако в отличие от традиционных методов доставки видео «загрузить и воспроизвести», постепенная загрузка позволяет видеофайлу начать воспроизведение до завершения загрузки.
Потоковое видео
Содержимое видео потоком передается по сети и начинает воспроизводиться на веб-странице после быстрого заполнения буфера, который обеспечивает плавность воспроизведения. Для использования потокового видео на веб-странице необходим доступ к серверу Adobe® Flash® Media Server.
Для использования в Dreamweaver необходим готовый файл FLV. Можно вставлять видеофайлы, созданные с помощью двух видов кодеков (технологий компрессии и декомпрессии): Sorenson Squeeze и On2.
Как и для файлов SWF, при вставке файла FLV Dreamweaver вставляет код, который проверяет наличие у пользователя версии проигрывателя Flash Player, необходимой для воспроизведения видео. Если у пользователя нет подходящей версии, то на страницу выводится альтернативное содержимое, предлагающее пользователю загрузить последнюю версию Flash Player.
Примечание
Для просмотра файлов FLV у пользователя должен быть установлен проигрыватель Flash Player версии 8 или выше. Если пользователь не имеет подходящей версии проигрывателя Flash Player, но при этом установлена версия Flash Player 6.0 r65 или выше, то в браузере вместо альтернативного содержимого отображается предложение выполнить экспресс-установку Flash Player. Если пользователь отказывается от экспресс-установки, то на странице отображается альтернативное содержимое.
Для получения дополнительной информации о работе с видео посетите Центр видеотехнологий на веб-странице www.adobe.com/go/flv_devcenter.
Вставка файла FLV
В диалоговом окне «Вставить FLV» выберите «Постепенная загрузка»
или «Потоковое видео» из всплывающего меню «Тип видео».
Заполните остальные параметры диалогового окна и нажмите
«ОК».
Примечание
Microsoft Internet Information Server (IIS) не обрабатывает вложенные теги объектов. Для ASP-страниц Dreamweaver использует вложенный код object/embed вместо вложенного кода object при вставке SWF- или FLV-файлов.
Настройка параметров для видео с постепенной загрузкой
Диалоговое окно «Вставить FLV» позволяет настроить параметры для доставки FLV-файла с постепенной загрузкой, вставленного на веб-страницу.
Выберите пункт меню «Вставка» > «HTML» > «Flash-видео» (или щелкните значок «Flash-видео» в категории «HTML» на панели «Вставка»).
В диалоговом окне «Вставить FLV» выберите «Видео
с постепенной загрузкой» в меню «Тип видео».
Укажите следующие параметры:
URL-адрес
Задает относительный или абсолютный путь к FLV-файлу. Чтобы указать относительный путь (например, mypath/myvideo.flv), нажмите кнопку «Обзор», перейдите к FLV-файлу и выберите его. Чтобы указать абсолютный путь, введите URL (например, http://www.example.com/myvideo.flv) FLV-файла.
Оболочка
Определяет внешний вид компонента видео. Предварительный просмотр выбранной обложки появляется под всплывающим меню «Обложка».
Ширина
Ширина FLV-файла в пикселях. Dreamweaver автоматически определяет ширину FLV-файла и отображает данные в этом поле.
Высота
Высота FLV-файла в пикселях. Dreamweaver автоматически оптимизирует высоту FLV-файла и отображает данные в этом поле.
Примечание
Параметр «Всего с оболочкой» означает ширину и высоту файла FLV вместе с шириной и высотой выбранной оболочки.
Ограничение
Сохраняет одинаковые пропорции между шириной и высотой видеокомпонента.Этот параметр выбран по умолчанию.
Автоматический режим
Указывает, воспроизводить ли видео при открытии веб-страницы.
Автоматическая перемотка
Указывает, возвращается ли элемент управления воспроизведением в начальное положение после завершения воспроизведения видео.
Нажмите «ОК», чтобы закрыть диалоговое окно и добавить FLV-файл
на вашу веб-страницу.
Команда «Вставить FLV» создает SWF-файл видеопроигрывателя и SWF-файл обложки, которые используются для отображения видеоконтента на веб-странице. (Чтобы увидеть новые файлы, возможно, потребуется нажать кнопку «Обновить» на панели «Файлы».) Эти файлы сохраняются в том же каталоге, что и HTML-файл, к которому вы добавляете видеоконтент. Когда вы загружаете HTML-страницу, содержащую FLV-файл, Dreamweaver загружает эти файлы как зависимые файлы (если вы нажмете «Да» в диалоговом окне «Поместить зависимые файлы»).
Задание параметров потокового видео
Диалоговое окно «Вставить FLV» позволяет настроить параметры для потоковой загрузки FLV-файла, вставленного на веб-страницу.
Выберите пункт меню «Вставка» > «HTML» > «Flash-видео» (или щелкните значок «Flash-видео» в категории «HTML» на панели «Вставка»).
Выберите во всплывающем меню «Тип видео» пункт «Потоковое видео».
URI сервера
Указывает имя сервера, имя приложения и имя экземпляра в форме rtmp://www.example.com/app_name/instance_name.
Имя потока
Задает имя FLV-файла, который требуется воспроизвести (например, myvideo.flv). Расширение .flv указывать не обязательно.
Оболочка
Определяет внешний вид компонента видео. Предварительный просмотр выбранной оболочки появляется под выпадающим меню «Оболочка».
Ширина
Ширина FLV-файла в пикселях. Dreamweaver определяет ширину FLV-файла и автоматически заполняет соответствующие данные в этом поле.
Высота
Высота FLV-файла в пикселях. Dreamweaver определяет высоту FLV-файла и автоматически заполняет соответствующие данные в пикселях в этом поле.
Примечание
Параметр «Всего с оболочкой» означает ширину и высоту файла FLV вместе с шириной и высотой выбранной оболочки.
Ограничение
Сохраняются те же пропорции высоты и ширины компонента видео. Этот параметр выбран по умолчанию.
Канал активного видео
Определяет, является ли видеосодержимое активным. Если выбран вариант «Канал активного видео», Flash Player воспроизводит видеопоток, передаваемый с сервера Flash® Media Server. Имя канала активного видео указывается в текстовом поле «Имя потока».
Примечание
Чтобы включить «Канал активного видео», необходимо выбрать один из вариантов оболочки «Ореола» из поля «Оболочка». При выборе параметра «Канал активного видео» на оболочке компонента отображается только элемент управления громкостью, так как активным видеопотоком управлять невозможно. Кроме того, параметры «Автоматический режим» и «Автоматическая перемотка» в этом режиме не работают.
Автоматический режим
Определяет, следует ли воспроизводить видео при открытии веб-страницы.
Автоматическая перемотка
Определяет, следует ли возвращать элемент управления воспроизведением в начальное положение после завершения воспроизведения видео.
Буферное время
Задает время буферизации в секундах, необходимое перед началом воспроизведения видео. Время буферизации по умолчанию установлено на 0, чтобы видео начинало воспроизводиться сразу после нажатия кнопки «Воспроизвести». (Если выбран параметр «Автовоспроизведение», видео начинает воспроизводиться сразу после установки соединения с сервером.) Возможно, потребуется установить время буферизации при доставке видео с битрейтом выше скорости соединения посетителя сайта или когда интернет-трафик может вызвать проблемы с пропускной способностью или подключением. Например, чтобы отправить 15 секунд видео на веб-страницу перед тем, как веб-страница начнет воспроизводить видео, установите время буферизации на 15.
Нажмите «OK», чтобы закрыть диалоговое окно и добавить FLV-файл
на веб-страницу.
Команда «Вставить FLV» создает SWF-файл видеоплеера и SWF-файл скина, которые используются для отображения видео на веб-странице. Команда также создает файл main.asc, который необходимо загрузить на Flash Media Server. (Чтобы увидеть новые файлы, вам может потребоваться нажать кнопку «Обновить» на панели «Файлы».)Эти файлы сохраняются в том же каталоге, что и HTML-файл, в который вы добавляете видеоконтент. При загрузке HTML-страницы, содержащей FLV-файл, не забудьте загрузить SWF-файлы на ваш веб-сервер, а файл main.asc на ваш Flash Media Server.
Примечание
Если у вас уже есть файл main.asc на сервере, проконсультируйтесь с администратором сервера перед загрузкой файла main.asc, созданного командой «Вставить FLV».
Вы можете легко загрузить все необходимые медиафайлы, выбрав заполнитель видеокомпонента в окне документа Dreamweaver и нажав кнопку «Загрузить медиафайлы» в инспекторе свойств («Окно» > «Свойства»).Чтобы увидеть список необходимых файлов, нажмите «Показать необходимые файлы».
Примечание
Кнопка «Загрузить медиафайлы» не загружает HTML-файл, который содержит видеоконтент.
Изменение сведений о загрузке проигрывателя Flash Player
При вставке файла FLV на страницу Dreamweaver вставляет код, который определяет наличие у пользователя правильной версии проигрывателя Flash Player. Если она отсутствует, то на странице будет отображено альтернативное содержимое, предлагающее пользователю загрузить последнюю версию проигрывателя. Это содержимое можно в любой момент изменить.
Эта процедура также применима и к файлам SWF.
Примечание
Если у пользователя нет требуемой версии, но имеется проигрыватель версии Flash Player 6.0 r65 или выше, то браузер предложит выполнить экспресс-установку Flash Player. Если пользователь отказывается от экспресс-установки, то на странице отображается альтернативное содержимое.
В
представлении «Дизайн» окна документа выберите SWF-файл или FLV-файл.
Щелкните значок глаза на вкладке файла SWF или FLV.
Примечание
Вы также можете нажать CTRL+] для переключения в режим просмотра альтернативного контента.Чтобы вернуться к представлению SWF/FLV, нажимайте Ctrl+[ до тех пор, пока не будет выбран весь альтернативный контент.Затем нажмите CTRL+[ еще раз.
Редактируйте контент так же, как вы редактировали бы любой другой контент
в Dreamweaver.
Примечание
Вы не можете добавлять SWF-файлы или FLV-файлы как альтернативный контент.
Нажмите значок глаза еще раз, чтобы вернуться к просмотру
файла SWF или FLV.
Устранение неполадок файлов FLV
В этом разделе подробно описаны наиболее распространенные причины проблем с файлами FLV.
Проблемы с просмотром, вызванные отсутствием связанных файлов
Код, сгенерированный Dreamweaver CS4 и более поздними версиями, использует четыре зависимых файла, отличных от самого файла FLV:
swfobject_modified.js;
expressInstall.swf;
FLVPlayer_Progressive.swf;
файл обложки (например, Clear_Skin_1.swf).
Обратите внимание, что в Dreamweaver CS4 и более поздних версиях есть еще два зависимых файла по сравнению с Dreamweaver CS3.
Первые два из этих файлов (swfobject_modified.js и expressInstall.swf) устанавливаются в папку Scripts, которую Dreamweaver создает в корне вашего сайта, если она еще не существует.
Вторые два файла (FLVPlayer_Progressive.swf и файл обложки) устанавливаются в ту же папку, что и страница, в которую встроен FLV.Файл обложки содержит элементы управления для FLV, а его имя зависит от обложки, выбранной в параметрах, описанных в справке Dreamweaver.Например, если вы выбираете Clear Skin, файл называется Clear_Skin_1.swf.
Все четыре зависимых файла ДОЛЖНЫ быть загружены на ваш удаленный сервер, чтобы FLV отображался корректно.
Если забыть загрузить эти файлы, это является наиболее частой причиной неправильной работы файлов FLV на веб-странице.Если один из файлов отсутствует, вы можете увидеть «белое поле» на странице.
Чтобы убедиться, что вы загрузили все зависимые файлы, используйте панель «Файлы» Dreamweaver для загрузки страницы, на которой появляется FLV.При загрузке страницы Dreamweaver спрашивает, хотите ли вы загрузить зависимые файлы (если вы не отключили этот параметр).Нажмите «Да», чтобы загрузить зависимые файлы.
Проблемы с просмотром при локальном предварительном просмотре страниц
Из-за обновлений безопасности в Dreamweaver CS4 вы не можете использовать команду «Предварительный просмотр в браузере» для тестирования страницы со встроенным FLV, если не определите локальный тестовый сервер в определении сайта Dreamweaver и не будете использовать тестовый сервер для предварительного просмотра страницы.
Обычно тестовый сервер требуется только при разработке страниц с ASP, ColdFusion или PHP (см. Настройка компьютера для разработки приложений).Если вы создаете веб-сайты, использующие только HTML, и не определили тестовый сервер, нажатие F12 (Windows) Opt+F12 (Macintosh) приводит к беспорядочному отображению элементов управления обложки на экране.Решением является либо настройка тестового сервера и использование его для предварительного просмотра вашей страницы, либо загрузка файлов на удаленный сервер и их просмотр там.
Примечание
Возможно, что настройки безопасности также могут быть причиной невозможности предварительного просмотра локального контента FLV, но Adobe не смогла подтвердить это.Вы можете изменить настройки безопасности и посмотреть, что получится. Дополнительные сведения об изменении параметров безопасности см. в технической заметке 117502.
Другие возможные причины проблем с файлами FLV
Если возникли трудности с локальным просмотром, удостоверьтесь, что в меню «Правка» > «Настройки» > «Просмотр в реальном времени» снят флажок «Просмотр с использованием временного файла».
Удостоверьтесь, что установлен подключаемый модуль FlashPlayer последней версии
Старайтесь не перемещать папки и файлы вне Dreamweaver. При перемещении файлов и папок вне Dreamweaver нельзя гарантировать, что пути на связанные файлы FLV будут корректными.
Можно временно заменить проблемный файл FLV заведомо работающим файлом. Если замена файла сработала, значит проблема в исходном файле FLV, а не в браузере или компьютере.
Изменение и удаление компонента FLV
Чтобы изменить настройки видео для веб-страницы, выберите заполнитель компонента видео в окне документа Dreamweaver и воспользуйтесь инспектором свойств. Еще одним методом является удаление и повторная вставка компонента видео с помощью меню «Вставка» > «HTML» > «Flash-видео».
Изменение компонента FLV
Выберите заполнитель видеокомпонента
в окне документа Dreamweaver, нажав
значок FLV в центре заполнителя.
Откройте инспектор свойств («Окно» > «Свойства»)
и внесите ваши изменения.
Примечание
Вы не можете изменить типы видео (например, с прогрессивной загрузки на потоковое) с помощью инспектора свойств.Чтобы изменить тип видео, удалите компонент FLV и вставьте его заново, выбрав «Вставка» > «Медиа» > «FLV».
Удаление компонента FLV
Выберите заполнитель компонента FLV
в окне документа Dreamweaver и нажмите
DELETE.
Добавление видео (другие форматы)
О том, как добавлять видео не только в FLV-файлах, см. в разделе Добавление видео (кроме FLV).
Возможно, вам также будет интересно, как вставлять содержимое подключаемого модуля в Dreamweaver для воспроизведения файлов формата MP3 или видео QuickTime на сайте Dreamweaver.
Связанные материалы
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
