html5 中 video 标签,H5页面中 video 标签的坑

兼容性差

因为是原生组件

层级最高

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的原因