时间戳

首页 > 解决方案 > 如何更改视频默认选项

javascript - 如何更改视频默认选项

问题描述

我最近创建了一个视频网站。在视频的底部，有 3 个点，当我们单击它们时，我们可以看到其他功能。但是当我从我的手机上点击 3dots 时，这看起来非常丑陋和巨大，我们可以对其进行一些更改吗？

#video, #vd, #vd1, #vd4, #vd5, #vd6, #vd7, #vd8{
    height: 15em;
    width: 8em;
  }
<video id="video" width="640" height="480" controls>
            <source src="https://player.vimeo.com/external/448795514.sd.mp4?s=6a4abade3728b02b15506a53807bfbc9cc38f930&profile_id=165&oauth2_token_id=57447761">
          </video>

在此处输入图像描述

看它是如此巨大并且从视频中出来......有没有办法让它变小

标签： javascripthtmlcss

解决方案

您需要在 CSS/或 HTML 中隐藏控件，并为我为暂停和播放实现的视频元素提供自定义控件设计以供参考

删除控件属性的示例

isPlaying = false;
function playPause(){
  if(!isPlaying) {
document.getElementById('video').play()
document.getElementById('play-pause').innerText = "pause"
isPlaying = !isPlaying
}else{
document.getElementById('video').pause()
document.getElementById('play-pause').innerText = "play"
isPlaying = !isPlaying
}
}
#video, #vd, #vd1, #vd4, #vd5, #vd6, #vd7, #vd8{
    height: 15em;
    width: 8em;
  }
  // alternatively you can remove controls in video HTML element below code shows how it can be hidden using css(works only in few browsers)
 video::-webkit-media-controls-panel {
display: none !important;
opacity: 1 !important;
    <video id="video" width="640" height="480" >
                <source src="https://player.vimeo.com/external/448795514.sd.mp4?s=6a4abade3728b02b15506a53807bfbc9cc38f930&profile_id=165&oauth2_token_id=57447761">
     </video>
 <button id="play-pause" onclick="playPause()"> play </button>

推荐阅读