微信 HTML5 VIDEO 视频播放解决方案
原文链接:https://www.jianshu.com/p/e4573acf6564
webkit-playsinline && playsinline="true"
- 小窗播放 使视频不脱离文本流,但是需要webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES),现在结果是苹果支持,安卓不支持。安卓播放会全屏。
x-webkit-airplay="allow"
- 允许airplay(通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。)
x5-video-player-type="h5"
- 通过video属性“x5-video-player-type”声明启用同层H5播放器
- x5-video-player-type支持的值类型:h5
- 这个属性需要在播放前设置好,播放之后设置无效
x5-video-player-fullscreen="true"
- 视频播放时将会进入到全屏模式,如果不申明此属性,页面得到视口区域为原始视口大小(视频未播放前),比如在微信里,会有一个常驻的标题栏,如果不声明此属性,这个标题栏高度不会给页面,播放时会平均分为两块(上下黑块)
- 注: 声明此属性,需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现
window.onresize = function(){
test_video.style.width = window.innerWidth + "px";
test_video.style.height = window.innerHeight + "px";
}
x5-video-orientation控制横竖屏
- 声明播放器支持方向
- 可选值: landscape 横屏,portrain竖屏; 默认portrain
- 跟随手机自动旋转
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>
方法
自动播放
setTimeout(function () { video.play(); }, 1000);
video.addEventListener('touchstart', function () {
video.play();
});
进入全屏状态
video.on('x5videoenterfullscreen', function() {
//延时修改video尺寸以占满全屏
//$(this).attr('x5-video-player-type','');
setTimeout(function() {
$('video').css({
width: window.innerWidth,
height: window.innerHeight,
});
}, 200);
});
退出全屏状态
//退出全屏状态
video.on('x5videoexitfullscreen', function() {
//清除
$(this).css({
width: '',
height: '',
});
});
控制video同层播放位置
video {
object-position: 0 0;
}
获取视频缓存进度
function gp() {
var _this=video;// video为当前video元素
var percent=null;
// FF4+, Chrome
if (_this && _this.buffered && _this.buffered.length > 0 && _this.buffered.end && _this.duration) {
percent = _this.buffered.end(0) / _this.duration;
}
// Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
// to be anything other than 0. If the byte count is available we use this instead.
// Browsers that support the else if do not seem to have the bufferedBytes value and
// should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
else if (_this && _this.bytesTotal != undefined && _this.bytesTotal > 0 && _this.bufferedBytes != undefined) {
percent = _this.bufferedBytes / _this.bytesTotal;
}
if (percent !== null) {
percent = 100 * Math.min(1, Math.max(0, percent));
return percent;
}
return 0;
}
作者:Vinashed
链接:https://www.jianshu.com/p/e4573acf6564
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
微信 HTML5 VIDEO 视频播放解决方案的更多相关文章
- 移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- 移动端HTML5<video>视频播放优化实践[转]
http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...
- 移动端 HTML5 <video> 视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- [转]移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- Chrome/Chromium HTML5 video 视频播放硬件加速
Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...
- HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速
Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...
- 借用网上大神的一些知识,html5 video 视频播放都兼容(Android,iOS,电脑)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
- html5 video微信浏览器视频不能自动播放
html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...
- html5视频播放解决方案
关键词:html5 nativeapp webapp mp4 H.264 html5没学习之前总觉的很神秘.近期通过学习和研究html5有点成果,特总结分享给大家.众所周知应用开发分两种:一是原生的 ...
随机推荐
- 让开发部署提速 8 倍,我参与贡献这款 IDE 插件的全过程
如何像参与开源那样,去参与一款 IDE 插件的设计? 作为一款 IDE 插件的使用者,我是否能决定下一个版本的功能? 自从产品经理银时小伙和他的开发小哥们在去年12月发布 Cloud Toolkit( ...
- 通过 PHP OPcache 提升 Laravel 应用运行速度
什么是 OPcache 每一次执行 PHP 脚本的时候,该脚本都需要被编译成字节码,而 OPcache 可以对该字节码进行缓存,这样,下次请求同一个脚本的时候,该脚本就不需要重新编译,这极大节省了脚本 ...
- jmeter日期处理beanshell(1)
import java.time.LocalDate; //昨天: String sdate1 = LocalDate.now().minusDays(1).toString(); vars.put( ...
- Mybatis Generator配置文件完整配置详解
完整的Mybatis Generator(简称MBG)的最完整配置文件,带详解,再也不用去看EN的User Guide了 可以搭配着mybatis generator的中文文档看:http://mbg ...
- Spring IoC 使用详解
在Spring中,依赖注入(DI)模式实现了控制反转(IoC)原理.让我们通过一个例子来帮助理解依赖注入.我们先看到java版的例子,然后在此基础上加上spring的功能.就例子而言,是相当地简单.Q ...
- IP应用加速技术详解:如何提升动静混合站点的访问速率?
全站加速(DCDN)-IPA是阿里云自主研发四层加速产品,它基于TCP/UDP的私有协议提供加速服务,包括解决跨运营商网络不稳定.单线源站.突发流量.网络拥塞等诸多因素导致的延迟高.服务不稳定的问题, ...
- Centos7 Apache配置虚拟主机的三种方式
https://blog.csdn.net/tladagio/article/details/80760261 一.虚机主机的三种方式 1.基于IP 2.基于IP+端口 3.基于域名 官网文档:htt ...
- 受控组件 & 非受控组件
在 React 中表单组件可分为两类,受控与非受控组件. 一. 受控组件 设置了 value 的 <input> 是一个受控组件. 对于受控的 <input>,渲染出来的 HT ...
- 横向tab计算滚动位置
React横向滚动计算 class Footer extends React.Component { handleClick(e) { const offset = 150; // 指定偏移量 thi ...
- 指针版的PStash(用一个void指针数组, 来保存存入元素的地址) 附模板化实现 p321
由容器PStash的使用者,负责清除容器中的所有指针.所以用户必须记住放到容器中的是什么类型,在取出时,把取出的void指针转换成对应的类型指针,然后 'delete 转换后的对象指针',才能在清除时 ...