h5的video标签 在UIwebview中无法播放，Safari可以，
某些手机可以某些手机不行
和video.js实现一致，不嫌弃再引一个兼容包，想有更好体验的
建议使用https://videojs.com/
想自己体验一把原理，可以在文章最后拷贝demo代码运行
如果你有遇到the network connection was lost.网络连接已中断的情况，可以查看这篇文章 传送门
传统的方法在HTML中写video标签就可以点击播放啦
<video src="xxx.mp4" controls poster="url?vframe/jpg/offset/5" preload="load"></video>
// ?vframe/jpg/offset/5 这个是七牛接口，取截图用的，5就是第5秒截图
BUT，这么写在IOS 10.3.2/3 11.x.x. iphone 6/6p 7等等几个测试机中就不行，但是在个人手机上又可以，有的手机可以有的手机不行。
修改后：
步骤1：使用视频截图再做一个播放按钮，占位视频原有位置
步骤2: 监听占位按钮的click事件，使用video.play()，就可以看到视频有请求在加载了
步骤3: 在加载中的视频都有一个promise可以拿到，then以后把占位图和loading隐藏就可以了
tips:
- 不同手机/系统会有不同的请求范围，一般都是分割成3-5个206请求。
- console.time("加载毫秒");可以看到加载时间，基本和Charles抓包看到的一致。
- 不同手机/系统也会有不同的then表现有的是一点就给返回，有的是需要等视频全部加载完才返回
- 视频DOM的属性可以拿到当前加载了多少，总量是多少，除一下就是百分比，具体属性可以看 > https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
线上地址:http://m.soyoung.com/item/detail?type=0&sys=3&item_id=263&cityId=0
demo代码(方便有些朋友，私信想直接拿走demo啦~)
也可以把下面的代码 拷贝到http://www.runoob.com/runcode运行查看
<!DOCTYPE html>
<html data-dpr="1" style="font-size: 55px;">
<head>
<meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"/>
<title>视频DEMO</title>
</head>
<body style="font-size: 24px;">
<style>
html,body,video{
margin: 0;
padding: 0;
}
.pub-swipe .media {
position: relative;
font-size: 0;
margin-bottom: 0.4rem;
}
.pub-swipe .media img,
.pub-swipe .media video {
display: block;
margin: 0 auto;
width: 100%;
min-height: 4.667rem;
}
.pub-swipe .desc,
.pub-swipe .media img {
margin-bottom: 0.267rem;
}
.pub-swipe .media video {
width: 100%;
height: 4.667rem;
}
.pub-swipe .media img.video-go {
width: 2.707rem;
height: 2.707rem;
min-height: 0;
position: absolute;
left: 50%;
margin-left: -.853rem;
top: 1.3rem;
z-index: 5;
}
.hide {
display: none !important;
}
</style>
<div class="pub-swipe">
<p class="media">
<i class="video-i" data-src="http://videosy.soyoung.com/item-263.MP4">
<img src="http://videosy.soyoung.com/item-263.MP4?vframe/jpg/offset/5"/>
<img class="video-go" src="https://mstatic.soyoung.com/m/static/img/product/video_go.png"/>
</i>
</p>
</div>
<script>
/**
* 视频加载兼容处理
*/
var isIPhone = window.navigator.appVersion.match(/iphone/gi);
var creat_video = function () {
var _video = document.getElementsByClassName('video-i');
if (_video.length > 0) {
for (var i = 0; i < _video.length; i++) {
var _that = _video[i];
_that.addEventListener('click', function (e) {
var _this = e.currentTarget,
_videoUrl = _this.getAttribute('data-src'),
_img = _this.children[0].getAttribute('src'),
_dom = document.createElement('video'),
_autoPlayAllowed = true,
_loading = document.createElement('div'),
_p,
_process = document.createElement('i');
_noSound = document.createElement('em');
if (_this.getAttribute('data-video')) {
var _video = _this.parentNode.querySelectorAll('video');
var _noSound = _this.parentNode.querySelectorAll('.no-sound');
if (_video.length > 0) {
_dom = _video[0];
// if (_dom.ended) {
if (isIPhone) {
//修改Ios11状态不准，视频无法播放的问题
if (_dom.src.indexOf('random') > -1) {
_dom.src = _dom.src.split('random=')[0] + 'random=' + _dom.src.split('random=')[1] + 1;
} else {
_dom.src = _dom.src + '?random=' + Math.floor(Math.random() * (100 - 10 + 1) + 10);
}
}
_noSound[0].classList.remove('hide');
_dom.play();
_this.classList.add('hide');
_dom.classList.remove('hide');
// }
}
return;
}
_this.setAttribute('data-video', '1');
_process.setAttribute('class', 'vjs-process');
_process.innerHTML = '加载中...';
_loading.setAttribute('class', 'vjs-loading-spinner');
_dom.setAttribute('src', _videoUrl);
_dom.setAttribute('controls', 'controls');
_dom.setAttribute('autoPlay', 'false');
// _dom.setAttribute('x5-video-player-type', 'h5');
_this.parentNode.appendChild(_loading);
_this.parentNode.appendChild(_process);
_this.parentNode.classList.add('vjs-waiting');
_noSound.setAttribute('class', 'no-sound');
_noSound.innerHTML = '无声';
// _dom.setAttribute('webkit-playsinline', 'webkit-playsinline');
// _dom.setAttribute('playsinline', 'playsinline');
_dom.setAttribute('poster', _img);
_p = _dom.play();
console.time("加载毫秒");
var _dom_buffered_promise = function () {
var _end = _dom.buffered.end(0);
var _duration = _dom.duration;
var _a = Math.round(_end / _duration * 100);
_process.innerHTML = _a + '%';
console.log(_end + ' ' + _duration)
if (_a < 10) {
setTimeout(_dom_buffered, 200);
} else {
_dom_buffered();
}
};
var _dom_buffered = function () {
_this.parentNode.classList.remove('vjs-waiting');
_this.classList.add('hide');
_process.classList.add('hide');
_this.parentNode.appendChild(_dom);
_this.parentNode.appendChild(_noSound);
_dom.addEventListener('ended', function () {
_dom.classList.add('hide');
_this.classList.remove('hide');
_noSound.classList.add('hide');
});
_dom.currentTime = 0;
console.timeEnd("加载毫秒");
};
if (_p instanceof Promise) {
_p.catch(function (error) {
console.log(error.message);
if (error.name === 'NotAllowedError') {
_autoPlayAllowed = false;
}
}).then(function (e) {
if (_autoPlayAllowed) {
_dom_buffered_promise();
}
});
} else {
//ios8-9拿不到promise需要给个延时处理
setTimeout(function () {
_dom_buffered();
}, 4000);
}
});
}
}
};
new creat_video();
</script>
</body>
</html>
加载后的log
作者：kyle背背要转运
链接：https://www.jianshu.com/p/d23b72d146d4
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
相关推荐
内容概要：本文详细介绍了三电平SVPWM模型在Matlab中的搭建与研究，重点探讨了三电平逆变器的工作原理、性能特点以及参数优化方法。文中不仅解释了三电平逆变器相较于传统两电平逆变器的优势，如更高的电压分辨率和更低的谐波失真，还深入讨论了SVPWM控制策略的具体实现步骤，包括扇区划分、中性点电压平衡、死区时间和波形生成等关键环节。此外，文章还强调了仿真与实际应用之间的差异，指出仿真只是调试的起点而非终点。 适合人群：从事电力电子、自动化控制领域的研究人员和技术人员，尤其是对逆变器建模和仿真相关工作的从业者。 使用场景及目标：适用于需要深入了解三电平逆变器特性和优化控制策略的研究项目，旨在帮助读者掌握基于Matlab的三电平SVPWM模型构建技巧，从而更好地进行逆变器性能评估和改进。 其他说明：文章提供了大量实用的Matlab代码片段，便于读者理解和实践。同时提醒读者关注仿真与现实应用间的细微差别，确保理论成果能够顺利转化为实际效益。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
水利规范-7p倒虹吸工程及渠道防渗衬砌设计图集.zip
JAVAWeb外文文献毕业设计样本.doc
scratch少儿编程逻辑思维游戏源码-我的世界冒险通过 V5.zip
scratch少儿编程逻辑思维游戏源码-星之卡比 动画.zip
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
scratch少儿编程逻辑思维游戏源码-我的世界构建像素立方体.zip
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
scratch少儿编程逻辑思维游戏源码-仙人掌内战.zip
scratch少儿编程逻辑思维游戏源码-贪食蛇.zip
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
复制链接到浏览器打开即可，https://link3.cc/diwangluo
内容概要：本文详细介绍了使用Matlab编写的水果识别程序。首先简述了人工智能和机器学习在水果识别领域的应用背景，强调了Matlab作为强大编程环境的优势。接着，文章逐步讲解了水果识别程序的具体实现流程，涵盖数据预处理、特征提取、模型训练以及最终的识别算法实现。每个环节都采用了先进的技术和方法，如图像去噪、大小调整、深度学习算法（特别是卷积神经网络CNN），并通过训练神经网络模型来提升识别精度。此外，还讨论了相关技术手段和技术挑战，展示了Matlab在图像处理和计算机视觉方面的强大能力。 适合人群：对图像处理、机器学习感兴趣的科研人员、学生及工程师。 使用场景及目标：适用于希望深入了解Matlab环境下水果识别程序的设计与实现的研究者；旨在帮助使用者掌握从数据准备到模型部署的一系列技能，为实际项目提供理论支持和技术指导。 其他说明：文中不仅提供了详细的程序实现步骤，还对未来发展方向进行了展望，鼓励更多人参与到水果识别及相关领域的研究中。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文介绍了西门子S7-300 PLC在某汽车生产线的应用，涵盖了从硬件配置到软件编程的各个方面。硬件部分包括300 CPU、TP700触摸屏、远程ET200站点和Profibus DP网络系统。软件部分涉及PLC程序、HMI界面、IO表和图纸。重点在于模块化编程方法，如模拟量采集、气缸控制、线体阻挡、延时控制和自动换班等功能块的集成。同时，文中提到压力值和位移传感器的数据采集，并通过触摸屏以曲线形式展示。此外，还讨论了梯形图、STL和SCL三种编程语言的混合使用，确保程序结构清晰且易于维护。最后强调了Profibus DP网络在各站点间数据传输中的重要作用。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程和Profibus DP网络有研究兴趣的人群。 使用场景及目标：适用于汽车制造业及其他类似行业，旨在提高生产线的自动化程度和生产效率，确保产品质量。通过对S7-300 PLC的学习和应用，掌握模块化编程技巧和网络通信协议，优化生产线管理。 阅读建议：读者可以通过本文深入了解S7-300 PLC的具体应用场景和技术细节，特别是模块化编程的优势和混合编程的实际操作。同时，关注Profibus DP网络的作用，理解其在网络架构中的重要地位。
scratch少儿编程逻辑思维游戏源码-数学横版过关游戏.zip
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
E4A无障碍类库，含清明跨程序辅助类库+例程源码【E4A无障碍类库高级版下载】 目录截图https://www.vbjcw.cn/4791.html 无障碍辅助类库通常包括以下功能： 1. **语音合成与识别**：将文字转换为语音，同时也能将语音转化为文字，帮助有听力或视力障碍的用户。 2. **触控辅助**：提供大图标、震动反馈等，以适应不同用户的操作需求。 3. **屏幕阅读器**：读取屏幕上的内容，让视障用户理解屏幕上的信息。 4. **手势识别**：支持自定义手势操作，使用户可以通过简单的手势执行复杂的命令。 5. **高对比度模式**：增强色彩对比，方便视力不佳的用户查看屏幕内容。 6. **放大功能**：局部或全局放大屏幕，帮助视力弱的用户看清细节。 **例程源码的价值** 包含的例程源码是学习和理解辅助类库如何实际应用的关键资源。通过研究这些源码，开发者可以直观地看到类库在实际项目中的用法，了解如何调用函数、处理事件和实现特定的无障碍功能。这不仅有助于快速上手，还可以激发创新，开发出更多符合无障碍标准的新应用。 **总结** E4A无障碍类库和清明跨程序辅助类库的结合，为开发者提供了一个强大的工具集，以创建具有无障碍功能的应用程序。这些工具和源代码资源对于提升移动应用的包容性和用户体验具有重要意义。通过深入理解和利用这些类库，开发者能够为残障用户创造更加友好、易于操作的软件环境，促进数字世界的公平与和谐。