Which code snippet should be used for integrating videojs with amp-video-iframe on amp-story? - video.js

Question

Should both of these code blocks be used?
Should only one code block be used? If so, which one?
code per 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>
code per amp-video-iframe
function onAmpIntegrationReady(ampIntegration) {
var myVideo = document.querySelector('#my-video');
ampIntegration.listenTo('videojs', myVideo);
}

Answer 1

amp-video-iframe is not supported by amp-story. The supported tags, depend on what type of layer you are using, but for amp-story-grid-layer they can be found here. Notably, if you are looking to play video, amp-video is currently the only way to do it. Since amp-video-iframe supports AMP's video interface, you can see this GitHub issue to track the implementation/support for this feature.
But, to answer your question (as it is relevant for AMP pages that are not stories): both snippets are necessary. The first code snippet adds the video to the page, while the second code snippet listens for events like play and pause to communicate them back and forth to the AMP runtime. Note that you'll need to make sure that the IDs are the same (in the code you've posted, the HTML refers to the video by the ID my-player, while the JS refers to the video by the ID my-video).