美文网首页
控制 video 标签的控制栏组件

控制 video 标签的控制栏组件

作者: 花影_62b4 | 来源:发表于2020-10-20 10:17 被阅读0次

    当 video 标签添加上 controls 属性时,页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。

     <video

                  style="width:500px;height:100%"

                  controls="controls"

                  autoplay

                  poster="视频未加载时封面图片"

                  id="video"

       ></video>

    //全屏按钮

    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;

        }

    相关文章

      网友评论

          本文标题:控制 video 标签的控制栏组件

          本文链接:https://www.haomeiwen.com/subject/mkwrmktx.html