如何在各种浏览器中禁用HTML 5视频播放器的全屏按钮，特别是IE、Edge、Firefox、Opera和Safari？

Question

如何在各种浏览器中禁用HTML 5视频播放器的全屏按钮，特别是IE、Edge、Firefox、Opera和Safari？

3

我试图在Chrome中通过以下方式实现这一点...

video::-webkit-media-controls-fullscreen-button {
  display: none;
}

有时出现不工作的情况。我非常需要一个永久的解决方案。

我请求这些人：

这不是SO上其他问题的重复。
那个解决方案不起作用，如果你想测试的话。

这就是为什么我再次提出此问题的原因。

- Dara Naveen Kumar

1

可能是如何在HTML5中隐藏视频标签的全屏按钮的重复问题。 - Budyn

1

哦，不好了。亲爱的@Budyn，那个解决方案不起作用，而且它只适用于Chrome浏览器。在投下反对票之前，您可以先检查一下。谢谢！ - Dara Naveen Kumar

1

我没有给你点踩。只是它看起来和另一个一模一样，所以我给了你一个例子。 - Budyn

1

没关系！如果您知道这个问题，请给我建议。 - Dara Naveen Kumar

1

@DaraNaveenKumar，正如链接问题中用户“paulitto”的答案所示，除了Chrome浏览器之外的其他浏览器无法使用CSS实现。顺便说一句，我认为你不会得到比链接问题中提供的更好的答案。无论如何，如果您想删除全屏按钮，则必须使用自定义视频播放器。 - marcramser

1

首先，我感谢您通过上述评论给予的所有回应。亲爱的@marcramser，感谢您的建议。但是我没有使用第三方JS插件的选项。这就是为什么我坚持使用它的原因。我知道市场上有很多免费的JS播放器插件可用。但我的限制是不使用除HTML 5视频播放器之外的其他内容。谢谢。 - Dara Naveen Kumar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- marcramser · Accepted Answer

您可以创建自己的控件（您需要进行样式设置，但我认为这不应该是问题）。 JSFiddle 带有解释的教程 HTML5:

<div id="video-container">
     <!-- Video -->
     <video id="video" width="640" height="365">
    <source src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4">
    <p>
      Your browser doesn't support HTML5 video.
      <a href="https://www.w3schools.com/htmL/mov_bbb.mp4">Download</a> the video instead.
    </p>
  </video>
  <!-- Video Controls -->
  <div id="video-controls">
    <button type="button" id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0">
    <button type="button" id="mute">Mute</button>
    <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
    <button type="button" id="full-screen" disabled>Full-Screen</button>
  </div>
</div>

以及这是用JavaScript实现的。

$( document ).ready(function() {

  // Video
  var video = document.getElementById("video");

  // Buttons
  var playButton = document.getElementById("play-pause");
  var muteButton = document.getElementById("mute");

  // Sliders
  var seekBar = document.getElementById("seek-bar");
  var volumeBar = document.getElementById("volume-bar");


// Event listener for the play/pause button
playButton.addEventListener("click", function() {
  if (video.paused == true) {
    // Play the video
    video.play();

    // Update the button text to 'Pause'
    playButton.innerHTML = "Pause";
  } else {
    // Pause the video
    video.pause();

    // Update the button text to 'Play'
    playButton.innerHTML = "Play";
  }
});

// Event listener for the mute button
muteButton.addEventListener("click", function() {
  if (video.muted == false) {
    // Mute the video
    video.muted = true;

    // Update the button text
    muteButton.innerHTML = "Unmute";
  } else {
    // Unmute the video
    video.muted = false;

    // Update the button text
    muteButton.innerHTML = "Mute";
  }
});

// Event listener for the seek bar
seekBar.addEventListener("change", function() {
  // Calculate the new time
  var time = video.duration * (seekBar.value / 100);

  // Update the video time
  video.currentTime = time;
});

// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
  // Calculate the slider value
  var value = (100 / video.duration) * video.currentTime;

  // Update the slider value
  seekBar.value = value;
});

// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
  video.pause();
});

// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
  video.play();
});

// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
  // Update the video volume
  video.volume = volumeBar.value;
});

});