怎么确定视频html5_看视频是否用标签或JS检测API确定HTML5【确定】

18次阅读

可通过五种方法判断网页视频是否为html5原生实现:一、dom中搜索标签并验证属性;二、检查window.HTMLMediaElement是否存在;三、遍历video元素确认构造函数为HTMLVideoElement;四、监控video属性修改以识别js替换;五、Network面板查看媒体请求发起者及响应头。

怎么确定视频html5_看视频是否用标签或JS检测API确定HTML5【确定】js检测api确定html5【确定】”>

如果您需要判断当前网页中视频是否通过原生 html5

一、检查页面 DOM 中是否存在

该方法基于 HTML 文档结构分析,直接定位所有

1、打开目标网页,在页面任意位置右键选择“检查”或按 Ctrl+Shift+I(windows/linux)或 Cmd+Option+I(macOS) 打开开发者工具

2、切换到“Elements”(元素)面板,按 Ctrl+F(Windows/Linux)或 Cmd+F(macOS) 呼出搜索框。

立即学习前端免费学习笔记(深入)”;

3、输入 并回车,观察是否高亮显示至少一个以

4、若存在,点击该节点,查看其属性:确认其包含 srcpostercontrols 等典型 HTML5 video 属性,且无 type=”application/x-shockwave-flash” 类似声明。

二、使用 javaScript 检测 window.HTMLMediaElement 是否可用

该方法验证浏览器是否支持 HTML5 媒体接口基础类,是判断 HTML5 视频能力的前提条件,不依赖具体页面内容。

1、在开发者工具的“console”(控制台)面板中,输入并执行:window.HTMLMediaElement !== undefined

2、若返回 true,表明浏览器具备 HTML5 媒体元素基类支持;若返回 false,则基本可排除原生 HTML5 video 使用可能。

3、进一步执行:HTMLVideoElement.prototype.hasOwnProperty(‘play’),确认 video 元素是否具有标准播放方法。

三、遍历页面所有 video 元素并检测其网络与加载状态

该方法动态识别已加载的 HTML5 视频实例,并验证其是否实际启用 HTML5 渲染路径,可排除仅存在标签但被 JS 替换为其他播放器的情形。

1、在控制台中执行:document.querySelectorAll(‘video’).Length,获取当前页面 video 标签数量。

2、若数量大于 0,逐个检查首个 video 元素:const v = document.querySelector(‘video’); console.dir(v);

3、观察输出对象的构造函数名:若显示为 HTMLVideoElement,而非 HTMLObjectElementHTMLEmbedElement,则确认为 HTML5 原生 video。

4、检查其 v.src 是否为 http/https 协议地址,且 v.readyState 值不为 0(HAVE_NOTHING),可佐证其处于 HTML5 加载流程中。

四、检测 video 元素是否被 javascript 动态替换

该方法用于识别虽初始存在

1、在 Elements 面板中定位 video 标签,右键选择“break on” → “Attribute modifications”。

2、刷新页面,观察调试器是否在 JS 修改其 style.displaystyle.visibility 或插入兄弟节点(如 .vjs-tech)时中断。

3、若中断发生,暂停后查看调用,确认是否调用类似 player.tech_()initVideoJS() 的函数名。

4、此时需检查该 video 元素的 getAttribute(‘data-setup’) 或父容器 class 是否含 video-jsdplayer 等特征标识。

五、通过 network 面板验证视频资源请求协议与响应头

该方法从网络请求层面确认视频流是否由浏览器原生 video 标签发起,而非通过 XHR/Fetch + canvas/webgl 自绘实现。

1、打开开发者工具,切换至“Network”(网络)面板,筛选器设为 Media

2、播放视频,观察列表中新增请求的 Initiator 列:若显示为 video(index),表示由原生 video 标签触发;若显示为 fetchXHR 或某 JS 文件名,则非 HTML5 原生路径。

3、点击任一媒体请求,查看 Response Headers:确认存在 Content-Type: video/mp4(或 webm、ogg 等)且无 X-Content-Type-Options: nosniff 阻断解析的情形。

text=ZqhQzanResources