完美解决video标签控件的隐藏与使用

最新推荐文章于 2024-06-24 17:26:32 发布

置顶

ajaxPost293614

最新推荐文章于 2024-06-24 17:26:32 发布

阅读量1.3w

点赞数

分类专栏：小技巧 HTML5 JavaScript 文章标签： html5 css3 javascript vue.js css

本文链接：https://blog.csdn.net/caoyan0829/article/details/105091216

版权

本文主要介绍了如何在HTML5的video标签中只保留进度条，以满足特定需求。通过设置controls属性为false并自定义控件实现播放、暂停和进度拖动功能。此外，还提供了一个CSS解决方案，可以直接隐藏不需要的原生控件，达到简洁显示的效果。

摘要由CSDN通过智能技术生成

        <video
          ref="video"
          playsinline="true"
          x-webkit-airplay="true"
          x5-playsinline="true"
          webkit-playsinline="true"
          x5-video-player-type="h5"
          width="100%"
          controls
          :poster="detail.pictureUrl"
          controlslist="nofullscreen nodownload noremoteplayback"
        >
          <source :src="videoSrc" type="video/mp4" />
        </video>

1.我自己的需求是只保留进度条

需求：