javascript - How can I disable HTML 5 Video Player full screen button in all kind of browsers, especially in IE, Edge &

admin管理员组

文章数量:1420205

I tried to achieve this in chrome by doing like this..

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

It is sometimes not working. I need a permanent solution for this very badly.

I am requesting the people:

1. This is not a duplicate question for any other in SO.
2. That solution is not working, test it if you want.

That's why I asked this again.

I tried to achieve this in chrome by doing like this..

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

It is sometimes not working. I need a permanent solution for this very badly.

I am requesting the people:

1. This is not a duplicate question for any other in SO.
2. That solution is not working, test it if you want.

That's why I asked this again.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 27, 2018 at 8:56 Nisarg Shah 14.6k66 gold badges3838 silver badges5757 bronze badges asked Jul 27, 2018 at 8:48 Dara Naveen KumarDara Naveen Kumar 17933 silver badges1111 bronze badges 6

• 1 Possible duplicate of How to hide full screen button of the video tag in HTML5 – Budyn Commented Jul 27, 2018 at 8:49
• 1 Oh.. No. my dear @Budyn. That solution is not working and it is for chrome only. you can check it out before pushing a down vote. Thanks!! – Dara Naveen Kumar Commented Jul 27, 2018 at 8:55
• 1 I didn't down vote. It just looked identical to me so I gave you an example – Budyn Commented Jul 27, 2018 at 9:02
• 1 It's okay!! Suggest me any solution if you know about this problem. – Dara Naveen Kumar Commented Jul 27, 2018 at 9:03
• 1 @DaraNaveenKumar as you can see in the answer of user "paulitto" in the linked question it is not possible with css for other browsers than chrome. Btw I don't think you will get a better answer than the one provided in the linked question. Anyway I think you have to use a custom video player if you want to remove the full screen button. – marcramser Commented Jul 27, 2018 at 9:05

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

You can create you own control (you have to do the styling but I think that should not be a problem).

JSFiddle

Tutorial with explanations

The HTML5:

<div id="video-container">
     <!-- Video -->
     <video id="video" width="640" height="365">
    <source src="https://www.w3schools./htmL/mov_bbb.mp4" type="video/mp4">
    <p>
      Your browser doesn't support HTML5 video.
      <a href="https://www.w3schools./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>

And this as 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;
});

});

本文标签：