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的原因
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的html5 中 video 标签,H5页面中 video 标签的坑的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言面向对象编程（二）：继承详解
- 下一篇： C语言面向对象编程（三）：虚函数与多态