Какой фрагмент кода следует использовать для интеграции видеороликов с amp-video-iframe в amp-story? - PullRequest
0 голосов
/ 11 октября 2018

Должны ли использоваться оба этих кодовых блока?Должен ли использоваться только один блок кода?Если да, то какой?

код на каждый video.js

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

код на amp-video-iframe

function onAmpIntegrationReady(ampIntegration) {
  var myVideo = document.querySelector('#my-video');
  ampIntegration.listenTo('videojs', myVideo);
}

1 Ответ

0 голосов
/ 12 октября 2018

amp-video-iframe не поддерживается amp-story.Поддерживаемые теги зависят от типа используемого вами слоя, но для amp-story-grid-layer их можно найти здесь .Примечательно, что если вы хотите воспроизвести видео, amp-video на данный момент является единственным способом сделать это.Поскольку amp-video-iframe поддерживает видеоинтерфейс AMP, вы можете увидеть эту проблему GitHub , чтобы отслеживать реализацию / поддержку этой функции.


Но, чтобы ответить на ваш вопрос (как он есть)релевантно для страниц AMP, которые не являются историями): необходимы оба фрагмента.Первый фрагмент кода добавляет видео на страницу, а второй фрагмент кода прослушивает такие события, как play и pause, чтобы передавать их назад и вперед во время выполнения AMP.Обратите внимание, что вам необходимо убедиться, что идентификаторы совпадают (в опубликованном вами коде HTML относится к видео по идентификатору my-player, а JS ссылается на видео по идентификатору my-video).

...