兼容性差
因为是原生组件
层级最高
iOS系统 和 安卓系统展示方式不一样
整理了一些有效的方法
关于 标签的 css 样式
//全屏按钮
video::-webkit-media-controls-fullscreen-button {
display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
display: none;
}
//进度条
video::-webkit-media-controls-timeline {
display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display{
display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
display: none;
}
//所有控件
video::-webkit-media-controls-enclosure{
display: none;
}
禁止ios自动全屏属性
// 不希望用户来拖动进度条的话,可以直接使用 playsinline属性,webkit-playsinline属性
// 注：iPhone Safari 中播放视频只能全屏
来做补充，有的朋友问到 为什么我加了 autoplay 属性有的手机不能自动播放，而加了 muted 属性之后就可以了，那极有可能是因为 权限问题， 从设置中开通浏览器的音频权限，点击允许就OK了。 如果单个网址打不开权限，那就直接设置允许全部的网址自动播放音频。 这可能就是为什么muted能让实现autoplay的原因