问题
Can't seem to find an answer for this anywhere.
I am using a standard HTML5 tag to embed a video into page:
<video controls>
<source src="video/intro-video.mp4" type="video/mp4"/>
</video>
However, in Chrome's default controls on the right, three dots show up (options), however, when you click on them, it goes to a blank screen and there's no way to get out if it except for refreshing the entire page.
How do you make the options either go away or prevent a blank screen?
Thank you.
回答1:
I know it's too late but it be useful for others, you can add "nodownload" in controls list which will hide the download option from the video and add "disablepictureinpicture" inside the video tag which will hide the picture in picture option and by this way the three dots gets hidden
<video width="100%" controls disablepictureinpicture controlslist="nodownload">
working sample
回答2:
if you disable the options, using the relevant exclusions from the list below, the dots should disappear:
<video controls controlsList="nofullscreen nodownload noremoteplayback">
</video>
See ControlsList for more details
回答3:
Ok, got it! It appears that "Options" button behaves differently based on how video element was embedded in the page. Essentially, it offers, Download or "Picture-in-Picture" features or both, which, if the page is a wide scrollable site with dynamically generated content, caused a blank screen when clicked, which was my issue. Two ways I can solve that problem:
Embed video in a separate fixed container (like a modal pop-up)
Use a
disablePictureInPictureattribute to eliminate the Picture-in-Picture feature altogether. https://wicg.github.io/picture-in-picture/#dom-htmlvideoelement-disablepictureinpicture
来源：https://stackoverflow.com/questions/54507905/html5-video-player-controls-in-chrome-three-dots-on-the-right-open-blank-scree