我是AMP开发的新手,无法绕过布局.我正在尝试创建整页封面背景视频.
我已尝试过变种layout='responsive'但我不知道页面加载前的页面高度和AFAIK我无法在页面加载后动态更新width或height动态.我基本上是在模仿object-fitCSS道具.object-fit: cover显然是由AMP CSS支持的.
我尝试object-fit在下面的代码段中使用,但无济于事.在代码段中,使用div video中的普通HTML5 标记显示预期的行为expected.
<!doctype html>
<html ?>
<head>
<meta charset="utf-8">
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-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>
<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>
<style amp-custom>
* {
box-sizing: border-box;
}
.container {
height: 100vh;
width: 100vw;
border: 1px solid red;
position: relative;
}
.video {
object-fit: cover;
height: 100vh;
position: absolute;
}
h1 {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.expected {
display: block;
}
</style>
</head>
<body>
<div class='container'>
<amp-video layout="fill"
autoplay="autoplay" muted loop preload="auto"
class="video">
<source src='https://davidalbertoadler.com/assets/img/Fish-Tank/MP4/Fish-Tank.mp4'>
</amp-video>
</div>
<div class="container expected">
<h1>Expected</h1>
<video layout='fill'
autoplay="autoplay" muted loop preload="auto"
class="video">
<source src='https://davidalbertoadler.com/assets/img/Fish-Tank/MP4/Fish-Tank.mp4'>
</video>
</div>
</body>
</html>我想这就是您正在寻找的。
\n\n如果需要，视频位于背景中，位置固定，内容位于前景中。
\n\n<!doctype html>\r\n<html \xe2\x9a\xa1>\r\n\r\n<head>\r\n <meta charset="utf-8">\r\n <title>My AMP Page</title>\r\n <link rel="canonical" href="self.html" />\r\n <meta name="viewport" content="width=device-width,minimum-scale=1">\r\n <style amp-boilerplate>\r\n body {\r\n -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;\r\n -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;\r\n -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;\r\n animation: -amp-start 8s steps(1, end) 0s 1 normal both\r\n }\r\n \r\n @-webkit-keyframes -amp-start {\r\n from {\r\n visibility: hidden\r\n }\r\n to {\r\n visibility: visible\r\n }\r\n }\r\n \r\n @-moz-keyframes -amp-start {\r\n from {\r\n visibility: hidden\r\n }\r\n to {\r\n visibility: visible\r\n }\r\n }\r\n \r\n @-ms-keyframes -amp-start {\r\n from {\r\n visibility: hidden\r\n }\r\n to {\r\n visibility: visible\r\n }\r\n }\r\n \r\n @-o-keyframes -amp-start {\r\n from {\r\n visibility: hidden\r\n }\r\n to {\r\n visibility: visible\r\n }\r\n }\r\n \r\n @keyframes -amp-start {\r\n from {\r\n visibility: hidden\r\n }\r\n to {\r\n visibility: visible\r\n }\r\n }\r\n </style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>\r\n <script async src="https://cdn.ampproject.org/v0.js"></script>\r\n <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>\r\n <style amp-custom>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n \r\n .background {\r\n height: 100vh;\r\n width: 100vw;\r\n border: 1px solid red;\r\n position: fixed;\r\n }\r\n \r\n .content-holder {\r\n position: relative;\r\n background-color: #fff;\r\n max-width: 250px;\r\n margin: auto;\r\n min-height: 2000px;\r\n padding: 10px;\r\n }\r\n \r\n .content {\r\n position: relative;\r\n }\r\n </style>\r\n</head>\r\n\r\n<body>\r\n <div class=\'background\'>\r\n <amp-video width="480" height="270" src=\'https://davidalbertoadler.com/assets/img/Fish-Tank/MP4/Fish-Tank.mp4\' autoplay="autoplay" layout="responsive">\r\n <source src=\'https://davidalbertoadler.com/assets/img/Fish-Tank/MP4/Fish-Tank.mp4\'>\r\n </amp-video>\r\n </div>\r\n <div class="content-holder">\r\n <div class="content">\r\n <h1>This is content</h1>\r\n </div>\r\n </div>\r\n</body>\r\n\r\n</html>| 归档时间： |
|
| 查看次数： |
319 次 |
| 最近记录： |