amp-video-iframe

Introduction

With amp-video-iframe you can include a custom-built video player that will obtain all the features available in the AMP Video Interface

This example integrates an AMP page with a simple custom player that uses the Video.JS framework. You can use any framework or custom-built player by following the integration instructions in the component documentation

You can see the sample in action here.

Setup

Include the amp-video-iframe extension script.

<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>

Basic usage

Set the autoplay attribute to start automatically as the user scrolls the video into view. The src attribute will point to a document including a video player. This URL must be relative or have HTTPS defined. You can read the source for the document referenced here.

<amp-video-iframe id="myVideo" src="/static/samples/files/amp-video-iframe-videojs.html" width="720" height="405" layout="responsive" autoplay>
  <amp-img placeholder src="/static/samples/img/amp-video-iframe-sample-placeholder.jpg" layout="fill">
  </amp-img>
</amp-video-iframe>

Video iframe integration

Inside the document in your frame, you must include a library and a simple integration callback in order for the host to comunicate with your frame. Include the amp-video-iframe frame integration library in your <head> tag.

<script async src="https://cdn.ampproject.org/video-iframe-integration-v0.js"></script>

Write an integration script to communicate the AMP document with this frame. The integration library natively supports Video.JS (and JwPlayer), so this task is very simple. If you don't use Video.JS or JwPlayer, you can use tools like provided by the library which are described here. For Video.JS, include the following in your ` tag after your video and the Video.JS library script.

<script>
  // Wait for API to initialize
  (window.AmpVideoIframe = window.AmpVideoIframe || [])
      .push(function(ampIntegration) {
        var myVideo = document.querySelector('#my-video');

        // Listen to element that uses Video.JS.
        ampIntegration.listenTo('videojs', myVideo);
      });
</script>

Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow

Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub

Written by @alanorozco