video { width: 100%; height: auto; background-color: black; } video:not([controls]) { display: none; }
video
模块可以设置视频的宽度和高度,以及背景色。下面的示例是将视频填充整个屏幕,背景色为黑色。
video
也可以设置控件的显示与隐藏。在下面的示例中,如果video
没有controls
属性,那么就会隐藏它。
video::-webkit-media-controls { display: none !important; } video::-webkit-media-controls-enclosure { width: 0 !important; height: 0 !important; overflow: hidden; }
如果需要完全自定义视频控件,可以用下面的代码来实现。它会隐藏掉默认的控件,并将控件容器的大小设为0。
另外,video
模块还支持其他的一些属性和方法,如:autoplay
、loop
、preload
等属性,以及play()
、pause()
等方法。