Интерактивное видео — это очень крутая фишка редактора Camtasia Studio. Но вставить его на сайт так, как мы вставляем обычное видео, не получится, потому что вся интерактивность обеспечивается специальным смарт плеером от самой Камтазии.
В этой статье не описано, как создать интерактивное видео в Camtasia Studio, а рассмотрены способы его размещения в интернете, чтобы видео стало общедоступным для аудитории и сохранило при этом свою интерактивность.
Смарт плеер при выводе готового интерактивного видео упаковывается в отдельную папку, в которой находится группа файлов.
Все эти файлы должны находиться в одной директории (папке) для запуска воспроизведения.
Для запуска плеера нужно кликнуть по файлу с названием …_player.html. В нашем частном случае таким кликом будет служить клик по ссылке на данный файл.
Остается только найти место, куда загрузить папку со всеми элементами интерактивного видео (плеера).
Загрузка смарт плеера на сайт
Загрузка интерактивного видео непосредственно в WordPress
Загрузить в библиотеку медиа штатным способом сразу всю папку с файлами или файлы по отдельности, кроме изображений, у вас не получится. WP просто не разрешит этого сделать:
Остается единственный способ — добавить файлы непосредственно на самом хостинге.
Это можно сделать минимум тремя способами: через FTP клиент, например, FileZilla, через специальный плагин, например, File Manager, через панель управления сайтом непосредственно на самом хостинге.
Я предпочитаю работать по третьему варианту. Благо, что сейчас на хостинге Timeweb, которым я пользуюсь, процесс загрузки хорошо организован.
Заходите в панель управления, выбираете раздел Файловый менеджер, открываете папку своего сайта, находите в ней папку Public_html, открываете ее и далее «путешествуете» по папкам, как представлено на картинке ниже.
Я для показа в этой статье загрузил папку с плеером в папку текущего месяца этого года:
prostodelaytak.ru > public_html > wp-content > uploads > 2025 > 10
После открытия в файловом менеджере конечной папки (у меня она обозначена цифрой 10) просто перетащите в нее всю папку с плеером.
Если открыть загруженную папку, то в ней будут находиться все нужные файлы, а в общий путь к плееру добавиться еще пара записей:
prostodelaytak.ru > public_html > wp-content > uploads > 2025 > 10 > Demo-999 > Demo-999_player.html
По сути, это и есть ссылка на плеер, но чтобы не набирать ее вручную, я предлагаю «ленивый» способ.
Откройте любое изображение в библиотеке медиафайлов и скопируйте ссылку на него.
Замените в любом редакторе конец ссылки с названием картинки на название папки с плеером и через / добавьте название плеера.
Созданная ссылка запускает интерактивное видео (смарт плеер) при размещении ее в любом месте, например, в Word или в ВКонтакте. Видео при этом проигрывается в отдельном окне браузера.
Если вы планируете создать на основе интерактивных видео, например, обучающий курс или несколько курсов, то есть смысл создать в папке Upload новую папку с оригинальным названием и загружать все видео в нее.
Это позволит легко управлять (загружать, менять или удалять) созданные курсы или отдельные видео в них.
Собственно в таком размещении смарт плеера нет ничего сложного, но есть один нюанс.
Если у вас хороший трафик на сайт, а не 20-30 человек, то есть угроза, что большое количество одновременных просмотров зрителями, создадут нагрузку на сервер хостинга и сайт начнет тормозить, а у провайдера появятся к вам вопросы.
Чтобы этого избежать, можно посоветоваться с хостинг-провайдером и выбрать более подходящий, соответственно, более дорогой тариф.
Если хотите быть независимыми на своем сайте, то размещайте свои интерактивные видео в облачном хранилище, а на сайте используйте только ссылки.
Загрузка интерактивного видео в облако
Абы какое облако для размещения смарт плеера не подойдет!
Нужно облако, которое позволяет представлять файлы, как HTML проекты.
Ссылка на плеер, созданная в распространенных облаках, например, от Mail, Yandex, Google и т.п., вместо запуска плеера открывает его код. Никакого воспроизведения не будет!
Не верите? Вот вам ссылка на смарт плеер, загруженный в моё майловское облако.
В идеале, конечно, лучше использовать облако самой TechSmith, но это требует действующей лицензии на Camtasia Studio.
Подойдет Amazon S3, но мне больше понравилось облако PCloud.
К сожалению и эти решения требуют оплаты, но она гораздо меньше стоимости лицензии, которую, кстати, нельзя приобрести при использовании старых версий Camtasia Studio, а новые версии редактора могут оказаться не по зубам железу вашего компьютера.
Этот вариант хорош, если у вас нет сайта, а вы планируете размещать ссылки, например, в PDF документе.
В облаке PCloud можно зарегистрироваться, как по почте, так и через Google аккаунт. Бесплатная регистрация дает вам 10Гб свободного места, однако возможности Web представления платные.
В личном кабинете вверху вы увидите кнопки разного цвета. Кликните по кнопке Общая папка. Вам откроется окно с предложением оплатить доступ.
Далее открывается страница с тарифами. Минимальный месячный тариф стоит около $5.
Если вы перейдете на страницу выбора тарифа и подождете 2-3 минуты, то облако предложит вам скидку 10% от стоимости выбираемого тарифа.
Дождитесь, выберите тариф и оплачивайте!
Когда речь идет о продажах через ссылки в интерактивных видео, вопрос цены уходит на второй план.
Например, представьте себе, что вы владеете Гостевым домом и гости вашего сайта могут из роликов с видеообзорами номеров сразу переходить к оплате. Продажу одежды, услуг, обучающих курсов…, всё это можно делать через ссылки в интерактивных видео.
А если уж по честному, то облако майл 512Гб стоит 449 рублей. Оно даже дороже!
Сразу после оплаты в перечне доступных папок появится папка Public Folder (Общая папка), открываем ее и можно приступать к загрузке плеера с интерактивным видео.
Загружать можно, как через кнопку «Добавить», так и обычным перетаскиванием. После загрузки открываем папку, наводим курсор на строку с плеером, жмем на значок копирования ссылки и копируем прямую ссылку.
Все описанные выше действия, вы можете просмотреть вот в этом моем видео на Ютубе
Теперь, когда у вас есть ссылка на смарт плеер, самое время разместить ее на сайте!
Оформление плеера на сайте
Плеер встраивается через специальный HTML-элемент <iframe> (inline frame).
iframe позволяет встраивать один HTML-документ в другой.
Вариант 1 Чистое размещение iframe (код по умолчанию)
Код iframe в общем виде выглядит вот так:
<iframe src="ссылка_на_смарт_плеер" width="600" height="337" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen" ></iframe>В коде iframe обязательно указываются значения ширины и высоты.
По умолчанию <iframe> с плеером Camtasia Studio или без него выравнивается по левому краю страницы (родительского элемента).
Недостаток этого способа заключается именно в выравнивании iframe по левому краю.
Вариант 2 Размещение iframe по центру
Небольшое добавление к коду позволяет сделать выравнивание посередине. Для этого код iframe помещается в контейнер div, который собственно и выравнивает iframe внутри себя по центру.
<div class="iframe-container" style="display: grid; place-items: center;"><iframe src="ссылка_на_смарт_плеер" width="600" height="337" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen" ></iframe></div>Можно задать выравнивание iframe через непосредственное указание соответствующих параметров в его коде, но мне нравится способ именно через div.
Вариант 3 Размещение плеера в адаптивном iframe
В этом случае плеер будет занимать всю доступную ширину на странице на любом устройстве.
Способ требует помимо кода iframe добавления небольшого скрипта в шапку сайта. Для его быстрого добавления есть специальные плагины, например, «Head, Footer and Post Injections», который я использую в своей работе.
Я не буду расписывать здесь подробно этот способ, а покажу только результат. Если вы читаете эту статью на компьютере, то вы непременно увидите разницу между этими тремя способами.
Код iframe и код скрипта возьмите вот здесь на сайте автора этой идеи.
В оригинале кода автора указанную ссылку на видео с Ютуба нужно заменить на свою!
Кстати, вот в этой его статье, подробно расписано, как сделать так, чтобы вставленный скрипт работал не на всем сайте, а только на конкретной его странице.
Это специально для тех, кто переживает за скорость загрузки сайта.
Вариант 4 Рабоче-крестьянский способ
Способ для тех, кто ни в какую не желает или боится работать с кодом.
Правда и в этом случае придется поработать: добавить на титульную картинку кнопку воспроизведения, чтобы читатель понимал, что перед ним видео.
После загрузки картинки непосредственно уже на страницу сайта, добавьте к ней ссылку на смарт плеер. В свойствах ссылки можно выбрать, как она откроется (в этом или в новом окне).
При клике по картинке видео будет воспроизводиться на весь экран.
При выборе воспроизведения непосредственно на странице продумайте, как вы будете возвращать зрителя после просмотра обратно на страницу сайта, если это, конечно, необходимо.
Это на случай, если кто-то не знает предназначение кнопки Escape на клавиатуре.
Для возврата к странице сайта можно использовать якорные ссылки, размещенные в самом видео, чтобы возвращать читателя после просмотра в конкретное место на странице сайта.
Вот собственно и вся тайна размещения смарт плеера Camtasia Studio в Интернете. Надеюсь, вы воспользуетесь этим знанием. Тем более, что 4-й вариант оформления ссылки, можно с успехом применять не только на сайте, но и, например, в PDF документах.
Если остались вопросы, задавайте их в комментариях. Творческих вам успехов и до встречи в новых статьях.
С уважением, Сергей Почечуев
