原文链接: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 视频播放解决方案的更多相关文章

  1. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  2. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  3. 移动端 HTML5 <video> 视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  4. [转]移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  5. Chrome/Chromium HTML5 video 视频播放硬件加速

    Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...

  6. HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速

    Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...

  7. 借用网上大神的一些知识,html5 video 视频播放都兼容(Android,iOS,电脑)

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  8. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  9. html5视频播放解决方案

    关键词:html5  nativeapp webapp mp4 H.264 html5没学习之前总觉的很神秘.近期通过学习和研究html5有点成果,特总结分享给大家.众所周知应用开发分两种:一是原生的 ...

随机推荐

  1. 让开发部署提速 8 倍,我参与贡献这款 IDE 插件的全过程

    如何像参与开源那样,去参与一款 IDE 插件的设计? 作为一款 IDE 插件的使用者,我是否能决定下一个版本的功能? 自从产品经理银时小伙和他的开发小哥们在去年12月发布 Cloud Toolkit( ...

  2. 通过 PHP OPcache 提升 Laravel 应用运行速度

    什么是 OPcache 每一次执行 PHP 脚本的时候,该脚本都需要被编译成字节码,而 OPcache 可以对该字节码进行缓存,这样,下次请求同一个脚本的时候,该脚本就不需要重新编译,这极大节省了脚本 ...

  3. jmeter日期处理beanshell(1)

    import java.time.LocalDate; //昨天: String sdate1 = LocalDate.now().minusDays(1).toString(); vars.put( ...

  4. Mybatis Generator配置文件完整配置详解

    完整的Mybatis Generator(简称MBG)的最完整配置文件,带详解,再也不用去看EN的User Guide了 可以搭配着mybatis generator的中文文档看:http://mbg ...

  5. Spring IoC 使用详解

    在Spring中,依赖注入(DI)模式实现了控制反转(IoC)原理.让我们通过一个例子来帮助理解依赖注入.我们先看到java版的例子,然后在此基础上加上spring的功能.就例子而言,是相当地简单.Q ...

  6. IP应用加速技术详解:如何提升动静混合站点的访问速率?

    全站加速(DCDN)-IPA是阿里云自主研发四层加速产品,它基于TCP/UDP的私有协议提供加速服务,包括解决跨运营商网络不稳定.单线源站.突发流量.网络拥塞等诸多因素导致的延迟高.服务不稳定的问题, ...

  7. Centos7 Apache配置虚拟主机的三种方式

    https://blog.csdn.net/tladagio/article/details/80760261 一.虚机主机的三种方式 1.基于IP 2.基于IP+端口 3.基于域名 官网文档:htt ...

  8. 受控组件 & 非受控组件

    在 React 中表单组件可分为两类,受控与非受控组件. 一. 受控组件 设置了 value 的 <input> 是一个受控组件. 对于受控的 <input>,渲染出来的 HT ...

  9. 横向tab计算滚动位置

    React横向滚动计算 class Footer extends React.Component { handleClick(e) { const offset = 150; // 指定偏移量 thi ...

  10. 指针版的PStash(用一个void指针数组, 来保存存入元素的地址) 附模板化实现 p321

    由容器PStash的使用者,负责清除容器中的所有指针.所以用户必须记住放到容器中的是什么类型,在取出时,把取出的void指针转换成对应的类型指针,然后 'delete 转换后的对象指针',才能在清除时 ...