Research on Hiding Download Button for HTML5 Video in Chrome 55

Problem Background and Technical Analysis

With the upgrade from Chrome version 54 to 55, the default control interface of HTML5 video elements underwent a significant change: the addition of a download button. While this enhancement improves the completeness of user experience, in certain specific scenarios, content providers may wish to restrict users from downloading video content to protect copyright or control content distribution.

Solution One: controlsList Attribute Method

Google introduced the controlsList attribute in Chrome 58 and later versions, which currently represents the most standard and recommended solution. This attribute allows developers to precisely control which buttons appear in media element controls.

Implementation code:

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

The controlsList attribute supports multiple values, including:

• nodownload: Hides the download button
• nofullscreen: Hides the fullscreen button
• noremoteplayback: Disables remote playback

The advantage of this method lies in its high standardization and the fact that it doesn't affect the normal display and functionality of other control elements.

Solution Two: CSS Pseudo-element Method

Before the introduction of the controlsList attribute, developers primarily relied on CSS pseudo-elements to hide the download button. Although this approach represents a non-standard solution, it remains useful in certain specific scenarios.

Complete CSS implementation code:

video::-internal-media-controls-download-button {
    display: none;
}

video::-webkit-media-controls-enclosure {
    overflow: hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

Analysis of how this method works:

• The ::-internal-media-controls-download-button pseudo-element directly targets and hides the download button
• ::-webkit-media-controls-enclosure sets overflow to hidden, ensuring the hidden button doesn't affect layout
• ::-webkit-media-controls-panel compensates for layout changes after hiding the button by increasing width

In-depth Technical Principle Analysis

Chrome browser's media control implementation is based on Shadow DOM technology, which prevents traditional CSS selectors from directly accessing internal control elements. WebKit-prefixed pseudo-elements provide access to these Shadow DOM elements, but this access method is browser-specific and may change with browser version updates.

From the perspective of technological evolution, the introduction of the controlsList attribute represents browser vendors' response to developer needs, providing a more stable and standardized control method. In contrast, while the CSS pseudo-element method may be effective in some cases, it relies on browser internal implementation details and carries significant compatibility risks.

Browser Compatibility Analysis

controlsList Attribute:

• Chrome 58+: Full support
• Firefox: Partial support
• Safari: Limited support
• Edge: Supported in Chromium-based versions

CSS Pseudo-element Method:

• Only applicable to WebKit-based browsers (Chrome, Safari, etc.)
• May vary across different browser versions
• May not be supported in future versions

Best Practice Recommendations

Based on in-depth analysis of both methods, we recommend:

1. Prioritize using the controlsList attribute: This represents the direction of W3C standards and offers better long-term compatibility
2. Progressive enhancement strategy: Use both methods simultaneously to ensure desired effects across different browsers
3. Code example:

<style>
video::-internal-media-controls-download-button {
    display: none;
}
video::-webkit-media-controls-enclosure {
    overflow: hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}
</style>

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

Security and Copyright Considerations

It's important to emphasize that hiding the download button doesn't completely prevent users from downloading video content. Technically proficient users can still obtain video files through developer tools, network monitoring, and other methods. Therefore, this approach is more suitable as a user experience optimization measure rather than a true digital rights protection solution.

For scenarios requiring strict copyright protection, we recommend combining with other technical measures, such as:

• Video stream encryption (DRM)
• Dynamic URL and token verification
• Server-side access control

Conclusion and Future Outlook

This paper has thoroughly explored two main methods for hiding the HTML5 video download button in Chrome 55 and later versions. As web standards continue to evolve, we anticipate the emergence of more standardized solutions that provide developers with more stable and cross-browser control customization capabilities.

In practical development, we recommend closely monitoring the progress of relevant W3C standards and regularly testing compatibility across different browser versions to ensure consistent user experience.