HTML5 视频标签在移动 Chrome 上的奇怪行为，但适用于 SAFARI
Posted
技术标签:
【中文标题】HTML5 视频标签在移动 Chrome 上的奇怪行为，但适用于 SAFARI【英文标题】：HTML5 video tag strange behavior on mobile CHROME but works on SAFARI 【发布时间】：2020-11-25 23:22:23 【问题描述】：我有一个简单的 html 5 页面，我正在测试访问网络浏览器的电视上的视频，但是当我在 android 上使用 CHROME 对其进行测试时，它不仅在 SAFARI 中有效。
经过一番搜索，我已经放了这些标签，也不行
autoplay="" loop="" muted=""
https://www.w3schools.com/html/html5_video.asp 中的这个例子，它适用于我的 ANDROID 我想知道为什么。
<!DOCTYPE html>
<!--[if IE 9]><html class="ie ie9"> <![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="pizza, delivery food, fast food, sushi, take away, Chinese, Italian food">
<meta name="description" content="">
<meta name="author" content="Digital Bravos | Soluções em Software">
<title> Menu Digital TV </title>
<!-- BASE CSS -->
<link href=" URL::asset('css/base.css') " rel="stylesheet">
<style>
.video-container-menap video
position: initial;
opacity: 1;
width: 400px;
</style>
</head>
<body>
<div class="video-container-menap">
<div>
<h1> RODAR VÍDEO </h1>
</div>
<div>
<video controls>
<source src="url-for-video" type="video/mp4">
<source src="url-for-video" type="video/ogg">
Your browser does not support HTML video.
</video>
</div>
</div>
</body>
</html>
【问题讨论】：
当你说它不起作用时，什么不起作用？你看到了什么行为？ 只是出现了一个播放按钮，但是当我按下它时，什么也没有发生 你的控制台有错误吗？ 我会尝试在我的 Android 手机上进行控制台，在这里看看你自己：js-s6vp6y.stackblitz.io另一个链接stackblitz.com/edit/js-s6vp6y?file=index.html @James 有什么分辨率吗？ 【参考方案1】：视频为 156 MB，尺寸为 3840x2160 - 即 4K（请参阅 ffprobe：https://www.streamclarity.com/probe?url=https://digitalbravos.nyc3.digitaloceanspaces.com/menap/tenants/tenant7/video/nippon_tv1.mp4）
我建议将此视频的大小调整为 1080p，甚至 720p，以便您的移动用户有机会观看（并且不会破坏他们的数据计划）。
我认为它没有出现的原因是你正在运行一些 JS 来隐藏内容，直到它出现在屏幕上......也许它会因为这么大的文件而出错。或者，服务人员可能无法存储 150 MB 的视频。或者下载 150 MB 文件时超时...
【讨论】：
以上是关于HTML5 视频标签在移动 Chrome 上的奇怪行为，但适用于 SAFARI的主要内容，如果未能解决你的问题，请参考以下文章
切换前置罕见摄像头时，HTML5 视频元素请求永远保持挂起状态（在移动设备上的 chrome 上）