HTML5視頻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML5新增視頻標簽</title>
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<video src="media/mi.mp4"></video>
</body>
</html>
不播放的樣式
controls 向用戶展示播放控制元件
<video src="media/mi.mp4" controls></video>
poster=" " 視頻還在加載的時候顯示這張圖片
<video src="media/mi.mp4" controls poster="media/mi9.jpg"></video>
可以設定寬高
<video src="media/mi.mp4" controls poster="media/mi9.jpg" width="500px"></video>
由于錄制視頻有些麻煩這里就不配錄制視頻了
autoplay 視頻自動播放 谷歌瀏覽器中需要加上muted
<video src="media/mi.mp4" autoplay muted></video>
loop 回圈播放
<video src="media/mi.mp4" loop></video>
preload="auto" 預先加載視頻 preload="none" 不預先加載視頻 有自動播放autoplay 時不用考慮這個
muted靜音播放 和自動播放搭配使用
<video src="media/mi.mp4" muted></video>
屬性表
ps:本圖來自黑馬程式員
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/277808.html
標籤：其他
上一篇：閱讀會語錄記載（一）
下一篇：4.17訓練日記