Перейти к содержанию

JS-расширение медиаплеера

Примеры работы на js с плеером

Не забываем подключить расширение:

CJSCore::Init(['player']);
Создание и инициализация плеера

Здесь самое важное - передать mime-type для каждого файла. В данном примере плеер будет проходить по всем файлам из списка и проиграет первый, который сможет. Поэтому в списке должен быть один и тот же ролик с разными расширениями.

BX.ready(function()
{
    var player = new BX.Fileman.Player('player_id', {
        sources: [
        {
            src: 'https://dev.1c-bitrix.ru/download/files/video/learning/hermitage.mp4',
            type: 'video/mp4'
        }
        ]
    });
    var playerNode = player.createElement();
    BX('player_node').appendChild(playerNode);
    player.init();
});
Описание параметров плеера
--- --- --- Параметр Тип Описание sources array Массив файлов для проигрывания autostart bool Запускать автоматически или нет hasFlash bool Установить true, если придётся проигрывать *.flv файлы. В этом случае плеер подгрузит swf-файл плеера. playbackRate float От 0 до 3. Скорость проигрывания (работает не всегда). volume float От 0 до 3. Громкость startTime int Время в секундах, с которого надо начать проигрывание onInit function Вызовется сразу после инициализации плеера

После создания получить объект плеера можно через менеджер

var player = BX.Fileman.PlayerManager.getPlayerById('player_id');
Некоторые полезные методы
--- --- Метод Описание player.createElement(); Создает html-ноду и возвращает её. player.isPlaying(); Возвращает true, если плеер сейчас проигрывает что-то. player.pause(); Ставит проигрывание на паузу. player.isEnded(); Возвращает true, если файл был проигран до конца. player.isReady();
Пример создания и инициализации аудио плеера
BX.ready(function()
{   
    var audioPlayer = new BX.Fileman.Player('audio_player_id', {
    isAudio: true,
    sources: [
        {
            src: '/upload/SampleAudio_0.7mb.mp3',
            type: 'audio/mp3'
        }
    ],
    onInit: function(player)
    {
        // следующие три строки нужны, чтобы скрыть кнопку разворачивания на весь экран
        player.vjsPlayer.controlBar.removeChild('timeDivider');
        player.vjsPlayer.controlBar.removeChild('durationDisplay');
        player.vjsPlayer.controlBar.removeChild('fullscreenToggle');
        // это прячет большую кнопку плей
        player.vjsPlayer.hasStarted(true);
    }
    });
    var audioPlayerNode = audioPlayer.createElement();
    BX('audio_player_node').appendChild(audioPlayerNode);
    audioPlayer.init();
});