HTML5网页投屏需依协议选择方案：一、Chrome Cast API要求HTTPS并引入SDK；二、WebRTC+DLNA需代理绕CORS并发送SOAP指令；三、厂商SDK适配特定电视系统；四、浏览器扩展桥接实现本地设备发现与推送。
如果您在网页中使用 HTML5 播放视频或音频，但无法将内容投送到电视设备，则可能是由于网页未正确调用投屏 API 或目标设备未被识别。以下是实现 HTML5 页面通过 Chromecast 或 DLNA 协议投屏到电视设备的具体方法：
一、使用 Chrome 浏览器内置 Cast API 投屏
Chrome 浏览器原生支持 Cast API，允许网页通过 JavaScript 调用 Google Chromecast 设备。该方法要求网页运行在 HTTPS 环境下，且用户已安装并启用 Google Cast 扩展（桌面端）或系统级 Cast 功能（移动端）。
1、确保当前网页部署在 HTTPS 协议下，HTTP 协议将导致 Cast API 初始化失败。
2、在页面 <head> 中引入官方 Cast SDK：https://www.gstatic.com/cv/js/cast_sender.js。
立即学习“前端免费学习笔记（深入）”；
3、初始化 CastSession，在 JavaScript 中调用 cast.framework.CastContext.getInstance() 并监听 cast.framework.CastContextEventType.SESSION_STATE_CHANGED 事件。
4、为播放控件绑定投屏按钮点击事件，调用 cast.framework.CastContext.getInstance().requestSession() 启动会话。
5、会话建立后，使用 cast.framework.RemotePlayer 加载媒体，传入包含 contentId、contentType 和 streamType 的媒体信息对象。
二、通过 WebRTC + DLNA 发现与推送媒体流
HTML5 本身不直接支持 DLNA 协议，但可通过浏览器扩展或后台代理服务实现 DLNA 设备发现与媒体推送。该方法依赖本地网络中的 UPnP/DLNA 控制点能力，需配合具备 DLNA Server 功能的电视或接收器。
1、在网页中使用 JavaScript 调用 fetch('http://[TV-IP]:8080/upnp/control/ContentDirectory') 探测局域网内响应的 DLNA 设备（需绕过 CORS，通常需后端代理中转）。
2、解析返回的 XML 响应，提取设备的 UDN 和 AVTransport 服务地址。
3、构造 SOAP POST 请求，向 AVTransport 服务发送 SetAVTransportURI 指令，URI 值设为当前 HTML5 <video> 元素的 src 属性值（需为可公网/局域网直访的 URL）。
4、调用 Play 操作启动播放，请求头中必须包含 SOAPACTION: "urn:schemas-upnp-org:service:AVTransport:1#Play"。
三、利用第三方 Web SDK 封装投屏能力
部分厂商提供兼容 HTML5 的轻量级投屏 SDK，如 LG WebOS 的 webOS TV SDK、三星 Tizen 的 Tizen TV Web API，这些 SDK 可在特定品牌电视浏览器中直接调用系统投屏接口。
1、在 <head> 中加载对应厂商 SDK，例如三星 Tizen：<script src="$WEBAPIS/webapis/webapis.js"></script>。
2、检测运行环境是否为目标 TV 平台，调用 webapis.productinfo.getTVInfo() 或 window.webOS && webOS.platform 判断。
3、获取当前视频元素的 currentSrc 或 srcObject，转换为适配 TV 解码格式的 URL（如 MP4/H.264+AAC）。
4、调用厂商 API 启动投屏，例如 LG：lgtv.sendCommand('ssap://media.play', { url: videoUrl })；三星：webapis.avplay.open(videoUrl)。
四、借助浏览器扩展桥接本地投屏服务
当网页自身无法直接访问本地网络设备时，可依赖浏览器扩展作为中间层，由扩展程序完成设备发现、协议封装和指令下发。该方法不依赖网页所在服务器协议，但需用户主动安装并授权扩展。
1、开发或安装具备 UPnP 发现与 Chromecast 协议封装能力的 Chrome 扩展，其 manifest.json 中声明 "host_permissions": ["http://*/*", "https://*/*"] 和 "permissions": ["downloads", "management"]。
2、网页通过 chrome.runtime.sendMessage() 向扩展发送媒体元数据，包括 mimeType、duration、title 和 url。
3、扩展收到消息后，执行本地网络扫描，匹配已知 Chromecast 或 DLNA 设备的 IP 与端口。
4、扩展调用系统级投屏 SDK（如 Windows 的 Windows.Devices.Enumeration）或直接发起 HTTP POST 至设备控制端点，推送媒体资源。
5、网页监听扩展返回的 session_id 和 device_name，用于后续状态同步与停止控制。
