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、在页面 中引入官方 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 元素的 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、在 中加载对应厂商 SDK，例如三星 Tizen：。
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，用于后续状态同步与停止控制。
