Highslide Видеоплеер во всплывающем окне.HTML,форма,галерея,YouTube+DEMO
Вы ищите расширение, которое бы отображало содержимое: HTML, AJAX, DHTML, текст, видеоплеер, YouTube, SWF. А также могло бы послужить отличной фотогалереей?
Вы попали в саму точку! HighSlide — это все в одном. Незаменимое расширение функциональности любого сайта (WordPress, Joomla, Magento, Drupal и тому подобные) позволит Вам легко настроить красивые всплывающие элементы Вашего кода, а также видеоплеера, код которых Вы сможете разместить в любом месте и на любой HTML странице.
Для того, чтобы Highslide заработал, Вам всего лишь необходимо подключить требуемый файлы JavaScript, CSS и просто начать использовать замечательную фотогалерею или отображать видео с сайта YouTube.
Чтобы использовать данное расширение для показа видеороликов, которые будут отображаться во всплывающем контейнере с мягкой анимацией, по нажатию пользователем на ссылку, изображение или текст Вам необходимо произвести следующее:
<script src="http://YOUR_SITE.org/ПУТЬ_К_ФАЙЛУ/highslide-full.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hs.graphicsDir = 'http://YOUR_SITE.org/ПУТЬ_К_ГРАФИЧЕСКИМ_ФАЙЛАМ/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
</script>
Не забудьте поменять путь к файлам:
hs.graphicsDir = 'http://YOUR_SITE.org/ПУТЬ_К_ГРАФИЧЕСКИМ_ФАЙЛАМ/';
<script src="http://YOUR_SITE.org/ПУТЬ_К_ФАЙЛУ/highslide-full.js" type="text/javascript" charset="utf-8"></script>
Далее Вам остается взять код Вашего плеера, который собираетесь поставить для открытия в появляющемся div’e:
<a href="#"><img src="http://YOUR_SITE.org/ПУТЬ_К_ИЗОБРАЖЕНИЮ/p.jpg" title="Нажмите, чтобы воспроизвести видео" /></a>
<div>
<div>
<ul>
<li>
<a href="#"></a>
</li>
</ul>
</div>
<div>
<p><embed src="//inverser.pro/sys/player.swf" flashvars="set_pl1_title=Inverser.PRO&set_pl1_posterUrl=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_prew.jpg&set_pl1_video1_url=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_site.mp4&set_pl1_duration=0&set_uiLanguage=ru&set_color_scheme=light&set_color_buttonBg=&set_color_buttonNormal=#424242&set_color_buttonHover=#ff002e&set_skinName=transparent&set_hide=shareCodeButton&set_title_show=beforePlay,onPlay,afterPlay&set_autoHideControlBar=true" bgcolor="#000000" wmode="opaque" allowscriptaccess="always" type="application/x-shockwave-flash" allowfullscreen="true" allownetworking="external" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></p><div>
<div><span title="Изменить размер"></span></div>
</div>
</div>
Итак:
<a href="#"><img src="https://usemind.org/m/uploads/p.jpg" title="Нажмите, чтобы воспроизвести видео" /></a>
• width: 640,height: 360 — ширина и высота окошка;
• contentId: ‘highslide-htmlc193’ — id того элемента, которое будет использовано в качетсве окна;
• outlineType: ’rounded-white’ — тема оформления;
• headingText: ‘Selena Gomez & The Scene — Round & Round’ — текст, который будет выведен в заголовок — он будет использован в качестве элемента, за который можно передвигать окно;
• <img src=»http://YOUR_SITE.org/ПУТЬ_К_ИЗОБРАЖЕНИЮ/p.jpg» title=»Нажмите, чтобы воспроизвести видео» /> — изображение, которое служит вызовом функции, которая активирует всплывающее окно, можете использовать ссылку, вместо этого изображения или взять это:
<div>
id контейнера, который будем использовать;
<p><embed src="//inverser.pro/sys/player.swf" flashvars="set_pl1_title=Inverser.PRO&set_pl1_posterUrl=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_prew.jpg&set_pl1_video1_url=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_site.mp4&set_pl1_duration=0&set_uiLanguage=ru&set_color_scheme=light&set_color_buttonBg=&set_color_buttonNormal=#424242&set_color_buttonHover=#ff002e&set_skinName=transparent&set_hide=shareCodeButton&set_title_show=beforePlay,onPlay,afterPlay&set_autoHideControlBar=true" bgcolor="#000000" wmode="opaque" allowscriptaccess="always" type="application/x-shockwave-flash" allowfullscreen="true" allownetworking="external" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></p>
— это сам плеер, то есть код плеера, который Вы будете вставлять;
<div><span title="Изменить размер"></span></div>
— изменение размера.
Как видите, highslide-htmlc193 — это id должно быть разным для каждого плеера, находящегося на одной странице с другим контейнером со всплывающим видео, вставленным этим об
Twitch.tv фильмы как Highslide SWF-объекты (flash, video, embed, highslide)
0 daveycroqet [2013-05-09 10:22:00]
Попытка вставить видео Twitch.tv (например, http://www.twitch.tv/aa2233aa/c/2236969) в всплывающем окне Highslide.js.
Я могу сделать что-то подобное, с iframe, без проблем:
<td colspan="3">
Но если я просто хочу сам видео/поток, это проблематично. Twitch.tv имеет объект встроенного кода общего доступа на самой странице:
<object bgcolor='#000000' data='http://www.twitch.tv/widgets/archive_embed_player.swf' type='application/x-shockwave-flash'>
<param name='movie' value='http://www.twitch.tv/widgets/archive_embed_player.swf'>
<param name='allowScriptAccess' value='always'>
<param name='allowNetworking' value='all'>
<param name='allowFullScreen' value='true'>
<param name='flashvars' value='start_volume=25&chapter_id=2236969&auto_play=false&title=poro%25E8%2587%25AA%25E7%2588%2586%25E4%25BA%2586%2521%2521%2521&channel=aa2233aa'>
</object>
Вот пример метода Highslide, который я пытаюсь реплицировать: http://www.roadrash.no/hs-support/flash-with-move+close-buttons.html
К сожалению, я не могу заставить его работать. Я бы опубликовал некоторые из моих попыток, но в этот момент было так много перестановок, что он просто загромождал этот пост даже более.
Во всяком случае, полезная рука будет оценена по достоинству. Как обычно, я не обязательно ищу прямые ответы, но подсказки и указание на меня в правильном направлении хороши! Заранее спасибо.
flash video embed highslide
|
Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров. При клике мышью по ссылке HTML-КОНТЕНТ В чём красота мужчины, какова она и в чём ее суть?Итак… Мне, например, не очень то важна внешность мужчины. Ведь красота мужчины в том, что он умеет хорошо и красиво говорить, обладает отменным чувством юмора и интеллектом! «Мужчина должен быть немного красивее обезьяны». Вы согласны со мной? Мы, в меру своих возможностей, провели собственное небольшое журналистское расследование и вот что узнали — порой к нашему большому удивлению, что все мужчины – современные эталоны красоты. Объем мирового рынка мужской косметики, оценивается в 16 миллиардов долларов (для тех, кто не дружит с цифрами, переводим — это много!). Более того, это один из наиболее перспективных, динамично развивающихся сегментов мирового рынка. А особые надежды специалисты возлагают на страны Азии и Ближнего Востока, в частности, Китай, а также Бразилию и Россию. Открытое окно можно перемещать, наведя курсор мыши на кнопку переместить до появления перекрестия стрелок и удерживая левой клавишей, а так же закрыть, кликнув на соответствующую кнопку. В нижнем правом углу есть треугольная кнопочка, при наведении курсора на неё появляется двойная стрелочка и надпись «Заголовок: размер». С помощью этой кнопочки можно менять размеры окна как в вертикали так и в горизонтали, точно так же, как и при изменении размеров открытых окон Windows. При уменьшении окна до критических размеров появляется полоса прокрутки. Внизу в таблице код реализации эффекта:
<html>
<head>
<title>Highslide JS</title>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css">
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
</script>
</head>
<body>
<div>
<a href="#"
class="highslide">
HTML-контент
</a>
<div>
<div>
<ul>
<li>
<a href="#">Переместить</a>
</li>
<li>
<a href="#">Закрыть</a>
</li>
</ul>
</div>
<div>Здесь разместите ваш текст.
</div>
<div>
<div>
<span title="Размер">
</span>
</div>
</div>
</div>
</div>
</body>
</html>
Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master. Распакуйте архив в отдельную папку. Папку highslide со всем содержимым закачайте в «корень» сайта, а HTML-документ откройте в браузере и проверьте работу. Если всё прекрасно работает, можно применять по назначению. При копировании кода и вставке в страницу, соблюдайте последовательность действий: Пропись стилей. (Стили писать обязательно в head). Подключение скриптов (можно располагать, как в head, так и в body). Здесь разместите ваш контент. Это может быть текст, либо текст с изображением. Примечание: Папка highslide является универсальной для всех эффектов Highslide JS, поэтому её стоит закачать один раз на свой сайт. Не беспокойтесь, много места она не занимает, всего-то 887кб. Думаю, для Вас не составит особого труда освоить данный материал, т.к. я постарался преподать всё в максимально доступной форме. Спасибо за внимание. До новых встреч! Успехов Вам! L.M. |
Twitch.tv фильмы как объекты SWF Highslide
Попытка встроить видео Twitch.tv (например, http://www.twitch.tv/aa2233aa/c/2236969) в всплывающее окно Highslide.js.
Я могу сделать что-то вроде этого, с iframe, без проблем:
<td colspan="3">
Но если я просто хочу, чтобы видео / поток сам по себе, это проблематично. Twitch.tv и объектов размещения акций код на самой странице :
<object bgcolor='#000000' data='http://www.twitch.tv/widgets/archive_embed_player.swf' type='application/x-shockwave-flash'>
<param name='movie' value='http://www.twitch.tv/widgets/archive_embed_player.swf'>
<param name='allowScriptAccess' value='always'>
<param name='allowNetworking' value='all'>
<param name='allowFullScreen' value='true'>
<param name='flashvars' value='start_volume=25&chapter_id=2236969&auto_play=false&title=poro%25E8%2587%25AA%25E7%2588%2586%25E4%25BA%2586%2521%2521%2521&channel=aa2233aa'>
</object>
Вот пример техники Highslide, которую я пытаюсь воспроизвести: http://www.roadrash.no/hs-support/flash-with-move + close-buttons.html
К сожалению, я не могу заставить его работать. Я бы опубликовал некоторые из моих попыток, но на данный момент было так много перестановок, что это просто загромождало бы этот пост еще больше.
Во всяком случае, помощь будет оценена по достоинству. Как обычно, я не обязательно ищу прямые ответы, но намеки и указания мне в правильном направлении хороши! Заранее спасибо.
video flash embed highslideПоделиться Источник daveycroqet 09 мая 2013 в 07:22
1 Ответ
1
Поскольку Twitch.tv предоставляет вам только старый объектный код, вам нужно поместить общий код на свою собственную страницу HTML, сохранить страницу и открыть ее в всплывающем окне Highslide iframe.
<td colspan="3">
(Вероятно, вам нужно настроить ширину и высоту всплывающего окна.)
Поделиться RoadRash 12 июня 2013 в 03:08
jQuery альтернативы Highslide?
Существуют ли надежные альтернативы jQuery для библиотеки JavaScript popup / lightbox Highslide ? Highslide слишком сосредоточен на аспекте галереи изображений, и мне просто интересно, есть ли…
Создайте два объекта Highslide
Я столкнулся с проблемой. Я создаю два объекта в highslide одновременно, но один из них не активируется (я не могу закрыть или переместить его). Ниже я пишу пример: hs.graphicsDir =…
Лайтбокс: Highslide и Colorbox
Ну, главный из них, с которым я работаю, — это Highslide, но я уже пробовал оба. Моя проблема заключается в том, что фон не исчезает, когда выбранное изображение появляется в окне lightbox. Я…
Highslide не расширяет изображения на WordPress
Я пытаюсь интегрировать Highslide с моим сайтом WordPress без плагинов. Я изменил переменные hs.graphicsDir на: graphicsDir : ‘http://hyohanpark.com/wp-content/themes/Noir/highslide/graphics/’ Код в…
Highslide: как использовать только определенные изображения
Как сделать так, чтобы моя галерея highslide принимала только определенные изображения (например, содержащиеся в определенном div)? У меня здесь есть галерея:…
Highslide открыть html события onload
Я новичок, так что относитесь ко мне мягко. Я хочу открыть окно Highslide html при загрузке. Я видел объяснение на старом сайте Highsoft, но не могу заставить его работать. Вот мой тестовый файл без…
Highslide не следует прокрутка на странице
У меня есть родительская страница, которая находится в пределах iframe. Я хотел бы вызвать highslide, который следует за прокруткой на родительской странице. Я попытался разместить код: Highslide,…
Highslide Автоматически Всплывающие На Один Раз
Сэр / Мадам, Я использовал скрипт Highslide для автоматического всплывающего окна на индексной странице. Так что, когда пользователь открывает веб-сайт, всплывающее окно должно быть видно, что с…
Как я могу получить swf продолжительность фильма по php?
мне нужна продолжительность swf-фильма на php. например, у меня есть 3 swf-фильма на моем сайте, и я хочу сыграть еще один точно, чем, когда первый заканчивается. я нашел здесь небольшую библиотеку…
Как можно приостановить / возобновить динамически загруженный внешний файл SWF с помощью ActionScript 3?
Я хотел бы иметь возможность воспроизводить/приостанавливать динамически загруженные внешние фильмы SWF с помощью ActionScript 3.0. Любая помощь приветствуется. Спасибо.
Плагин увеличения изображений при клике
Приветствую вас уважаемые читатели и гости моего блога! Сегодня речь пойдет об одном замечательном плагине увеличения изображений при клике — Auto Highslide.
Я очень долго искал плагин увеличения изображений, но в каждом находил какой-то минус, в итоге я остановился на плагине Auto Highslide.
Вы, наверное, знаете, что если в WordPress вставлять картинку в виде медиафайла, по умолчанию она будет открываться в этом же окне, но при этом закроется страница блога. То есть произойдет переход с блога на страницу медиафайла. Во первых это дико неудобно, во вторых, таким образом мы теряем драгоценных посетителей, ведь не каждый будет возвращаться на предыдущую страницу.
С этой проблемой прекрасно решает плагин Auto Highslide. Скачать плагин можно с официального сайта WordPress или здесь.
Процесс установки плагина ничем не отличается от остальных плагинов.
После установки, вам не нужно вообще настраивать плагин, достаточно базовых настроек.
Как увеличить картинку плагином Auto Highslide?
Плагин автоматически сам увеличит изображение при клике на картинку, вам достаточно лишь оформить картинку в виде ссылки на медиафайл.
Что это значит? Вот я загрузил в библиотеку медиафайлов картинку размером 896 x 672 px. Но у меня ширина страницы составляет всего 630 px. Я вставляю картинку на блог в полном размере, при этом указываю ссылку на медиафайл.
Затем уменьшаю ее до нужного мне размера и сохраняю.
Плагин Auto Highslide автоматически сам будет увеличивать картинку при клике на нее мышкой.
Зачем увеличивать картинки при нажатии мышкой?
Эта функция может быть полезна блоггерам, которые выкладывают скриншоты или интернет-магазинам.
Вот в принципе и все. Надеюсь вам пригодится информация. Подписывайтесь на обновления блога по почте!
Как вставить флеш игры и swf ролики на сайт
Чтобы отображать на сайте flash ролики или игры используется swf файлы. Например, я таким образом, создавал сайт с флеш играми, которые очень легко подключал за счет тега object.
Для этого вам понадобится загрузить swf файл в директорию сайта (пусть будет demo.swf в корневой папке) и прописать в html страничке следующий код:
<object>
<param name=»movie» value=»/demo.swf»>
<embed src=»/demo.swf»>
</embed>
</object>
Если вы откроете страницу с таким кодом, то увидите свою флешку (например, игру, которая будет работать). Это достаточно простой код. В нем мы выставили размеры, которые должен занимать swf на экране.
Более правильный код подключения ниже:
<object type=»application/x-shockwave-flash» classid=»clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ data=»/demo.swf»>
<param name=»movie» value=»/demo.swf» />
<param name=»quality» value=»high» />
<embed src=»/demo.swf»></embed>
</object>
Он отличается от первого большим количеством параметров (param). classid — имеет константное значение, означающее, что мы используем ActiveX элемент.
Сами параметры вы можете дополнять, в зависимости от ваших задач внутри тега object:
<param name=»quality» value=»» /> — Качество ролика. Значения: low | autolow | autohigh | high | medium | best
<param name=»quality» value=»» /> — Заливка фона внутри области ролика, в формате #RRGGBB, например: #ffffff
<param name=»play» value=»» /> — Включить ли автопроигрывание ролика. Значения: true | false.
<param name=»loop» value=»» /> — Нужно ли включать зацикливание ролика. То есть, если включено, то после окончания воспроизведения, начнет проигрывать его заново. Значения: true | false.
<param name=»salign» value=»» /> — Настраивает положение swf ролика внутри его фрэйма. Значения: l | r | t | b — влево, вправо, вверх и вниз
Существуют и другие параметры для управления swf, но этих основ будет достаточно для вставки обычных флэш анимаций и игр на сайт.
Как вставить flash .swf на сайт WordPress |
У многих вебмастеров возникает потребность использовать Shockwave Flash на своем сайте.
Так как эта технология активно развивается, и наверно глупо не использовать её технологии если есть такая возможность или потребность. Поэтому в этой статье будет рассмотрено два метода как вставить flash на сайт WordPress.
Важно: Перед тем как вы попробуете использовать методы приведенные ниже, обязательны выключите все блокировщики рекламы установленные у вас на компьютере и в браузере.
Вставка flash на wordpress с использованием плагина
Первым делом что нужно сделать, это скачать и установить плагин Easy Flash Embed.
Данный плагин очень прост тем, что он даже не выводит никаких дополнительных настроек в панели администратора. Единственное теперь что нам понадобиться для того, чтобы сделать вывод flash в wordpress записи, это следующий код, который нужно подогнать под свой сайт и вставить в том месте где вам необходимо разместить флеш объект:
1 | [swf src="http://www.ваш-сайт.com/my-file.swf" width=300 height=200] |
[swf src=»http://www.ваш-сайт.com/my-file.swf» width=300 height=200]
В этом коде нужно лишь изменить ссылку на ваш swf файл, а также подправить атрибуты ширины и высоты:
width — ширина;
height — высота;
Метод вставки flash на сайт WordPress без плагина
Данный метод для тех кто не хочет использовать плагины, которые той или иной мере все таки замедляют работу вашего сайта. Ниже приводится самый просто и подходящий под все стандарты код, который может вставить flash прямо в wordpress запись, пост, виджет или даже тему.
1 | <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param name="movie" value="Путь к файлу.swf" /><!-- [if !IE]>--><object type="application/x-shockwave-flash" data="Путь к файлу.swf"><!--<![endif]-->Fallback or 'alternate' content goes here.This content will only be visible if the SWF fails to load.<!-- [if !IE]>--></object></object> <!--<![endif]--> |
<object classid=»clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″><param name=»movie» value=»Путь к файлу.swf» /><!— [if !IE]>—><object type=»application/x-shockwave-flash» data=»Путь к файлу.swf»><!—<![endif]—>Fallback or ‘alternate’ content goes here.This content will only be visible if the SWF fails to load.<!— [if !IE]>—></object></object> <!—<![endif]—>
Код для вставки на сайт дополнительно выложил в текстовом файле. Скачать можно ТУТ.
В данном случае тут тоже необходимо править под себя две ссылки, там где указанно Путь к файлу.swf, а также изменить если нужно атрибуты width и height. Также ответ почему в коде используется два типа object. Один из них необходим для «особенного и любимого всеми» браузера Internet Explorer, а второй для всех остальных.
Ниже привожу пример размещения вторым способом развлекательной Flash, в которой кот следит за движением вашего курсора:
Кот феликс
Еще одна версия кода для вставки флеш:
1 | <object data="url.swf" type="application/x-shockwave-flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0"> <param name="quality" value="high" /> <param name="scale" value="noborder" /> <param name="salign" value="t" /> <param name="wmode" value="opaque" /> <param name="src" value="url.swf" /> <embed src="url.swf" /> </object> |
<object data=»url.swf» type=»application/x-shockwave-flash» classid=»clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=»http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0″> <param name=»quality» value=»high» /> <param name=»scale» value=»noborder» /> <param name=»salign» value=»t» /> <param name=»wmode» value=»opaque» /> <param name=»src» value=»url.swf» /> <embed src=»url.swf» /> </object>