今天寫項目的時候遇到往頁面添加視頻,忘了一些屬性,今天特地翻了一下筆記,完了總結一下：
下面是代碼演示
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
????<style>
????????*{
????????????padding:?0;
????????????margin:?0;
????????}
????????.box{
????????????width:?100%;
????????????height:?388px;
????????????background:?orange;
????????????display:?flex;
????????????justify-content:?space-between;
????????}
????????.box?div{
????????????width:?388px;
????????????height:?388px;
????????????background:?orchid;
????????}
????</style>
</head>
<body>
????<div?class="box">
????????<div>
????????????<video?width="388px"?height="100%"?loop????controls??poster="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2396361575,51762536&fm=26&gp=0.jpg">
????????????????<source?src="https://hisense-img.oss-cn-qingdao.aliyuncs.com/2018/10/07/4486c1d7-c884-4a0a-8ad8-8b11431e13f1.mp4">
????????????</video>
????????</div>
????????<div>
????????????<video?width="388px"?height="100%"?loop??controls?poster="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2989832003,2963819663&fm=26&gp=0.jpg">
????????????????<source?src="https://img.shop.hisense.com/2020/09/15/99a02259-e1d8-4d05-937e-10ccba9575b0.mp4">
????????????</video>
????????</div>
????????<div>
????????????<video?width="388px"?height="100%"?loop??controls?poster="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2370333706,3894132172&fm=26&gp=0.jpg">
????????????????<source?src="https://hisense-img.oss-cn-qingdao.aliyuncs.com/2018/10/07/4486c1d7-c884-4a0a-8ad8-8b11431e13f1.mp4">
????????????</video>
????????</div>
????</div>
</body>
</html>
效果如圖：
