Просмотров: 26581
Дата последнего изменения: 10.11.2023
Сложность урока:
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();
});
