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/

谷歌AM HTML视频代码amp-video示例的更多相关文章

  1. html5播放mp4视频代码

    1.nginx支持flv和mp4格式播放 默认yum安装nginx centos7安装nginx时候应该是默认安装nginx_mod_h264_streaming模块的 # nginx -V查看是否安 ...

  2. 安安视频网anan.video为您提供免费高清视频

    安安视频网anan.video为您提供免费高清视频,最新电影,电视剧,动漫,微电影,纪录片,音乐MV在线观看(高清):安安视频网,一个干净的视频在线播放网站,百万高清影视,视频在线观看. 安安视频网整 ...

  3. kindeditor自定义插件插入视频代码

    kindeditor自定义插件插入视频代码 1.添加插件js 目录:/kindeditor/plugins/diy_video/diy_video.js KindEditor.plugin('diy_ ...

  4. 视频转换器 Wondershare Video Converter Ultimate v11.5.1 中文便携版

    Wondershare Video Converter Ultimate 是万兴公司出品的一款多功能音视频转换.DVD 刻录软件.视频下载软件.有了它,您可以随时随地观看.下载.编辑.转换.刻录视频, ...

  5. 手机端wap站网页播放腾讯视频代码

    <div class="detail-con clear"> <div id="mod_player_wrap" class="mo ...

  6. H5外包团队:使用HTML5播放短视频代码分享

    滑动代码 /** * 滑动处理 */ function Touch() { this.init(); } Touch.fn = Touch.prototype; Touch.fn.init = fun ...

  7. 页面中插入视频的方法---video/embed/iframe总结

    1. video标签 当前主流的方法当然是HTML5中的video标签了,但是 当前,video 元素只支持三种视频格式: Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg ...

  8. 使用Quicktime 实现视频直播(Live video using Quicktime) (转)

    Quicktime是一个跨浏览器的播放插件,可以实现RTSP视频直播,可用于电视直播或视频监控平台.本文主要讲了关于播放器如何实现直播.事件响应.播放器全屏.动态修改播放路径等问题. 需要准备的软件: ...

  9. js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码

    一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...

随机推荐

  1. ios 运行时特征,动态改变控件字体大小

    需求:ex: 在不同尺寸的iPhone上面显示的字体大小不一样 https://github.com/rentzsch/jrswizzle #import <UIKit/UIKit.h> ...

  2. Cesium 动态更换模型贴图方法

    参考资料 github 讨论地址 示例代码地址 示例代码 var viewer = new Cesium.Viewer('cesiumContainer'); var scene = viewer.s ...

  3. 无法执行该VI,必须使用LabVIEW完整版开发系统才可以解决该错误

    该错误99%是因为你在某个vi中使用了外部系统组件,比如api,.net组件,ActiveX组件,com组件,所有不是Labview原生的接口,在你打包后,在其他没有安装这些组件的电脑上运行,就会出现 ...

  4. 通过 ContentResolver 读取联系人信息

    1.首先动态获取 读取联系人信息权限    <1>配置文件中声明对应权限 ) } ] == PackageManager.PERMISSION_GRANTED) { readContact ...

  5. angular.isElement()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. HTML入门9

    这一篇着眼于HTML里的音频和视频标签及相关处理: 传统技术不能再web中使用音频和视频,一致使用Flash后来因为一些HTML/CSS特性,安全问题,慢慢退出.在HTML5提出后,新特性<vi ...

  7. [LeetCode] Number of Matching Subsequences 匹配的子序列的个数

    Given string S and a dictionary of words words, find the number of words[i] that is a subsequence of ...

  8. 论Photoshop的正确安装姿势

    Adobe Photoshop 俗称 PS 专业的平面设计软件之一,是Adobe公司最最最牛逼的软件之一.入门很容易,但是想掌握高超的修图,仅靠后天99%的努力是没用的,设计这个东西,讲到底需要的是灵 ...

  9. Ubuntu mysql连接错误10060/10061的方法

    mysql 10060错误一般因为防火墙 ufw allow 3306; //允许外部访问3306端口ufw allow from 192.168.1.115;  //允许此IP访问所有的本机端口uf ...

  10. MVC 向页面传值方式总结(1)

    ViewData传值. HomeController.cs Co de: public ActionResult Index() {       ViewData["Title"  ...