H5页面中 video 标签的坑

1. 兼容性差
2. 因为是原生组件
3. 层级最高
4. 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自动全屏属性

<video webkit-playsinline="true" playsinline="true"></video>
// 不希望用户来拖动进度条的话,可以直接使用 playsinline属性,webkit-playsinline属性
// 注：iPhone Safari 中播放视频只能全屏

来做补充，有的朋友问到 为什么我加了 autoplay 属性有的手机不能自动播放，而加了 muted 属性之后就可以了，那极有可能是因为 权限问题， 从设置中开通浏览器的音频权限，点击允许就OK了。 如果单个网址打不开权限，那就直接设置允许全部的网址自动播放音频。 这可能就是为什么muted能让实现autoplay的原因