play local video

Webix JS
1

Здравствуйте.
Как осуществить просмотр видео файла в компоненте video с локального компьютера? Вернее даже так - как подружить компонент FileDualog с компонентом Video?
Для HTML5 решение такое:
http://jsfiddle.net/dsbonev/cCCZ2/
Без особых сложностей можно такой же трюк проделать в Webix?

2

Да. Uploader позволяет получить доступ к данным файла, которые можно передать video контролу

http://webix.com/snippet/99816f36

3

Супер! Спасибо!
Сейчас пытаюсь сообразить, как после просмотра загрузить просмотренный файл на сервер. Пока не подсказывайте ))) Самому интересно. Не справлюсь - попрошу помощи.
Еще раз спасибо!

4

How would you do the same for the playback of an audio file only (not using the video player but an audio player)?

5

Вопрос с загрузкой разрешился достаточно просто.

В uploader добавляем:

autosend: false, link:“list_video”, upload:“path_to_upload_server_script”

Кстати, без “autosend: false” аплоадер пытается таки грузить файл.

Добавляем

{ view:“list”, id:“list_video”, type:“uploader”, autoheight:true, borderless:true }

{ view:“button”, label:“Save”, type:“form”, click:sendFile }

Прописываем

function sendFile(){

$$("file_uploader").send(function(response){

    if(response)

    	webix.message(response.status);

});

}

И готово.

http://webix.com/snippet/f20b554d

6

How would you do the same for the playback of an audio file

There is no ready to use “audio” view, but it rather easy to use native HTML audio tag. Check the updated sample.

http://webix.com/snippet/f6c5ee7d

7

Максим, как поймать событие добавления нового файла в list?

onAfterAdd - не работает…

http://webix.com/snippet/273b56d4

8

Технически новые записи не добавляются в List
Они добавляются во внутреннюю колекцию files с которой и синхронизирован лист.

Можно использовать onAfterFileAdd событие uploader компоненты, или использовать onAfterAdd событие коллекции uploader.files

http://webix.com/snippet/02e81b5b

9

То есть организовать переключение проигрывания файлов по клику в list не получится, т.к. будет инициировано добавление нового файла в коллекцию?

10

Получилось!!!

11

Добавляем в list

onItemClick: function(id, e, node){
		var obj = this.data.pull[id];
		var type = obj.file.type;
		var video = $$("v1").getVideo();

		if (video.canPlayType(type)){
			video.setAttribute("autoplay", "1");
			video.src = URL.createObjectURL(obj.file);
		} else
			 webix.message("Not supported files type: "+type);
}