javascript - 如何在所有类型的浏览器中禁用 HTML 5 Video Player 全屏按钮，尤其是在 IE、Edge 和 Firefox、Opera、Safari 中？

Question

我试图通过这样做在 chrome 中实现这一点..

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

它有时不起作用。我非常需要一个永久性的解决方案。

我要求人们:

1. 这不是 SO 中任何其他问题的重复问题。
2. 该解决方案不起作用，如果需要，请对其进行测试。

这就是为什么我又问了这个问题。

Answer 1

您可以创建自己的控件(您必须进行样式设置，但我认为这应该不是问题)。

JSFiddle

Tutorial with explanations

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;
});

});