amp-video
Sematkan video MP4 dalam HTML AMP, file sumber video harus di HTTPS
1 Codenya
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
2 Disposisi
Script amp-video adalah label kustom pesanan internal dan secara otomatis diimpor melalui waktu pelaksanaan AMP.
Masukkan skrip berikut, tepat di bawah <head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
3 Penggunaan dasar
Video sederhana dengan regulator. amp-video mendukung format berikut:
MP4, WebM, Ogg, beserta semua format yang kompatibel dengan tag video HTML5 termasuk HLS.
Atribut Boolean (kontrol dalam kasus ini) harus tanpa nilai. Ekspresi dengan nilai, sebagai controls="controls" tidak valid
Codenya
<amp-video width=480
height=270
src="/video/tokyo.mp4"
poster="/img/tokyo.jpg"
layout="responsive"
controls>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<source type="video/mp4"
src="/video/tokyo.mp4">
<source type="video/webm"
src="/video/tokyo.webm">
</amp-video>
Demonya
Your browser doesn't support HTML5 video.
4 Auto pemutaran otomatis
Dalam mode putar otomatis ini akan diputar secara otomatis, Anda juga dapat menjeda video.
Video secara otomatis dimatikan sebelum memulai pemutaran otomatis, ketika pengguna menekan video, audio video diaktifkan.
Jika pengguna telah berinteraksi dengan video (misalnya, Mute / Restore, Jeda, dll.), Dan pergi untuk melihat bagian lain, video berhenti sampai pengguna kembali ke bagian yang sama di mana video itu berada, video akan tetap seperti yang saya tinggalkan.
Code autoplay
<amp-video width=480
height=270
src="/video/tokyo.mp4"
poster="/img/tokyo.jpg"
layout="responsive"
controls
autoplay>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<source type="video/webm"
src="/video/tokyo.webm">
</amp-video>
Demonya
Your browser doesn't support HTML5 video.
Full struktur kode lengkap
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="https://blogsgoblogger.blogspot.com/2016/12/cara-menyisipkan-video-mp4-dalam-amp.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<amp-video width=480
height=270
src="/video/tokyo.mp4"
poster="/img/tokyo.jpg"
layout="responsive"
controls>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<source type="video/mp4"
src="/video/tokyo.mp4">
<source type="video/webm"
src="/video/tokyo.webm">
</amp-video>
<amp-video width=480
height=270
src="/video/tokyo.mp4"
poster="/img/tokyo.jpg"
layout="responsive"
controls
autoplay>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<source type="video/webm"
src="/video/tokyo.webm">
</amp-video>
</body>
</html>