HTML页面原生VIDEO标签隐藏下载按钮功能-html教程-PHP中文网

首页

web前端

html教程

HTML页面原生VIDEO标签隐藏下载按钮功能

不言

May 05, 2018 am 10:11 AM

htmlvideo标签

这篇文章主要介绍了HTML页面原生VIDEO标签隐藏下载按钮功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧

在写web项目的时候，遇到简介页面有一个单独的简介视频，只有这一个短短的视频所以没有使用任何video组件，所以运用原生video标签就想解决问题。

虽然简介视频是非付费的，但也不希望会有下载按钮或者可以视频另存为，所以找到一个可以看上去没有下载功能的方法，做一下笔记。

想要隐藏以上下载按钮，三个样式就可以了，不废话直接贴代码：

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

说白了就是把下载按钮移动到视窗外面，但是这些CSS找了好久啊！！

这种方法并不能真正阻止视频的下载，“有心”的用户还是可以在缓存文件里找到加载过的视频文件的，所以就像标题写的一样，只是隐藏。

真正的阻止视频的下载还是需要通过服务器端对视频地址进行加密验证。

相关推荐：

HTML5 video视频字幕的使用和制作方法

HTML5触摸事件实现移动端简易进度条的实现方法

以上是HTML页面原生VIDEO标签隐藏下载按钮功能的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

如何在 Windows 11 中修复 VIDEO DXGKRNL 致命错误Apr 13, 2023 pm 08:22 PM

点击进入：ChatGPT工具插件导航大全一些用户抱怨他们的计算机经常崩溃，停止代码为VIDEO DXGKRNL FATAL ERROR。此特定问题仅偶尔发生，并且错误检查值为 0x00000113，这表明 Microsoft DirectX 图形内核子系统中存在违规，如错误检查值所示。通常，当损坏的驱动程序干扰图形卡图形处理器的正常运行时，就会出现错误。如果您目前正在努力解决此特定问题，我们的文章将为您提供各种高质量的故障排除技巧。您会在下面找到遇到完全相同错误的其他用户已成功使用的各种方法。是

Motorola Razr 50 Ultra shows up in leaked teaser video with waterproof case and huge secondary displayJun 20, 2024 pm 09:31 PM

Over the past few weeks, the most important specifications and the euro prices of the Motorola Razr 50 and the Razr 50 Ultra have been leaked. Now the enormously reliable leaker @MysteryLupin was able to publish the teaser video embedded below, which

Snapdragon X Elite CPU performance nearly identical on battery and plugged-in in Vivobook S15 benchmarksJun 20, 2024 pm 03:59 PM

Despite the hype surrounding the Qualcomm Snapdragon X Elite, it has been a rather mediocre launch. In our review, we found that the most impressive part of the new Qualcomm Snapdragon X Elite X1E-78-100-powered Asus Vivobook S 15 was the seamlessnes