Метка: video

Записи с меткой "video"

Автозапуск видео на мобильных

Код видео

<video id="videoplayer" controls="false" x-webkit-airplay="allow" preload="auto" autoplay="true" loop="true" muted="muted">
            <source src="/video/bg-video.mp4" type="video/mp4">
            <source src="/video/vestoro.webm" type="video/webm"> 
        </video>

JavaScript / jQuery

var v = document.getElementById("movie");

v.onclick = function() {

if (v.paused) {

v.play();

} else {

v.pause();

}

};

Javascript, video

Добавляем инфосистему в показ каталога товаров на Главной

Код, который добавляет инфосистему в XML показа каталога на странице.

Размещаем в макета сайта. Код будет добавлять один инфоэлемент в случайном порядке. В частном случае инфоэлемент с видео.

<?php
          if (Core::moduleIsActive('shop'))
          {
              $Shop_Controller_Show = new Shop_Controller_Show(
                    Core_Entity::factory('Shop', 2)
              );
              $Shop_Controller_Show
                    ->xsl(
                        Core_Entity::factory('Xsl')->getByName('МагазинКаталогТоваровНаГлавнойСайт2')
                    )
                    ->groupsMode('none')
                    ->addForbiddenTags('/shop/shop_item', array('description','image_small','image_small_width','image_small_height','guid')) 
                    ->group(FALSE)
                    ->itemsPropertiesList(FALSE)
                    ->itemsProperties(TRUE)
                    ->limit(5);
                    
        // ADD ВИДЕО
        ob_start();
        $Informationsystem_Controller_Show = new Informationsystem_Controller_Show(
           Core_Entity::factory('Informationsystem', 11)
         );
        $Informationsystem_Controller_Show
      ->informationsystemItems()
      ->queryBuilder()
      ->clearOrderBy()
      ->orderBy('RAND()');

       $Informationsystem_Controller_Show
      ->xsl(Core_Entity::factory('Xsl')->getByName('СписокВидеоСайт2'))
      ->groupsMode('none')
      ->itemsForbiddenTags([
        'text',
        'description',
        'seo_description',
        'seo_keywords',
        'seo_title',
      ])
      ->group(false)
      ->itemsPropertiesList(false)
      ->itemsProperties(true)
      ->limit(1)
      // ->votes(TRUE)
      ->cache(false)
      ->show();

      $Shop_Controller_Show->addEntity(
    Core::factory('Core_Xml_Entity')
      ->name('video_file')
      ->value(ob_get_clean())
  );
  // END ADD
  

        // Объединение с нужной таблицей свойств
         $Shop_Controller_Show
        ->ShopItems()
        ->queryBuilder()
        ->where('shop_items.active', '=', 1)
        ->clearOrderBy()
        ->orderBy('RAND()')
        ->leftJoin('shop_item_properties', 'shop_items.shop_id', '=', 'shop_item_properties.shop_id')
        ->leftJoin('property_value_ints', 'shop_items.id', '=', 'property_value_ints.entity_id',
            array(
              array('AND' => array('shop_item_properties.property_id', '=', Core_QueryBuilder::expression('`property_value_ints`.`property_id`')))
            )
        )
        // Идентификатор дополнительного свойства
        ->where('shop_item_properties.property_id', '=', 39)
          // Значение дополнительного свойства
        ->where('property_value_ints.value', '=', '1')
        ->groupBy('shop_items.id')
        // Количество свойств
        ->having('COUNT(shop_item_properties.shop_id)', '=', 1);
          $Shop_Controller_Show->show();
          }
          ?>

Далее создаём XSL шаблон, который будет обрабатывать XML и выводить товары каталога.

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

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:hostcms="http://www.hostcms.ru/"
	exclude-result-prefixes="hostcms">
	<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

	<xsl:decimal-format name="my" decimal-separator="," grouping-separator=" "/>

	<xsl:template match="/shop">
		<div class="products-row">
			<xsl:choose>
				<xsl:when test="count(shop_item)">
					<xsl:apply-templates select="shop_item[position() &lt; 3]" />

					<div class="product">
						<xsl:choose>
							<xsl:when test="video_file !=''">
								<xsl:value-of disable-output-escaping="yes" select="video_file" />
							</xsl:when>
							<xsl:otherwise>
								<div class="video-bg">
									<video src="/video/bags003.mp4" type="video/mp4" autoplay="autoplay" muted="muted" loop="loop"></video>
									<div class="effects"></div>
								</div>
							</xsl:otherwise>
						</xsl:choose>
					</div>


					<xsl:apply-templates select="shop_item[position() &gt; 2]" />
				</xsl:when>
				<xsl:otherwise>
					<div class="alert-wrapper">
						<div class="alert alert-warning" role="alert">Нет товаров для отображения</div>
					</div>
				</xsl:otherwise>
			</xsl:choose>
		</div>
	</xsl:template>


	<xsl:template match="shop_item">
		<xsl:variable name="id" select="@id" />

		<div class="product">
			<div class="product-img">
				<a title="{name}" href="{url}">
					<xsl:choose>
						<xsl:when test="image_large != ''">
							<img alt="{name}" class="lozad" data-src="{dir}{image_large}" width="{image_large_width}" height="{image_large_height}" />
						</xsl:when>
						<!-- Картинка родительского товара -->
						<xsl:when test="modification_id and shop_item/image_large != ''">
							<img alt="{name}" title="{name}" data-src="{shop_item/dir}{shop_item/image_large}" class="lazyload"/>
						</xsl:when>
						<xsl:otherwise><img data-src="/hostcmsfiles/assets/images/no-image.svg" alt="{name}" class="lazyload"/></xsl:otherwise>
					</xsl:choose>
				</a>
			</div>


			<div class="product-description">

				<div class="product-labels">
					<xsl:if test="discount != 0">
						<div class="label label-discount">
							Скидка
							<xsl:choose>
								<xsl:when test="shop_discount/percent">
									<xsl:value-of disable-output-escaping="yes" select="round(shop_discount/percent)"/>%
								</xsl:when>
								<xsl:otherwise>
									<xsl:value-of disable-output-escaping="yes" select="shop_discount/value"/>
									<xsl:apply-templates select="/shop/shop_currency/code">
										<xsl:with-param name="value" select="price + discount" />
									</xsl:apply-templates>
								</xsl:otherwise>
							</xsl:choose>
						</div>
					</xsl:if>

					<xsl:choose>
						<xsl:when test="property_value[tag_name='in_reserve']/value !=0">
							<div class="label">В резерве</div>
						</xsl:when>
						<xsl:when test="property_value[tag_name='sold']/value !=0">
							<div class="label beige">Продана</div>
						</xsl:when>
						<xsl:when test="round(rest) = 0">
							<div class="label">Нет в наличии</div>
						</xsl:when>
						<xsl:otherwise>
							<div class="label beige">В наличии!</div>
						</xsl:otherwise>
					</xsl:choose>

					<xsl:if test="property_value[tag_name='best_price']/value =1">
						<div class="label label-best-price fw-bold yellow">Лучшая цена!</div>
					</xsl:if>
				</div>


				<div class="product-icons">
					<button type="button" class="icon icon-favorite" onclick="return $.addFavorite('{/shop/url}favorite/', {@id}, this)">
						<xsl:if test="/shop/favorite/shop_item[@id = $id]/node() or /shop/shop_favorite/shop_item[@id = $id]/node()">
							<xsl:attribute name="class">icon icon-favorite active</xsl:attribute>
						</xsl:if>
						<i class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="17px" height="17px"><path class="beige" d="M462.3 62.7c-54.5-46.4-136-38.7-186.6 13.5L256 96.6l-19.7-20.3C195.5 34.1 113.2 8.7 49.7 62.7c-62.8 53.6-66.1 149.8-9.9 207.8l193.5 199.8c6.2 6.4 14.4 9.7 22.6 9.7 8.2 0 16.4-3.2 22.6-9.7L472 270.5c56.4-58 53.1-154.2-9.7-207.8zm-13.1 185.6L256.4 448.1 62.8 248.3c-38.4-39.6-46.4-115.1 7.7-161.2 54.8-46.8 119.2-12.9 142.8 11.5l42.7 44.1 42.7-44.1c23.2-24 88.2-58 142.8-11.5 54 46 46.1 121.5 7.7 161.2z"/></svg></i>
					</button>
				</div>

				<div class="product-description-wrapper">
					<xsl:if test="comments_average_grade/node()">
						<div class="five-stars-container">
							<span class="five-stars" style="width: {comments_average_grade * 20}%"></span>
						</div>
					</xsl:if>


					<a href="{url}" class="h4 product-name d-block"><xsl:value-of select="name"/></a>

					<xsl:if test="text != ''">
						<div class="description pt-3 pb-3"><xsl:value-of disable-output-escaping="yes" select="text"/></div>
					</xsl:if>

					<span class="h4 product-price">
						<xsl:apply-templates select="/shop/shop_currency/code">
							<xsl:with-param name="value" select="price" />
						</xsl:apply-templates>
						<xsl:if test="discount != 0">
							<span class="old-price">
								<xsl:apply-templates select="/shop/shop_currency/code">
									<xsl:with-param name="value" select="price + discount" />
								</xsl:apply-templates>
							</span>
						</xsl:if>
					</span>

					<div class="product-cart pt-3">
						<button class="btn btn-transparent btn-sm mb-2 white" data-item-id="{@id}" onclick="return $.oneStepCheckout('{/shop/url}cart/', $(this).data('item-id'), 1)" data-toggle="modal" data-target="#oneStepCheckout{@id}"> Заказать</button>

						<button type="button" class="btn btn-transparent btn-sm yellow mb-2" onclick="location.href = '{url}'">Подробнее</button>
						<!--xsl:choose>
						<xsl:when test="modifications_count &gt; 0">
							<a class="btn" href="{url}">Выбрать</a>
						</xsl:when>
						<xsl:otherwise>
							<a class="btn" onclick="return $.bootstrapAddIntoCart('{/shop/url}cart/', {@id}, 1)">
								<span><i class="fa fa-shopping-basket"></i></span>
								<span>В корзину</span>
							</a>
						</xsl:otherwise>
					</xsl:choose-->
				</div>
			</div>
		</div>
	</div>
</xsl:template>

<xsl:template match="shop_currency/code">
	<xsl:param name="value" />

	<xsl:variable name="spaced" select="format-number($value, '# ###', 'my')" />

	<xsl:choose>
		<xsl:when test=". = 'USD'">$<xsl:value-of select="$spaced"/></xsl:when>
		<xsl:when test=". = 'EUR'">€<xsl:value-of select="$spaced"/></xsl:when>
		<xsl:when test=". = 'GBP'">£<xsl:value-of select="$spaced"/></xsl:when>
		<xsl:when test=". = 'RUB'"><xsl:value-of select="$spaced"/> <span class="rub ps-1"> ₽</span></xsl:when>
		<xsl:when test=". = 'AUD'">AU$<xsl:value-of select="$spaced"/></xsl:when>
		<xsl:when test=". = 'CNY'"><xsl:value-of select="$spaced"/>元</xsl:when>
		<xsl:when test=". = 'JPY'"><xsl:value-of select="$spaced"/>¥</xsl:when>
		<xsl:when test=". = 'KRW'"><xsl:value-of select="$spaced"/>₩</xsl:when>
		<xsl:when test=". = 'PHP'"><xsl:value-of select="$spaced"/>₱</xsl:when>
		<xsl:when test=". = 'THB'"><xsl:value-of select="$spaced"/>฿</xsl:when>
		<xsl:when test=". = 'BRL'">R$<xsl:value-of select="$spaced"/></xsl:when>
		<xsl:when test=". = 'INR'"><xsl:value-of select="$spaced"/><i class="fa fa-inr"></i></xsl:when>
		<xsl:when test=". = 'TRY'"><xsl:value-of select="$spaced"/><i class="fa fa-try"></i></xsl:when>
		<xsl:when test=". = 'ILS'"><xsl:value-of select="$spaced"/><i class="fa fa-ils"></i></xsl:when>
		<xsl:otherwise><xsl:value-of select="$spaced"/> <xsl:value-of select="." /></xsl:otherwise>
	</xsl:choose>
</xsl:template>
</xsl:stylesheet>

А также создаём небольшой XSL шаблон для вывода инфоэлемента

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:hostcms="http://www.hostcms.ru/"
	exclude-result-prefixes="hostcms">
	<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

	<xsl:template match="/informationsystem">

		<xsl:apply-templates select="informationsystem_item[active=1]"/>

	</xsl:template>

	<xsl:template match="informationsystem_item">
		<div class="video-bg">
			<video src="{property_value[tag_name='video_link']/value}" autoplay="autoplay" muted="muted" loop="loop"></video>
			<div class="effects"></div>
		</div>
	</xsl:template>


</xsl:stylesheet>

XSL, video

Создаем iframe с видео

Модальное окно с запуском видео при открыти

<div class="modal fade" id="myModalVideo" tabindex="-1" role="dialog">
     <div class="modal-dialog">
       <div class="modal-content">
                <div class="modal-header"><button class="close" type="button" data-dismiss="modal">x</button>
          </div>
        <div class="modal-body">
         <object width="1" height="1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data="" type="application/x-shockwave-flash"><param name="src" value="/video/Egeria.mp4" /><embed width="1" height="1" type="application/x-shockwave-flash" src="/video/Egeria.mp4" /></object>
        </div>
    </div>
  </div>
</div>

Кнопка вызова модальноно окна

<button type="button" id="toggleModalVideoYoutube" data-bs-toggle="modal" data-bs-target="#myModalVideo">
  Запустить модальное окно
</button>

JavaScript / jQuery

$(function() {

/*создаем iframe с видео*/

var videoIframe = $("<iframe/>", {

"class": "embed-responsive-item",

"src": "https://www.youtube.com/embed/cNLJB-giaVo?autoplay=1&enablejsapi=1&playerapiid=ytplayer",

"width": "96%",

"height": "400px",

"frameborder": "0",

"allowfullscreen": ""

});

/*по клику на кнопку .toggleModalVideoYoutube аттачим iframe с видео в модалку*/

$('.toggleModalVideoYoutube').click(function () {

$('#myModalVideo').modal('show');

videoIframe.appendTo('#myModalVideo .modal-body');

});

/*по закрытию модалки убираем iframe */

$('#myModalVideo').on('hidden.bs.modal', function () {

videoIframe.detach();

});

</script>

video, Модaльное окно, jQuery