01.12.2022

SOCSEO.RU

Интересная информация и полезные статьи…

Как создать файл » SMIL Плейлист » для видео плеера или стрима

Среднее прочтение 1 мин.

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

Окончательный плейлист будет выглядеть так:

улыбка-плейлист.png

Макет

Наш плейлист SMIL имеет сложную компоновку. Он имеет 5  регионов  (также известных как зоны):

улыбка-плейлист-regions.png

Регионы:

  • topOverlay (красный)
  • видео (зеленый)
  • нижний виджет (белый)
  • topRightWidget (фиолетовый)
  • нижний правый виджет (синий)

Начнем с базового шаблона плейлиста SMIL:

<smil>
  <head>
    <layout>
      <!-- Global layout definition here -->
    </layout>
  </head>
  <body>
    <!-- Contents here -->
  </body>
</smil>

Теперь добавьте в  <layout> тег определение областей экрана.

<smil>
  <head>
    <layout>
      <!--
        - root layout defines the dimensions of the whole playlist and its orientation 
        - in our case the playlist is landscape oriented, 1920x1080
      -->
      <root-layout width="1920" height="1080" />

      <!-- 
        - now we can define each of the regions
        - region has always a regionName and a position (left, top), size (width, height)
        - region can also have a z-index to define layers within the layout (decide which one is on top)
      -->
			<region regionName="topOverlay" left="0" top="0" width="1920" height="68" z-index="9" backgroundColor="transparent" />

			<region regionName="video" left="0" top="0" width="1280" height="720" z-index="1"/>

			<region regionName="bottomWidget" left="0" bottom="0" width="1280" height="360" z-index="1"/>

			<region regionName="topRightWidget" left="1280" top="0" width="640" height="506" z-index="1"/>

			<region regionName="bottomRightWidget" left="1280" top="506" width="640" height="574" z-index="1"/>
    </layout>
  </head>
  <body>
    <!-- Contents here -->
  </body>
</smil>

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

Предварительный загрузчик

Иногда, если ваш плейлист большой или сетевое соединение не очень быстрое, вы можете захотеть отобразить замещающее видео или изображение до того, как все медиафайлы будут кэшированы и готовы к воспроизведению. Для этого варианта использования есть предварительный загрузчик.

В нашем случае мы будем использовать следующее видео:

загрузчик.png

Прелоадер помещается в тело плейлиста

<smil>
  <head>
    <layout>
      <root-layout width="1920" height="1080" />

			<region regionName="topOverlay" left="0" top="0" width="1920" height="68" z-index="9" backgroundColor="transparent" />

			<region regionName="video" left="0" top="0" width="1280" height="720" z-index="1"/>

			<region regionName="bottomWidget" left="0" bottom="0" width="1280" height="360" z-index="1"/>

			<region regionName="topRightWidget" left="1280" top="0" width="640" height="506" z-index="1"/>

			<region regionName="bottomRightWidget" left="1280" top="506" width="640" height="574" z-index="1"/>
    </layout>
  </head>
  <body>
    <par>
      <!-- Preloader to show something before the full content is loaded and ready -->
			<!-- This <seq> will happen first followed by the next seq -->
			<seq end="__prefetchEnd.endEvent">
				<seq repeatCount="indefinite">
					<!-- Play waiting prompt -->
					<video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/loader.mp4" />
				</seq>
      </seq>
    </par>
  </body>
</smil>

Добавление медиа в регионы

В качестве следующего шага мы размещаем медиа в каждом соответствующем регионе.

<!-- 
  - the following parallel playlist will start once all media are cached 
  - it will automatically end the preloader
-->
<par begin="__prefetchEnd.endEvent" repeatCount="indefinite">

  <!-- 
    - playlist is separated to <par> for each region
    - parallel playlists are playing at the same time
  -->
  <par>
    <seq repeatCount="indefinite">
      <!-- here we add topOverlay widget and assign it to region with name topOverlay (names are matching to make it more obvious, it's not mandatory using same names) -->
      <ref src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/topOverlay.wgt" type="application/widget" region="topOverlay" dur="60s"></ref>
    </seq>
  </par>

  <par>
    <seq repeatCount="indefinite">
      <!-- second widget in the bottomRight region -->
      <ref src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/bottomWidget.wgt" type="application/widget" region="bottomWidget" dur="60s"></ref>
    </seq>
  </par>

  <par>
    <seq repeatCount="indefinite">
      <!-- loop of images in the topRightWidget region -->
      <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/widget_image_1.png" region="topRightWidget" dur="60s"></img>
      <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_3.jpg" region="topRightWidget" dur="60s"></img>
      <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_4.jpg" region="topRightWidget" dur="60s"></img>
    </seq>
  </par>

  <par>
    <seq repeatCount="indefinite">
      <!-- loop of images in the bottomRightWidget region -->
      <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/widget_image_2.png" region="bottomRightWidget" dur="60s"></img>
      <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_5.jpg" region="bottomRightWidget" dur="60s"></img>
      <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_6.jpg" region="bottomRightWidget" dur="60s"></img>
    </seq>
  </par>

  <seq repeatCount="indefinite">
    <!-- loop of videos and images in the 'video' region -->
    <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_1.mp4" region="video"></video>
    <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_2.mp4" region="video"></video>
    <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_1.jpg" dur="5s" region="video"></img>
    <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_2.jpg" dur="5s" region="video"></img>
  </seq>

</par>

На его этапе мы закончили базовое создание плейлиста. Список воспроизведения способен воспроизводить различные видео, изображения и виджеты в соответствующих регионах.

Наш текущий плейлист выглядит так:

<smil>
  <head>
    <layout>
      <root-layout width="1920" height="1080" />
			<region regionName="topOverlay" left="0" top="0" width="1920" height="68" z-index="9" backgroundColor="transparent" />
			<region regionName="video" left="0" top="0" width="1280" height="720" z-index="1"/>
			<region regionName="bottomWidget" left="0" bottom="0" width="1280" height="360" z-index="1"/>
			<region regionName="topRightWidget" left="1280" top="0" width="640" height="506" z-index="1"/>
			<region regionName="bottomRightWidget" left="1280" top="506" width="640" height="574" z-index="1"/>
    </layout>
  </head>
  <body>
    <par>

			<seq end="__prefetchEnd.endEvent">
				<seq repeatCount="indefinite">
					<video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/loader.mp4" />
				</seq>
      </seq>

      <par begin="__prefetchEnd.endEvent" repeatCount="indefinite">
        <par>
          <seq repeatCount="indefinite">
            <ref src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/topOverlay.wgt" type="application/widget" region="topOverlay" dur="60s"></ref>
          </seq>
        </par>

        <par>
          <seq repeatCount="indefinite">
            <ref src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/bottomWidget.wgt" type="application/widget" region="bottomWidget" dur="60s"></ref>
          </seq>
        </par>

        <par>
          <seq repeatCount="indefinite">
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/widget_image_1.png" region="topRightWidget" dur="60s"></img>
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_3.jpg" region="topRightWidget" dur="60s"></img>
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_4.jpg" region="topRightWidget" dur="60s"></img>
          </seq>
        </par>

        <par>
          <seq repeatCount="indefinite">
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/widget_image_2.png" region="bottomRightWidget" dur="60s"></img>
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_5.jpg" region="bottomRightWidget" dur="60s"></img>
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_6.jpg" region="bottomRightWidget" dur="60s"></img>
          </seq>
        </par>

        <par>
          <seq repeatCount="indefinite">
            <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_1.mp4" region="video"></video>
            <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_2.mp4" region="video"></video>
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_1.jpg" dur="5s" region="video"></img>
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_2.jpg" dur="5s" region="video"></img>
          </seq>
        </par>

      </par>
    </par>
  </body>
</smil>

Планирование

В качестве следующего шага мы хотим изменить содержимое  video региона на основе даты. Мы создадим контент, который будет воспроизводиться с 30 июня 2025 года по 31 июля 2025 года.

Для этого мы поместим медиа в область видео в priorityClass.

<excl>
  <!-- All your priority playlists for a certain region ordered by priority -->

  <priorityClass higher="stop" lower="defer" peer="stop">
    <!-- 
      - the first priorityClass will be active from 30th of Jan to 31st of Jul 
      - it will alter the "standard" loop in video region during this time
    -->
    <par begin="wallclock(2025-06-30T00:00:00)" end="wallclock(2021-07-31T00:00:00)">
      <seq repeatCount="indefinite">
          <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_3.mp4" region="video"></video>
          <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_7.jpg" dur="5s" region="video"></img>
        </seq>
    </par>
  </priorityClass>
  
  <!-- the second priorityClass will be active any other day but 1st and 2nd of Jan -->
  <priorityClass higher="stop" lower="defer" peer="stop">
    <par>
      <seq repeatCount="indefinite" begin="0">
          <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_1.mp4" region="video"></video>
          <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_2.mp4" region="video"></video>
          <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_1.jpg" dur="5s" region="video"></img>
          <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_2.jpg" dur="5s" region="video"></img>
      </seq>
    </par>
  </priorityClass>
</excl>

Условное воспроизведение

В качестве последнего элемента мы хотим определить, какое изображение в области topRightWidget будет видно в какой день недели.

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

<par>
  <seq repeatCount="indefinite">
    <!-- 
      - expr defines a condition, if the condition is met, the item (in this case image) is played, otherwise is skipped
    -->
    <img expr="adapi-weekday()=0" src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/widget_image_1.png" region="topRightWidget" dur="60s"></img>
    <img expr="adapi-weekday()>=1 and adapi-weekday()<=5"src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_3.jpg" region="topRightWidget" dur="60s"></img>
    <img expr="adapi-weekday()=6" src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_4.jpg" region="topRightWidget" dur="60s"></img>
  </seq>
</par>
  • Первое изображение будет видно только в воскресенье ( adapi-weekday()=0)
  • Второе изображение будет видно с понедельника ( adapi-weekday()>=1) по пятницу ( adapi-weekday()<=5)
  • Третье изображение будет видно только в субботу ( adapi-weekday()=6)

Финальный плейлист SMIL

Мы сделали. В плейлисте теперь воспроизводится контент в 5 различных регионах. В области  видео  запланировано воспроизведение специального видео с 30 июня по 31 июля, в противном случае воспроизводится стандартный цикл видео и изображений. В topRightWidget отображаются изображения, основанные на точном дне недели.

<smil>
  <head>
    <layout>
      <root-layout width="1920" height="1080" />
			<region regionName="topOverlay" left="0" top="0" width="1920" height="68" z-index="9" backgroundColor="transparent" />
			<region regionName="video" left="0" top="0" width="1280" height="720" z-index="1"/>
			<region regionName="bottomWidget" left="0" bottom="0" width="1280" height="360" z-index="1"/>
			<region regionName="topRightWidget" left="1280" top="0" width="640" height="506" z-index="1"/>
			<region regionName="bottomRightWidget" left="1280" top="506" width="640" height="574" z-index="1"/>
    </layout>
  </head>
  <body>
    <par>

			<seq end="__prefetchEnd.endEvent">
				<seq repeatCount="indefinite">
					<video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/loader.mp4" />
				</seq>
      </seq>

      <par begin="__prefetchEnd.endEvent" repeatCount="indefinite">
        <par>
          <seq repeatCount="indefinite">
            <ref src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/topOverlay.wgt" type="application/widget" region="topOverlay" dur="60s"></ref>
          </seq>
        </par>

        <par>
          <seq repeatCount="indefinite">
            <ref src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/bottomWidget.wgt" type="application/widget" region="bottomWidget" dur="60s"></ref>
          </seq>
        </par>

        <par>
          <seq repeatCount="indefinite">
            <!-- 
              - expr defines a condition, if the condition is met, the item (in this case image) is played, otherwise is skipped
            -->
            <img expr="adapi-weekday()=0" src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/widget_image_1.png" region="topRightWidget" dur="60s"></img>
            <img expr="adapi-weekday()>=1 and adapi-weekday()<=5"src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_3.jpg" region="topRightWidget" dur="60s"></img>
            <img expr="adapi-weekday()=6" src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_4.jpg" region="topRightWidget" dur="60s"></img>
          </seq>
        </par>

        <par>
          <seq repeatCount="indefinite">
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/widget_image_2.png" region="bottomRightWidget" dur="60s"></img>
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_5.jpg" region="bottomRightWidget" dur="60s"></img>
            <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_6.jpg" region="bottomRightWidget" dur="60s"></img>
          </seq>
        </par>

        <par>
          <excl>
            <priorityClass higher="stop" lower="defer" peer="stop">
              <par begin="wallclock(2025-06-30T00:00:00)" end="wallclock(2021-07-31T00:00:00)">
                <seq repeatCount="indefinite">
                    <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_3.mp4" region="video"></video>
                    <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_7.jpg" dur="5s" region="video"></img>
                  </seq>
              </par>
            </priorityClass>

            <priorityClass higher="stop" lower="defer" peer="stop">
              <par>
                <seq repeatCount="indefinite" begin="0">
                    <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_1.mp4" region="video"></video>
                    <video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/video_2.mp4" region="video"></video>
                    <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_1.jpg" dur="5s" region="video"></img>
                    <img src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/zones/files/img_2.jpg" dur="5s" region="video"></img>
                </seq>
              </par>
            </priorityClass>
          </excl>
        </par>
      </par>
    </par>
  </body>
</smil>