Video

Справочник по API

Обзор

Webix Video - это UI компонент для встраивания видеоплеера в приложение. Компонент основан на HTML 5 video tag и поддерживает все MP4, WebM и Ogg.

Инициализация

Компонент наследуется от Webix view и инициализируется с помощью webix.ui() конструктора.

webix.ui({
    view:"video",
    id:"video1", // используется в дальнейшей работе с компонентом
    src:["data/movie.ogv","data/movie.mp4"]
});

Источник видео определяется свойством src. Свойству можно передать путь к одному или нескольким файлам, которые хранят одну и ту же видеозапись в разных форматах. Если файлов несколько, браузер выберет первый поддерживаемый формат.

Компонент Video может быть инициализирован как внутри HTML контейнера, так и внутри любого компонента, например Webix Window:

webix.ui({
    view:"window",
    head:"My Video",
    body:{
        view:"video",
        src:"..." //or [...]
    }
});

Настройки видеопроигрывателя

controls: false скрывает контролы проигрывателя, true показывает (по умолчанию);
autoplay: true запускает видео после инициализации компонента, false не запускает (по умолчанию).

view:"video",
src:[],
autoplay:true

Related sample: Autoplay

Работа с видео

Воспроизведением видеозаписей можно управлять используя методы и свойства элемента DOM video:

методы play() и pause() для контроля видео;
paused - свойство только для чтения, которое хранит состояние видео.

Чтобы получить объект элемента video, используйте метод getVideo().

Давайте заменим встроенные контролы проигрывателя на простую кнопку:

Related sample: Video API

UI - окно с тулбаром

webix.ui({
    view:"window",
    body:{
        view:"video",
        id: "video1",
        src:".."
        controls: false // убирает встроенные контролы
    },
    head:{
        view:"toolbar", elements:[
            // назначает кнопке функцию, для запуска / останавки видео
            {view: "button", id: "playButton", value: "Play", click: playPause}
        ]
    },
}).show();

Логика

function playPause(){
    // получает объект видео
    var video = $$("video1").getVideo();
 
    // проигрывает видео, если оно на паузе
    if (video.paused){
        video.play();
        $$("playButton").setValue("Pause")
    }
    else{
        // в противном случае, останавливает видео
        video.pause();
        $$("playButton").setValue("Play")
    }
}

В соответствии с состоянием видео, мы изменяем текстовое значение кнопки. Для этого используется метод setValue.

Наверх