Пользовательское видео Fotorama

возможно ли иметь пользовательское видео на fotorama, я не могу встроить свое видео на youtube, vimeo или любые другие видеосервисы, мне нужен простой тег видео для отображения видео.


person user2496373    schedule 29.08.2013    source источник


Ответы (3)


Ответ: http://fotorama.io/customize/html/
Таким образом, вы можете использовать Видеотег HTML5 или любой пользовательский флэш-проигрыватель видео.

person Mark Twain    schedule 29.08.2013
comment
Спасибо. Да, это был именно мой вопрос, как использовать тег видео html5 для отображения видео, в документации говорится только об использовании iframe. - person user2496373; 29.08.2013

Встроенная поддержка YouTube и Vimeo:
http://fotorama.io/customize/video/

Вы также можете добавить любое видео, если у вас есть ссылка iframe и превью. Вот видеоролики Dailymotion:
http://fotorama.io/examples/video-custom.html

Fotorama умеет показывать видео в iframe. Поэтому вам нужно создать отдельную страницу с автоматическим воспроизведением видео, растянутого на всю страницу (ширина и высота 100%). А потом ссылка на эту страницу в фотораме:

<div class="fotorama">
    <a href="/link/to/the/video" data-video="true" data-img="preview.jpg"><img src="preview_small.jpg"></a>
</div>

Живая демонстрация:
http://artpolikarpov.github.io/fotorama/test/video-flowplayer.html

И три отдельных видео из этого примера:
http://artpolikarpov.github.io/fotorama/test/flowplayer/1.html http://artpolikarpov.github.io/fotorama/test/flowplayer/2.html http://artpolikarpov.github.io/fotorama/test/flowplayer/3.html

person Art    schedule 29.08.2013

ЕСЛИ вы вставляете в сообщение:

[gallery ids= 750,749,748,747,746,745,744,743,742,741" width="100%" ratio="1024/768" autoplay="3000" stopautoplayontouch="false" loop="true" transition="slide" keyboard="true"]

OR

<div class="fotorama" data-width="100%" data-ratio="1024/768" data-autoplay="3000" data-stopautoplayontouch="false" data-loop="true" data-transition="slide" data-keyboard="true">
<a href="youtube link">jets</a>

<img src="image url" class="aligncenter size-medium wp-image-745" />

<img src="image url" class="aligncenter size-full wp-image-743" />

<img src="image url" class="aligncenter size-full wp-image-741" /></a>
</div>
person ashtonsr04    schedule 26.07.2014