CSS中的video標簽可以非常方便地實現視頻播放,而通過設置循環屬性可以讓視頻自動重復播放。
循環屬性是通過設置"loop"屬性來實現的,例如:
<video src="example.mp4" loop></video>
上述代碼中,video標簽的loop屬性設置為true,視頻會自動循環播放。
此外,在CSS中通過設置animation屬性,也可實現視頻循環播放。格式如下:
@keyframes loop_video {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.video {
animation: loop_video 5s linear infinite;
}
上述代碼中,通過設置@keyframes定義視頻循環的動畫變化,其中from表示變化的起始點,to表示變化的終點,這里以旋轉360度為例,表示視頻不斷地循環播放。實現這個動畫循環,通過在視頻盒子的class中設置loop_video動畫,animation-duration為動畫持續時間,infinite為循環播放的次數。
通過以上兩種方式,可以方便地在CSS中實現視頻循環播放。