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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
相关推荐
您的浏览器不支持video标签。 </video> ``` - `src`属性：指定视频文件的URL。 - `controls`属性：显示默认的控制条，包括播放/暂停按钮、进度条等。 - `poster`属性：设置视频加载前显示的预览图片。 二、移动端...
总结，实现H5 Video标签调用摄像头录像并兼容苹果、安卓系统以及微信浏览器，主要涉及HTML5 `<video>`标签、MediaStream Recording API、JavaScript编程以及微信JS-SDK的使用。通过这些技术，我们可以创建出一个跨...
在Web开发中，HTML5的`<video>`标签是一个强大的工具，允许我们在网页上嵌入和播放视频。然而，不同的浏览器可能对视频格式的支持不同，这可能会导致在某些浏览器上，比如Safari，无法正常播放视频。本篇将深入探讨...
总结起来，解决HTML5 `<video>`标签在iOS Safari中无法播放的问题，需要关注服务器端的响应头设置，尤其是`Accept-Ranges`和`Content-Type`，以及正确处理范围请求。通过这种方式，可以确保Safari能够成功下载并播放...
【video-js-html5视频播放器】是一个专为HTML5视频设计的开源播放器，它提供了丰富的功能和良好的跨平台兼容性，确保在多种设备和浏览器上都能流畅地播放视频内容。这款播放器不仅支持基本的视频播放控制，还允许...
HTML5 Video 视频播放器，如"video-js"，是现代网页开发中不可或缺的一部分，它使得在网页上集成和控制视频内容变得简单且标准化。HTML5 的引入为Web开发者提供了一种无需依赖Flash或其他插件来播放多媒体内容的方式...
这通常意味着集成了一种视频播放器，如AVPlayer或第三方库，以嵌入HTML中的视频标签（如`<video>`）来播放媒体内容。用户不仅可以阅读图文信息，还可以直接在应用内观看相关的视频报道。 6. **文件名称列表**：...
2. 修改video标签：找到所有的`<video>`标签，并添加必要的属性，如`webkit-playsinline`和`playsinline`。这两个属性告诉Webview允许视频在内联模式下播放。 3. 触发播放：库可能还会处理播放事件，确保视频在合适...
`VideoPlayer` 插件的核心功能是替代原生的HTML5 `<video>` 标签，通过自定义的播放控件和样式，实现视频在微信内部的无缝播放，避免弹出全屏窗口。这样，用户可以在不离开当前页面的情况下观看视频，提高用户体验，...
`<video>`标签允许我们添加源文件、设置视频尺寸、添加预加载和自动播放等属性，以及定义控制元素，如播放/暂停按钮和进度条。在这个自定义组件中，开发者可能已经扩展了`<video>`元素的功能，创建了一个更符合用户...
在这个案例中，`index.html`文件利用HTML5的video元素来实现视频播放功能。用户可以在iOS设备上直接观看视频，无需借助额外的媒体播放器。 其次，为了让这个Web APP能够在iOS设备上获得更佳的体验，它具备了添加到...
在HTML5时代，Video.js的重要性在于它提供了一个统一的API和界面，无论用户使用的浏览器是基于WebM、MP4还是Ogg格式，都能确保视频内容的流畅播放。其核心特性包括： 1. **跨浏览器兼容性**：Video.js 支持所有主流...
首先，HTML5是超文本标记语言（HTML）的第五个版本，引入了许多新特性，包括语义化标签（如、）、离线存储（App Cache）、表单控制增强（如）、媒体元素（、<video>）以及Canvas和SVG图形等。这些特性使得开发者可以...
在移动端开发中，为了实现跨平台的视频播放功能，开发者经常使用HTML5的`<video>`标签配合相应的视频播放库，比如Video.js。本压缩包"手机端videojs播放m3u8的文件.zip"提供了在VUE环境下，让安卓和iOS设备都能播放...
通过加载HTML页面，内嵌HTML5 `<video>` 标签，可以播放支持的视频格式。 3. **MPMoviePlayerController**：这是一个早期的媒体播放解决方案，但在iOS 9之后被弃用。尽管如此，对于兼容旧版本iOS的应用，仍可能使用...
首先，我们来看一下基本的HTML5 `<video>` 标签的用法。在示例代码中： ```html <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> </video> ``` 这个代码会在页面上创建...
总的来说，"iphone-inline-video.browser.js"是针对iOS设备的一个JavaScript解决方案，它允许HTML5视频在Safari浏览器中以非全屏模式播放，提供了一种与系统默认行为相悖的用户体验，这对于那些希望在网页中实现内联...
这是因为苹果的 HLS 实现与HTML5的 `<video>` 标签存在一些差异，可能导致播放问题。开发者在部署时需要特别注意这一点，可能需要针对iOS设备进行额外的优化或者寻找其他解决方案。 **CKPlayer的特性：** 1. **跨...
HTML5是超文本标记语言的第五个版本，它在HTML4的基础上增加了许多新特性，如语义化标签（如、、等）、离线存储（localStorage和sessionStorage）、媒体元素（和<video>）以及Canvas和SVG图形绘制等。这些特性使得...
在本文中，我们将深入探讨如何使用Video.js库播放M3U8格式的视频，这是一个流行的JavaScript库，专门用于处理HTML5视频。Video.js提供了一种简单的方法来播放不同类型的视频，包括M3U8，这是一种适用于HLS...