如何在野生动物园中显示视频而不显示进度条？

Question

我正在尝试在我的网站上显示带有HTML video标签的视频。问题是我真的必须隐藏时间进度栏。我尝试了以下代码：

video::-webkit-media-controls {
    display:none !important;
}
video::-webkit-media-controls-timeline {
  display: none;
}

video::-webkit-media-controls-current-time-display {
  display: none;
}
video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}
video::-moz-range-track{
   display: none !important;
}
.IIV::-webkit-media-controls{
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

这是我的html ：（我用php尝试了一些东西）

<video <?php
        $ExactBrowserNameUA=$_SERVER['HTTP_USER_AGENT'];

        if (strpos(strtolower($ExactBrowserNameUA), "safari/") and strpos(strtolower($ExactBrowserNameUA), "opr/")==false and strpos(strtolower($ExactBrowserNameUA), "chrome/")==false) {
            // SAFARI
            $ExactBrowserNameBR="Safari";
        } else {
            // OUT OF DATA
            $ExactBrowserNameBR="OUT OF DATA";
        };
        if ($ExactBrowserNameBR=="Safari") {
            echo "controls";
        }
         ?> class="videoPub" id="videoPub" alt="Don gratuit">
            <source src=<?php echo '"ads/'.$selectedAd['ID_Ad'].'.mp4"';?> type="video/mp4">
            <source src=<?php echo '"ads/'.$selectedAd['ID_Ad'].'.webm"';?> type="video/webm">
           <br><b> La vidéo ne se charge pas sur votre navigateur :/ </b><br>
            Veuillez essayer avec un autre
        </video>
        <?php
        $agent = $_SERVER['HTTP_USER_AGENT'];
        if ($ExactBrowserNameBR!="Safari"){
            ?>
            <script type="text/javascript">
            var vid = document.getElementById("videoPub");
            vid.play();
            vid.removeAttribute('controls');
        </script>
        <?php 
        }else{
        ?>
            <script type="text/javascript">
           var vid = document.getElementById("videoPub");
            vid.play();
            </script>
            <?php 
        }
        ?>

但是在Safari上不起作用，进度条仍会显示...帮帮我！！感谢您的回答。[编辑]我真正想做的是在野生动物园中显示视频，没有控件，如果可能的话，还可以自动播放。问题是Safari只允许使用具有controls属性的视频...，但我集会要禁用进度条。

Answer 1

我注意到您的CSS中没有控制时间轴，也许这可以帮助您隐藏时间轴栏。我没有Safari可以测试它，但是在其他浏览器中可以正常工作。

video::-webkit-media-controls-timeline {
    display: none;
}