Видео на сайте

Меня долгое время интересовал вопрос, появится ли вновь возможность воспроизводить на нашем сайте аудио, видео.

В старом редакторе была такая возможность, я её использовал в своем дневнике и группе.

Сейчас всё, надо закрывать дневник и продолжить на одном из бесплатных сатов. Но вот какой выбрать? Что посоветуете?

Пробую на бесплатном сайте hostinger.ru, даже сделал набросок:

http://remde.esy.es/deutsch/interaktiv/video/lektion_1/l1t...

http://remde.esy.es/deutsch/interaktiv/video/lektion_1/l1t...

На каждое видео два файла форматов .webm и .mp4 (хватит ? )

Хорошо хоть не три файла, но всё равно памяти много требуется и это проблема.

Набросок я сделал прежде всего для проверки на смартфоне.

Но такое простенькое видео наверное можно сделать на canvase. Делает (делал ли) кто-нибудь?

Тогда никакой проблемы с памятью, не нужно кучи файлов итд. Надо подумать.

Ну а сейчас надо составлять программу. С чего начать?

Алгоритм такой:

Кнопками "назад" и "вперед" перемещаемся от одного видео к другому.

Кнопкой "в начало" перемещаемся к первому видео.

Кнопкой "в конец" перемещаемся к последнему видео.

Кнопкой "пуск"/ "пауза" запускаем/останавливаем выбранное видео.

Кнопкой "стоп" возвращаемся к первому видео, и можно что-то там почистить. Пожалй я эту кнопку удалю.

* Панель управления показана ниже видео. На самом деле она находится внизу на видео.

Стоит нажать на любую кнопку, панель через 2-3 секунды становится невидимой.

По окончании воспроизведения через 3-5 секунд она опять становится видимой.

Прикреплённые файлы

#video_1,#video_2,#video_3,#video_4,#video_5,#video_6{

float:left;

border: 2px solid #FF0000;

margin-left: -9999px;

margin-top: -9999px;

}

Все 6 фильмов загружаются сразу, но они не видимы (далеко за экраном)

Вместо фильмов может быть какая-то заставка или даже "нулевой" фильм, ну это неважно.

При нажатии кнопки "Пуск" включается первый фильм. Не только включается, но и "приходит" на экран (становится видимым).

По сути результат такой:

#video_1{

margin-left: 0.5%;

margin-top: 0.5%;

}

При однократном нажатии кнопки "Вперёд" первый фильм скрывается, становится видимым второй фильм:

#video_1{

margin-left: -9999px;

margin-top: -9999px;

}

#video_2{

margin-left: 0.5%;

margin-top: 0.5%;

}

Я не показываю программу, она простая, может потом предоставлю, когда закончу работу.

Вопрос такой, может как-то по-другому работать со слоями-фильмами?

Прикреплённые файлы

Следующая задачка.

В каждую секунду воспроизведения красная полоса должна увеличиваться.

Один из вариантов - это расположить красный див в диве и увеличивать ему ширину в каждую секунду воспроизведения.

Второй вариант - это использовать в качестве фона картинку размером 1px и увеличивать ширину каждую секунду воспроизвеления.

Я набросал примерно для своей задачи:

#schkala{

border: 1px solid #000000;

float: left;

width: 99%;

margin-left: 0.5%;

margin-top: 0.5%;

background: url(img/1px.jpg) repeat-y;

background-size: 50% auto; // это надо заставить делать программу.

text-align: center;

font-size: 110%;

color :#00007f;

}

Кто что предложит? Есть варианты?

Прикреплённые файлы

Практически работа завершена (первый вариант), осталось постепенно пригладить итд.

Но есть проблема. Это относительно долгая загрузка фильмов - я же загружаю их сразу все.

Но я думаю, что найду выход, но это потом, сейчас надо попробовать второй вариант.

ПС

Остановился на втором варианте:

Соединяю фильмы в один общий файл. Собщаю программе временные интервалы а там дело техники.

Я сделал набросок:

http://remde.esy.es/deutsch/interaktiv/video/lektion_1/l1t...

Работать можно уже этими вариантами, а там можно прилизать или что-то переделать.

Проблема, как я уже говорил, это требуется время для загрузки фильмов. Может заствку на это время сделать итд.

Прикреплённые файлы

Video + canvas = волшебство

http://html5doctor.com/video-canvas-magic/

Может кому-то интересно будет эта информация. Всё руки не доходят повторить это, может что-то для себя изменить.

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

http://html5doctor.com/demos/video-canvas-magic/demo1.html

Как сделать скриншот с видео?

Не всегда имеется возможность скачать фильм (для пробы я выбрал именно такой случай). Тогда можно сделать скриншот с видео.

Есть различные программы для этого. У меня простенькая программа Movavi Screen Capture studio 4

Видео, с которого я буду делать скриншот, имеет размеры: Breite:165 Höhe 127

Меня это не устраивает, задаю размеры: Breite:226 Höhe 127. На рисунке я выделил этот прямоугольник красным цветом.

Можно взять и другие размеры, например 320 на 180. На рисунке я выделил этот прямоугольник зелённым цветом.

В этом случае появится возможность почистить(изменить) рамку везде по краям и не только это.

Этот вариант требует дополнительной работы - еще придётся делать скриншот. Но тем не менее я выбираю этот вариант.

Прикреплённые файлы

Получается промежуточный вариант видео. Оно загружено в один из дивов и воспроизводится.

А сейчас можно снять скриншот окончательного видео, но прежде надо вырезать всё лишнее, задать фон, сделать надписи или ещё что-то.

Но это не сложно - делаются в диве 4 дива: oben, unten, links, rechts, которые обрамляют видео.

Если это одноразовая работа, то настраивать размеры и координаты этих 4-х дивов можно ручками,

Ну а если несколько, то можно сделать прогу: Перемещение дивов мышью.

Если я буду это делать, то наверное эту кухню предоставлю здесь. Хотя это не сложно и выходит за рамки темы.

Прикреплённые файлы

http://remde.esy.es/deutsch/interaktiv/video/lektion_1/l23...

Ну вот ещё одну работу в виде пробы сделал.

Ну а главное конечно впереди - это создание видео на Canvas.

Прикреплённые файлы

http://remde.esy.es/deutsch/interaktiv/video/lektion_1/can...

Попробовал поработать на канвасе. Меня интересовало прежде всего, можно ли его сделать резиновым.

Также посмотрел как загружаются изображения, как со звуком итд

На бегущую строку не хватает времени.

Стоит ли использовать канвас на сайте вместо обычного видео? Я думаю, что увлекаться им сильно не надо.

А вот использовать его при изготовлении видео можно. Ну посмотрим дальше.

Делаю набросок, может дальше продолжу с ним работать, там прилизывать куча.

Дальше я хочу попробовать загружать видео на канвас.

Прикреплённые файлы

http://remde.esy.es/deutsch/interaktiv/video/lektion_1/can...

Создание видео с бегущей строкой.

Хотя и не требуется иметь видео в интернете с бегущей строкой, решил попробовать.

В итоге имею пробную работу, которой недоволен.

Но я ничего не могу поделать - нужны программы.

Я лишь готовил вначале бегущую строку на экран, потом снимал скриншот и всё.

Прикреплённые файлы

Переходи на юкоз,сайты на лицо http://kinogo-serial.ru/, сайт можно сделать за 5 минут. там все пашит.

Переходи на юкоз,сайты на лицо http://kinogo-serial.ru/, сайт можно сделать за 5 минут. там все пашит.

А за сколько минут можно фильм изготовить ?

Речь идёт не о странице с видео для просмотра, а о изговлении видео, а это может быть не обязательно видеофайл.

Видео с субтитрами на немецком ?

Мало таких видеороликов на ютубе, а сайтов вообще наверное нет.

Может самому попробовать сделать страничку с видео с субтитрами.

В принципе сделать не сложно - бери любой редактор и навешивай титры, потом отправляешь на ютубе и пользуешься им.

А может можно обойтись без капитального изготовления субтитров?

При просмотре навешивать на видео субтитры. То есть видео без звука само по себе, а звук и текст отдельно.

И всё это синхронизируется.

Для этого выбираю фильм https://my.mail.ru/mail/dutka.yuriy/video/1719/14363.html

К сожалению нет этого фильма на ютубе. Был бы хоть на любом языке, а вот нет.

Прикреплённые файлы