原文链接: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 事件来实现
  1. window.onresize = function(){
  2. test_video.style.width = window.innerWidth + "px";
  3. test_video.style.height = window.innerHeight + "px";
  4. }

x5-video-orientation控制横竖屏

  • 声明播放器支持方向
  • 可选值: landscape 横屏,portrain竖屏; 默认portrain
  • 跟随手机自动旋转
  1. <video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>

方法

自动播放

  1. setTimeout(function () { video.play(); }, 1000);
  2. video.addEventListener('touchstart', function () {
  3. video.play();
  4. });

进入全屏状态

  1. video.on('x5videoenterfullscreen', function() {
  2. //延时修改video尺寸以占满全屏
  3. //$(this).attr('x5-video-player-type','');
  4. setTimeout(function() {
  5. $('video').css({
  6. width: window.innerWidth,
  7. height: window.innerHeight,
  8. });
  9. }, 200);
  10. });

退出全屏状态

  1. //退出全屏状态
  2. video.on('x5videoexitfullscreen', function() {
  3. //清除
  4. $(this).css({
  5. width: '',
  6. height: '',
  7. });
  8. });

控制video同层播放位置

  1. video {
  2. object-position: 0 0;
  3. }

获取视频缓存进度

  1. function gp() {
  2. var _this=video;// video为当前video元素
  3. var percent=null;
  4. // FF4+, Chrome
  5. if (_this && _this.buffered && _this.buffered.length > 0 && _this.buffered.end && _this.duration) {
  6. percent = _this.buffered.end(0) / _this.duration;
  7. }
  8. // Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
  9. // to be anything other than 0. If the byte count is available we use this instead.
  10. // Browsers that support the else if do not seem to have the bufferedBytes value and
  11. // should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
  12. else if (_this && _this.bytesTotal != undefined && _this.bytesTotal > 0 && _this.bufferedBytes != undefined) {
  13. percent = _this.bufferedBytes / _this.bytesTotal;
  14. }
  15. if (percent !== null) {
  16. percent = 100 * Math.min(1, Math.max(0, percent));
  17. return percent;
  18. }
  19. return 0;
  20. }

作者: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. SDUT-3362_村村通公路

    数据结构实验之图论六:村村通公路 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 当前农村公路建设正如火如荼的展开,某乡 ...

  2. ubuntu 使用glfw.h 出现函数无法调用

    最近在学习在Ubuntu下使用qt进行opengl开发,使用到了glfw这个库.我安装官网的编译和安装方法进行了配置安装,在usr/local/include的下产生了glfw.h文件. 于是我在我的 ...

  3. 设置WPF窗口相对于非WPF窗口的位置

    原文:设置WPF窗口相对于非WPF窗口的位置 在前一个Post当中,指出了在WPF的WindowInteropHelper类中的一个BUG:通过WindowInteropHelper的Owner属性不 ...

  4. Google 各国地址

    google各国域名大全 香港www.google.com.hk 台湾www.google.com.tw 日本www.google.co.jp 中国www.google.cn 韩国www.google ...

  5. Django之内置组件

    Django组件介绍       分页器的使用       Form       modelForm       orm       cookie和session       中间件       信号 ...

  6. oracle函数 extract(c1 from d1)

    [功能]:日期/时间d1中,参数(c1)的值 [参数]:d1日期型(date)/日期时间型(timestamp),c1为字符型(参数) [参数表]:c1对应的参数表详见示例 [返回]:字符 [示例] ...

  7. H3C Comware的作用

  8. Pytorch | BERT模型实现,提供转换脚本【横扫NLP】

    <谷歌终于开源BERT代码:3 亿参数量,机器之心全面解读>,上周推送的这篇文章,全面解读基于TensorFlow实现的BERT代码.现在,PyTorch用户的福利来了:一个名为Huggi ...

  9. <STL源码剖析> 6.3.6 power

    计算power的算法说明 http://www.sxt.cn/u/324/blog/2112 翻译自  http://videlalvaro.github.io/2014/03/the-power-a ...

  10. zoj 2338 The Towers of Hanoi Revisited

    The Towers of Hanoi Revisited Time Limit: 5 Seconds Memory Limit: 32768 KB Special Judge You all mus ...