当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。
<video id="shipin" src="video.mp4" muted controls preload="none"></video>
若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。
- <style>
/* 隐藏控制栏 */
video::-webkit-media-controls {
display: none !important;
}
video::-moz-media-controls {
display: none !important;
}
video::-ms-media-controls {
display: none !important;
}
</style>
如果页面上连续加载多个视频，会存在加载缓慢的问题。为了避免影响页面加载速度，可以通过JavaScript控制视频的加载和播放，待页面加载完成后再播放视频。
- <script type="text/javascript">
- var video = document.getElementById("shipin");
- window.onload = function() {
- video.preload = "auto";
- video.play();
- };
- </script>
将video的preload属性设为none，即禁止浏览器自动加载视频。
当页面加载完成后，通过JavaScript将preload属性设为auto，触发视频的加载和播放。
