- ntroduction
- Use amp-video to embed videos into your AMP html files. Video source files must be served via HTTPS.
- Setup
- Import the amp-video component.
- <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
- Basic usage
- A simple video with controller. amp-video supports the following formats: mp4, webm, ogg together with all the formats supported by the HTML5 video tag including HLS.
- <amp-video width="480"
- height="270"
- src="/static/samples/video/tokyo.mp4"
- poster="/static/samples/img/tokyo.jpg"
- layout="responsive"
- controls>
- <div fallback>
- <p>Your browser doesn't support HTML5 video.</p>
- </div>
- <source type="video/mp4"
- src="/static/samples/video/tokyo.mp4">
- <source type="video/webm"
- src="/static/samples/video/tokyo.webm">
- </amp-video>
- Autoplay
- Setting autoplay will automatically play/pause the video as it is
scrolled into/out of view on supported browsers.
The video is automatically muted before autoplay starts, when the user
taps the video, the video is unmuted.
- If the user has interacted with the video
- (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in
or out of view, the state of the video remains as how the user left it.
具体 AMP 视频案例: https://iprog-programmer.chinaobd2.com/
来源: http://www.bubuko.com/infodetail-3036161.html