242  /  359

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

Просмотров: 2956 (Статистика ведётся с 06.02.2017)
Роберт Басыров
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
1
2
3
4
5

Примеры работы на 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 Вызовется сразу после инициализации плеера
lazyload bool Если true - плеер будет инициализироваться только при нахождении на экране пользователя.
skin string Название класса-скина. CSS-файл надо предварительно загрузить самостоятельно.
width int Ширина плеера
height int Высота плеера
isAudio bool Установить true, если плеер нужен для проигрывания аудио.

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

var player = BX.Fileman.PlayerManager.getPlayerById('player_id'); 


Некоторые полезные методы

МетодОписание
player.createElement(); Создает html-ноду и возвращает её.
player.isPlaying(); Возвращает true, если плеер сейчас проигрывает что-то.
player.pause(); Ставит проигрывнаие на паузу.
player.isEnded(); Возвращает true, если файл был проигран до конца.
player.isReady(); Возвращает true, если плеер полностью инициализирован.
player.play(); Запускает проигрывание.
player.setSource({
src: 'path',
type: 'mime-type'
});
Устанавливает источник проигрывания
player.getSource(); Возвращает текущий источник
player.init(); Выполняет инициализацию плеера.
player.mute(status); Включает / выключает звук


Пример создания и инициализации аудио плеера

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();
});


2
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии