HTML视频如何平衡画质与防投屏-html教程-PHP中文网

controlsList="noremoteplayback"仅提示浏览器禁用原生投屏入口，非强制策略；Chrome/Edge支持良好，Safari自iOS 15.4起部分支持，Firefox不支持，且无法阻止系统录屏、第三方投屏App或物理盗录。

html视频如何平衡画质与防投屏

直接用 video 标签做画质切换 + 防投屏，本质是两件事：一件靠资源组织和 JS 控制，一件靠浏览器策略与属性组合。单靠 controlslist="noremoteplayback" 不足以防住所有投屏路径，而只做多分辨率 MP4 切换又容易被下载盗链——必须同步处理「内容交付」和「行为限制」。

用 `source` 切换画质时，别暴露原始 URL

手动切换的 src 属性最简单，但风险在于：URL 一旦写死在 HTML 或 JS 里，用户打开开发者工具就能复制全部清晰度地址。更稳妥的做法是：

所有视频资源走带签名的临时 URL（如 https://cdn.example.com/v/1234567890.mp4?expires=1730000000&sig=abc），有效期控制在 1 小时内
画质选项只传 ID 或 token（如 sd、hd），由前端调用后端接口动态获取当前有效 URL，再注入 video.src
禁用右键菜单：oncontextmenu="return false"，虽不能防开发者工具，但能拦住普通用户误操作

`controlslist="noremoteplayback"` 在哪些浏览器真正生效

这个属性不是银弹。它只影响浏览器原生投屏入口（比如 Chrome 地址栏的“投射”按钮、Edge 的“连接到设备”），但对以下场景无效：

iOS AirPlay：Safari 14+ 支持 noremoteplayback，但仅当视频在页面内播放（即有 playsinline）且未进入全屏时才起作用；一旦用户点全屏，AirPlay 图标仍会浮现
Windows 10/11 的“无线显示”功能：不识别该属性，需配合服务端 UA 检测 + 移动端降级为 poster 图
第三方投屏 App（如乐播、快投屏）：完全绕过浏览器策略，它们直接抓取页面 video 元素的 src 或内存帧

所以，真要防，得加一层：在 devicechange 或 visibilitychange 事件中检测屏幕数量突增或页面失焦，主动 pause() 并清空 src。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

画质越高，越要限制播放上下文

高码率视频（如 1080p@4Mbps）本身就会触发部分 Android WebView 或低端 iOS 设备的投屏自动唤醒逻辑。这不是 bug，是系统级优化：它认为“这么大的流，用户大概率想投出去看”。因此：

对 hd 及以上画质，强制添加 disablePictureInPicture 属性，防止 PiP 模式变相成为投屏跳板
避免同时设置 autoplay 和高画质 —— 自动播放 + 高码率 = 浏览器更倾向启用远程输出通道
在 loadedmetadata 后立即检查 video.videoWidth，若远超视口宽度（如 > 1920px），可主动降级并提示“已为您适配当前设备”

防投屏不是关掉一个开关就完事，它依赖于 URL 管控、播放状态感知、设备能力判断三者联动。画质切换本身越灵活，越需要把资源生命周期和用户行为绑定得更紧——否则你给的“高清”，可能正被另一台电视实时播放着。