video 视频标签的属性
一、核心 HTML5 属性
<video src="video.mp4" controls preload="metadata" poster="thumbnail.jpg" width="800" height="450" muted loop autoplay playsinline crossorigin="anonymous" class="video-player" > <!-- 备用内容 --> <p>您的浏览器不支持 HTML5 视频</p> </video>
二、针对 iOS/Safari 的关键属性
<video playsinline webkit-playsinline x5-playsinline t7-video-player-type="inline" >
解释：
playsinline - 标准属性，防止 iOS 自动全屏
webkit-playsinline - WebKit 前缀版本（iOS 9-10 需要）
x5-playsinline - 腾讯 X5 内核（微信浏览器）
t7-video-player-type="inline" - 部分安卓浏览器
三、自动播放策略（iOS 限制）
<!-- iOS 允许自动播放的条件 --> <video autoplay playsinline muted> <!-- 必须同时有：autoplay + playsinline + muted --> </video> <!-- 或使用 JavaScript 控制 --> <video id="myVideo" playsinline controls>
// iOS 需要用户交互才能播放声音
document.addEventListener('touchstart', function() {
const video = document.getElementById('myVideo');
video.play().catch(e => console.log(e));
}, { once: true });四、推荐的最佳实践配置
<video controls playsinline webkit-playsinline preload="metadata" poster="poster.jpg" width="100%" height="auto" style="object-fit: contain; background-color: #000;" crossorigin="anonymous" aria-label="视频描述" > <!-- 多格式支持 --> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <!-- 备用内容 --> <p>您的浏览器不支持 HTML5 视频</p> </video>
五、重要 CSS 补充
video {
/* 防止 iOS 默认控件 */
-webkit-appearance: none;
/* 移除 iOS 的蓝色高光 */
-webkit-tap-highlight-color: transparent;
/* 禁用文本选择 */
user-select: none;
-webkit-user-select: none;
/* 响应式 */
max-width: 100%;
height: auto;
display: block;
}六、微信浏览器特殊处理
<video x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait" >
浏览器全屏切换、不允许选中示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器全屏切换示例</title>
<style>
.no-select{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
</style>
</head>
<body>
<button id="fullscreenBtn">进入全屏模式</button>
<div class="no-select" style="margin:2em 0;">使用css控制，双击这里时，文字<span style="color:red">不会</span>被选中</div>
<div style="margin:2em 0;">双击这里时，文字<span style="color:red">会</span>被选中</div>
<strong>css控制不选中</strong>
<pre style="padding:10px;border:1px solid #ccc;background-color:#f3f3f3">
.no-select{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
</pre>
<strong>js控制不选中</strong>
<pre style="padding:10px;border:1px solid #ccc;background-color:#f3f3f3">
const selection = window.getSelection();
if(selection)selection.removeAllRanges();
</pre>
<script>
function toggleFullscreen() {
// 获取全屏API的兼容性写法
const requestFullscreen = document.documentElement.requestFullscreen ||
document.documentElement.mozRequestFullScreen ||
document.documentElement.webkitRequestFullscreen ||
document.documentElement.msRequestFullscreen;
const exitFullscreen = document.exitFullscreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen;
if (!document.fullscreenElement &&
!document.mozFullScreenElement &&
!document.webkitFullscreenElement &&
!document.msFullscreenElement) {
// 进入全屏
requestFullscreen.call(document.documentElement);
} else {
// 退出全屏
exitFullscreen.call(document);
}
}
document.getElementById('fullscreenBtn').addEventListener('click', toggleFullscreen);
document.addEventListener('dblclick', toggleFullscreen);
</script>
</body>
</html>
html跨平台在线预览pdf
PDFObject.js
官网：https://pdfobject.com/
相关博客：
https://blog.csdn.net/i_dont_know_a/article/details/80707963
https://blog.csdn.net/qappleh/article/details/80250492
https://www.jq22.com/yanshi649
pdf.js
官网：https://mozilla.github.io/pdf.js/getting_started/
相关博客：
https://blog.csdn.net/weixin_42400643/article/details/152602790
https://blog.csdn.net/weixin_31800911/article/details/148820919
https://www.jb51.net/javascript/338851frl.htm
html根据坐标生成百度地图、高德地图导航地址
百度地图
https://map.baidu.com/?latlng=36.683544,117.032171&title=济南市大明湖公园&content=山东省济南市历下区大明湖路271号&autoOpen=true&l=
高德地图
http://ditu.amap.com/regeo?lng=104.06074583530426&lat=30.5379691198173
纯html的文件下载
以下链接会直接打开 abc.html
<a href="abc.html">abc.html</a>
以下链接会下载 abc.html
<a href="abc.html" download>abc.html</a>
以下链接会下载 abc.html 并重命名为 def.html
<a href="abc.html" download="def.html">abc.html</a>
这种方式实现下载的前提是：同源！不可跨域！
生成某个地点的百度导航html链接
https://map.baidu.com/?latlng=纬度,经度&title=地点名称&content=备注信息&autoOpen=true&l=
HTML中直接用十进制、十六进制代码输出字符
十进制（中国）：中国
十六进制（中国）：中国
//js获取字符十进制unicode代码（最大65535） 'abc'.charCodeAt(0); //97 'a'.charCodeAt(); //97 '中'.charCodeAt(); //20013 //十进制unicode代码转字符 String.fromCharCode(97); //a //位于补充平面中的4字节的unicode字符，获取十进制unicode代码 '𝄞'.codePointAt(); //119070 '𝄞'.codePointAt().toString(16); //十六进制1d11e //4字节十进制unicode代码转字符 String.fromCodePoint(119070); //𝄞
apifox.com之通过JSON Schema设置数组类型的复杂form_data参数
{
"type": "array",
"items": {
"type": "object",
"properties": {
"goods_type": {
"type": "string",
"title": "材料类型",
"enum": [
"material",
"semifinished"
],
"x-apifox": {
"enumDescriptions": {
"material": "原料",
"semifinished": "原料型产品"
}
}
},
"goods_classid": {
"type": "integer",
"title": "材料类别id"
},
"goods_name": {
"type": "string",
"title": "材料名称",
"description": "仅原料型产品有"
},
"goods_weight": {
"type": "number",
"title": "材料重量",
"description": "最多三位小数，单位：t"
}
},
"required": [
"goods_type",
"goods_classid",
"goods_weight"
],
"x-apifox-orders": [
"goods_type",
"goods_classid",
"goods_name",
"goods_weight"
]
}
}
用jQuery对html转义字符进行反转义
$('<div></div>').html(转义后的html).text();HTML中的Meta标签详解
来源：https://zhuanlan.zhihu.com/p/56233041
emta标签的组成：
meta标签分两大部分：HTTP-EQUIV和NAME变量。
HTTP-EQUIV:
HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
常用的HTTP-EQUIV类型有：
1.expires(期限)：
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
用法：<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
注意：必须使用GMT的时间格式。
2.Pragma(cach模式)：
说明：禁止浏览器从本地机的缓存中调阅页面内容。
用法：<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
注意：这样设定，访问者将无法脱机浏览。
3.Refresh(刷新)：
说明：需要定时让网页自动链接到其它网页的话，就用这句了。
用法：<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
注意：其中的5是指停留5秒钟后自动刷新到URL网址。
4.Set-Cookie(cookie设定)：
说明：如果网页过期，那么存盘的cookie将被删除。
用法：<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;
expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">
注意：必须使用GMT的时间格式。
5.Window-target(显示窗口的设定):
说明：强制页面在当前窗口以独立页面显示。
用法：<META HTTP-EQUIV="Window-target" CONTENT="_top">
注意：用来防止别人在框架里调用你的页面。
6.Content-Type(显示字符集的设定):
说明：设定页面使用的字符集。(我们在前面字体设计中已经介绍过它的作用)
用法：<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
NAME变量:
meat标签的NAME变量语法格式是：
<META NAME="xxx" CONTENT="xxxxxxxxxxxxxxxxxx">
其中xxx主要有下面几种参数：
1.Keywords(关键字)：
说明：keywords用来告诉搜索引擎你网页的关键字是什么。
举例：<META NAME ="keywords" CONTENT="life, universe, mankind, plants,
relationships, the meaning of life, science">
2.description(简介)：
说明：description用来告诉搜索引擎你的网站主要内容。
举例：<META NAME="description" CONTENT="This page is about the meaning of
life, the universe, mankind and plants.">
3.robots(机器人向导)：
说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：<META NAME="robots" CONTENT="none">
4.author(作者)：
说明：标注网页的作者
举例：<META name="AUTHOR" content="ajie,ajie@netease.com">
