Как вставить курс в формате HTML5 на веб-страницу

У вас когда-нибудь была идея показать свой курс, который сделан на ActivePresenter как часть веб-страницы? Если да, то эта статья для вас. Сегодня я покажу, как встроить курс в формате HTML5 на веб-страницу с помощью iframe.

Есть 2 основных этапа для переноса курса ActivePresenter на сайт:

1. Экспортируйте курс в формат HTML5 и загрузите файлы на свой веб-сервер.
2. Получите URL-адрес загруженного курса и вставьте его в код iframe.

Экспорт и загрузка курса в формате HTML5

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

Если хотите узнать больше об экспорте проектов ActivePresenter в HTML5, перейдите по этой ссылке.

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

Использование iframe для встраивания курса в формате HTML5​

Чтобы встроить курс в формате HTML5 на ваш сайт, необходимо использовать iframe (встроенный фрейм). Iframe – это очень простой HTML-код, который используется для отображения содержимого из другого источника на веб-странице. Вот пример строки кода, которую можно использовать для добавления на веб-сайт:

<div style="width:100%; padding-bottom:56.25%; position:relative;">
<iframe src="path/to/ActivePresenter/HTML file" style="position:absolute; top:0px; left:0px; width:100%; height:100%; border: none; overflow: hidden;"></iframe>
</div> 

Атрибут src указывает URL (веб-адрес) страницы встроенного фрейма.

После копирования и вставки строки кода выше на вашу страницу, получите HTTP URL вашего загруженного курса и замените эту часть: «path/to/ActivePresenter/HTML file» на реальное местоположение, например:

<iframe src="https://cdn.atomisystems.com/samples/activepresenter-7/millionaire-quiz-game/tutorial.html"</iframe> 

Как вы уже знаете, внешний тег div в приведенном выше коде со стилем padding-bottom используется для сохранения соотношения сторон содержимого iframe. Вам нужно обновить этот стиль в зависимости от вашего соотношения сторон контента. Перейдите по этой ссылке для получения более подробной информации об инструменте CSS Aspect Ratio Calculator, который поможет вам в этом.

Размеры викторины составляют 1280×720, поэтому padding-bottom должен быть 56,25%.

Вот и все!