王新阳

wangxinyang

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的文件下载

以下链接会直接打开 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>

这种方式实现下载的前提是：同源！不可跨域！

回应

HTML5新增的属性和废除的属性

https://www.cnblogs.com/tianma3798/p/3660687.html

https://www.cnblogs.com/lzhat/p/4451134.html

https://blog.csdn.net/qdy5945/article/details/101975422

回应

js分块上传、压缩图片等

了解JS压缩图片，这一篇就够了
https://wuwhs.gitee.io/2020/06/07/js-image-compressor/
https://zhuanlan.zhihu.com/p/187021794

thinkphp+H5文件分片（切块）上传
https://www.jianshu.com/p/f0d538732616

php如何获取到formData上传图片的二进制数据
https://www.php.cn/php-weizijiaocheng-335410.html

php 文件流与二进制流_PHP接收二进制流并生成文件https://blog.csdn.net/weixin_34123023/article/details/115103471

php接收二进制流（图片）生成图片文件文件
https://blog.csdn.net/lxw1844912514/article/details/103603882

利用HTML5分片上传超大文件
https://blog.csdn.net/moonpure/article/details/54861252

【php】php+js实现文件分块上传
https://www.h5w3.com/107250.html

H5大文件分片上传.rar
https://download.csdn.net/download/java431/11993532

直接剪切板粘贴上传图片的前端JS实现
https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard/

HTML5 file API加canvas实现图片前端JS压缩并上传
https://www.zhangxinxu.com/wordpress/2017/07/html5-canvas-image-compress-upload/


HTML5 文件域+FileReader 读取文件（一）
https://www.cnblogs.com/tianma3798/p/4355949.html

HTML5 文件域+FileReader 读取文件（二）
https://www.cnblogs.com/tianma3798/p/5839791.html

HTML5 文件域+FileReader 读取文件并上传到服务器（三）
https://www.cnblogs.com/tianma3798/p/5839810.html

HTML5 文件域+FileReader 分段读取文件（四）
https://www.cnblogs.com/tianma3798/p/5839869.html

HTML5 文件域+FileReader 分段读取文件（五）
https://www.cnblogs.com/tianma3798/p/5841584.html

HTML5 文件域+FileReader 分段读取文件并上传到服务器（六）
https://www.cnblogs.com/tianma3798/p/5845291.html

Web 前沿——HTML5 Form Data 对象的使用
https://www.cnblogs.com/tianma3798/p/4294391.html
https://www.cnblogs.com/tianma3798/p/4293656.html

html_html5增强的文件上传域_使用FileReader读取文件内容
https://www.cnblogs.com/isXianYue/p/13196444.html

回应

layui

https://gitee.com/sentsin/layui

https://www.layui.com/

http://layuimini.99php.cn/

layui admin后台框架：

http://layuimini.99php.cn/iframe/v2/

http://layuimini.99php.cn/onepage/v2/

下载：

https://github.com/zhongshaofa/layuimini/tree/v2
https://gitee.com/zhongshaofa/layuimini/tree/v2
https://github.com/zhongshaofa/layuimini/tree/v2-onepage
https://gitee.com/zhongshaofa/layuimini/tree/v2-onepage

回应

HTML AUDIO/VIDEO DOM事件

当音频/视频处于加载过程中时，会依次发生以下事件：

1、loadstart
当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时。

2、durationchange
当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。 当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。

3、loadedmetadata
当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。

4、loadeddata
当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。

5、progress
当浏览器正在下载指定的音频/视频时，会发生 progress 事件。

6、canplay
当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。

7、canplaythrough
当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。

回应

jquery.pjax.js

原理 html5 api：
history.state
history.pushState
history.replaceState

回应

1
王新阳
目录浏览
CSS  ASP  PS  PHPExcel  阿里云  电影  视频  PHOTO  Apple  奇  WINDOWS  书签  SQL  nginx  bootstrap  CI  JS  video  HTML    IT  excel  PHP  正则  HTML5  .htaccess  未分类  IIS  JQUERY  ueditor  layui  jQueryMobile  微信  web.config  微博  SEO  linux
2026-03-01 星期日 农历正月十三