HTML5是一個包含許多新功能和改進的版本,其中之一是它支持不同大小的視頻。在HTML5中,您可以使用尺寸屬性來設置視頻播放器的大小,如下所示:
<video width="640" height="360" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <p>Your browser doesn't support HTML5 video. </p> </video>
在上面的代碼中,width和height屬性用于設置視頻播放器的寬度和高度。除此之外,該代碼還包括一個控件屬性,該屬性使用戶可以在視頻播放期間暫停,停止或重新播放視頻。
如果您希望根據不同屏幕尺寸自適應視頻播放器,可以使用百分比寬度代替像素寬度,如下所示:
<video width="100%" height="auto" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <p>Your browser doesn't support HTML5 video. </p> </video>
在上面的代碼中,寬度設置為100%會使視頻播放器填充其容器的寬度。高度設置為“auto”將根據寬高比自動調整視頻播放器的高度。