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>
作者:kyle背背要转运
链接:https://www.jianshu.com/p/d23b72d146d4
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
相关推荐
一个移动端 H5 Video 标签播放视频的实现
1.先是从前端的角度去考虑,如何让safari浏览器兼容video,并支持播放(未找到解决的方法)。 2.经多次查找网上信息,发现使用后台能解决该问题,解决点在HTTP协议的响应头里面(Accept-Ranges)。 3.safari浏览器,...
主要介绍了HTML页面原生VIDEO标签隐藏下载按钮功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
video标签行内属性 src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度 height:视频高度 webkit-...
vue、Html5、video标签、Android、IOS、百度AI 分析 1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能 2、video标签显示摄像头内容 3、canvas标签获取图片 4、将图像上传服务器,通过百度AI识别...
解决办法:给video标签加一些属性,调用h5原生video。 <video id=videoALL src=video/01.mp4 poster=images/1.jpg /*视频封面*/ preload=auto webkit-playsinline=true /*这个属性是ios 10中设置可以 让...
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验。 video的属性 <video id=video src=...
html5 中 Video标签兼容各大主流浏览器,Windows,ios 浏览器都支持
因为不能嵌入或者在 iOS 自动播放 HTML5 视频 为什么比使用一个动态 GIF 更好? 视频转换成 GIF 效果特别不好,因为颜色的取样关系。同时,视频 GIFs 的大小非常大。GIF 不能转换成视频,...
Momovi.com HTML5 HLS视频播放器 是免费使用的开源HTML5 HLS视频播放器。 支持平台: 所有主要浏览器,包括Safari,Chrome,FireFox,Internet Explorer; 平板电脑,包括iPad和Android 4.2+ 智能手机,包括...
Your browser does not support HTML5 video. 同上, xxx写的是你服务器IP地址。 然后使用手机访问这个网站就能够观看直播了。延迟大概在20S左右。 (在iOS的safari浏览器中可以正常观看) 写在最后 为什么延迟 ...
-增加了在iframe或新标签页中打开视频窗口的可能性; -修复样式和脚本; v1.0.0-2019年1月12日 -LiveSmart初始提交; 荻酷社区提示:下载后根据安装教程安装自行研究,源码是完整的,官方价是120美元,这个版本是...
重要的当没有好的 html5 视频播放器用于移动设备时,该库运行良好。 现在你应该更好地使用这样的东西: : jQuery-MobileVid 这个(非常小的)jQuery 模块旨在轻松地在移动页面上嵌入视频。 该模块旨在提供智能手机和...
LMVideoTestios采集音视频数据并通过rtmp上传到nginx说明本demo是利用ios客户端采集音视频数据并通过rtmp上传到nginx服务器上,html5页面可以通过video标签引入.m3u8文件即可播放直播视频。相关博文如果对你有用,...
HTML 标签;来自 HLS 的字幕;视频的多个字幕) :check_mark: HTTP 标头支持 :check_mark: BoxFit 的视频支持 :check_mark: 播放速度支持 :check_mark: HLS 支持(轨道、字幕(也分段)、音轨选择) :check_mark: ...