close

Как использовать JW Player: встраивание и настройка видео

Что такое JW Player?

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

Как получить библиотеку JW Player

У вас есть два варианта получения библиотеки JW Player: использование CDN или загрузка на локальный хостинг.

1. Использование CDN(рекомендуется)

Использование CDN(сети доставки контента) — самый простой и быстрый способ интеграции JW Player. CDN ускоряет загрузку файлов, поскольку они размещаются на нескольких серверах по всему миру.

Чтобы использовать CDN, просто добавьте следующую строку кода в <head>раздел вашего сайта. Примечание: вам необходимо заменить <YOUR_LICENSE_KEY>её вашим реальным лицензионным ключом.

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. Загрузка и локальное размещение

Если вам нужен полный контроль над файлами и вы не хотите зависеть от сетевого соединения, вы можете загрузить JW Player и разместить его на своем собственном сервере.

  1. Перейдите на официальный сайт JW Player.

  2. Зарегистрируйтесь или войдите в свою учетную запись(доступна бесплатная пробная версия).

  3. Найдите и загрузите библиотеку из панели управления вашей учетной записью.

  4. Разархивируйте файл и загрузите папку на свой сервер.

Подробное руководство по использованию JW Player

Получив библиотеку, вы можете приступить к встраиванию JW Player на свой веб-сайт.

1. Создайте HTML-файл и встройте JW Player.

Вот полный пример HTML. Если вы используете CDN, замените <script src="...">строку кодом CDN, указанным выше. Если вы используете загруженную библиотеку, убедитесь, что путь к jwplayer.jsфайлу указан правильно.

<!DOCTYPE html>  
<html>  
<head>  
    <title>JW Player Example</title>  
    <script src="js/jwplayer.js"></script>  
</head>  
<body>  
  
    <h1>How to Use JW Player</h1>  
  
    <div id="video-container"></div>  
  
    <script>  
        // Initialize and configure JW Player  
        jwplayer("video-container").setup({  
            // The path to your video file  
            "file": "videos/my-video.mp4",  
              
            // The path to your video's thumbnail image  
            "image": "images/my-video-thumbnail.jpg",  
              
            // The dimensions of the player  
            "width": "640",  
            "height": "360",  
              
            // Autoplay the video when the page loads  
            "autostart": false,  
              
            // Show the player controls  
            "controls": true  
        });  
    </script>  
  
</body>  
</html>

2. Подробное объяснение Кодекса

  • <script src="...">: Эта строка связывает библиотеку JW Player с вашим веб-сайтом.

  • <div id="video-container"></div>: Здесь будет отображаться видео. Вы можете указать любое idимя, но убедитесь, что оно совпадает с именем, используемым в jwplayer()функции.

  • jwplayer("video-container").setup({...}): Здесь вы инициализируете и настраиваете JW Player.

    • "file": Путь к вашему видеофайлу.

    • "image": Путь к изображению миниатюры видео.

    • "width"и "height": задаёт размеры плеера. Также можно использовать "100%"для адаптивного плеера.

    • "autostart": Установите, trueесли хотите, чтобы видео воспроизводилось автоматически.

    • "controls": Установите, falseесли вы хотите скрыть элементы управления проигрывателем.

С помощью этого подробного руководства вы сможете легко начать использовать JW Player для отображения видео на своем веб-сайте.